Skip to main content

Link

Specs in editor-protocol

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,
  PlateProvider,
} from '@udecode/plate';
import { basicNodesPlugins } from './basic-nodes/basicNodesPlugins';
import { editableProps } from './common/editableProps';
import { plateUI } from './common/plateUI';
import { linkPlugin } from './link/linkPlugin';
import { linkValue } from './link/linkValue';
import { Toolbar } from './toolbar/Toolbar';
import { createMyPlugins, MyValue } from './typescript/plateTypes';

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

export default () => (
  <PlateProvider<MyValue> plugins={plugins} initialValue={linkValue}>
    <Toolbar>
      <LinkToolbarButton icon={<Link />} />
    </Toolbar>

    <Plate<MyValue> editableProps={editableProps} />
  </PlateProvider>

Enable floating link using:

renderAfterEditable: PlateFloatingLink

Options#

interface LinkPlugin {
/**
* Allow custom config for rangeBeforeOptions.
* @example default
* {
* matchString: ' ',
* skipInvalid: true,
* afterMatch: true,
* }
*/
rangeBeforeOptions?: RangeBeforeOptions;
/**
* Hotkeys to trigger floating link.
* @default 'meta+k, ctrl+k'
*/
triggerFloatingLinkHotkeys?: string | string[];
/**
* List of allowed URL schemes.
* @default ['http', 'https', 'mailto', 'tel']
*/
allowedSchemes?: string[];
/**
* Callback to validate an url.
* @default isUrl
*/
isUrl?: (text: string) => boolean;
/**
* Callback to optionally get the href for a url
* @returns href: an optional link to be used that is different from the text content (example https://google.com for google.com)
*/
getUrlHref?: (url: string) => string | undefined;
/**
* 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#

Edit this page