Docs
Link

Link

Insert and manage hyperlinks.

Link ElementLink Floating ToolbarLink Toolbar Button

Features

  • Support for hyperlink insertion, edition and removal.

Installation

npm install @udecode/plate-link

Usage

import { createLinkPlugin } from '@udecode/plate-link';
 
const plugins = [
  // ...otherPlugins,
  createLinkPlugin(),
];

API

createLinkPlugin

Parameters

Collapse all

    Determines whether to force the submission of the link form.

    Allows custom configurations for rangeBeforeOptions.

    • Default:
    {
  matchString: ' ',
  skipInvalid: true,
  afterMatch: true,
}

    Hotkeys to trigger floating link.

    • Default: 'meta+k, ctrl+k'

    List of allowed URL schemes.

    • Default: ['http', 'https', 'mailto', 'tel']

    Determines whether the sanitation of links should be skipped.

    • Default: false

    Default HTML attributes for link elements.

    • Default: {}

    Keeps selected text on pasting links by default.

    • Default: true

    Callback function to validate a URL.

    • Default: isUrl

    Callback function to optionally get the href for a URL. It returns an optional link that is different from the text content. For example, returns https://google.com for google.com.

    On keyboard shortcut or toolbar mousedown, this function is called to get the link URL. The default behavior is to use the browser's native prompt.

getLinkAttributes

insertLink

Insert a link node.

submitFloatingLink

  • Insert link if url is valid.
  • Text is url if empty.
  • Close floating link.
  • Focus editor.

triggerFloatingLink

triggerFloatingLinkEdit

triggerFloatingLinkInsert

Trigger floating link.

Do not trigger when:

  • Selection is across blocks.
  • Selection has more than one leaf node.
  • Lowest selection is not text.
  • Selection has a link node.

unwrapLink

Unwrap link node.

upsertLink

If selection in a link or is not url:

  • Insert text with url, exit.

If selection is expanded or update in a link:

  • Remove link node, get link text.

Then:

  • Insert link node.

upsertLinkText

If the text is different than the link above text, replace link children by a new text. The new text has the same marks than the first text replaced.

validateUrl

wrapLink

Wrap a link node with split.

API Components

FloatingLinkNewTabInput

FloatingLinkUrlInput

LinkOpenButton

floatingLinkStore

useFloatingLinkEdit

useFloatingLinkEnter

useFloatingLinkEscape

useFloatingLinkInsert

useLink

useLinkToolbarButton

useVirtualFloatingLink

Keyboard Interactions

KeyDescription
Cmd + K

Add a link on the selected text.

Line HeightList