Skip to main content

Link

Installation#

npm install @udecode/plate
# or
npm install @udecode/plate-link
npm install @udecode/plate-ui-link

Usage#

import React from 'react';
import { Link } from '@styled-icons/material/Link';
import { createLinkPlugin, LinkToolbarButton, Plate } from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { linkValue } from './link/linkValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

const plugins = createMyPlugins([...basicNodesPlugins, createLinkPlugin()], {
  components: plateUI,
});

export default () => (
  <>
    <Toolbar>
      <LinkToolbarButton icon={<Link />} />
    </Toolbar>

    <Plate<MyValue>
      editableProps={editableProps}
      plugins={plugins}
      initialValue={linkValue}
    />
  </>

Options#

interface LinkPlugin extends HotkeyPlugin {
/**
* Allow custom config for rangeBeforeOptions.
*/
rangeBeforeOptions?: RangeBeforeOptions;
/**
* Callback to validate an url.
*/
isUrl?: (text: string) => boolean;
/**
* On keyboard shortcut or toolbar mousedown, get the link url by calling this promise. The
* default behavior is to use the browser's native `prompt`.
*/
getLinkUrl?: (prevUrl: string | null) => Promise<string | null>;
}

Source Code#