@lexical/link

What is @lexical/link?

@lexical/link is a plugin for the Lexical framework that provides functionality for handling links within a Lexical editor. It allows users to insert, edit, and manage hyperlinks in their text content.

What are @lexical/link's main functionalities?

Insert Link

This feature allows you to insert a hyperlink into the editor. The code sample demonstrates how to create a link node and insert it into the current selection.

import { $createLinkNode } from '@lexical/link';

const linkNode = $createLinkNode('https://example.com');
editor.update(() => {
  const selection = $getSelection();
  if ($isRangeSelection(selection)) {
    selection.insertNodes([linkNode]);
  }
});

Edit Link

This feature allows you to edit an existing hyperlink in the editor. The code sample shows how to update the URL of a link node within the current selection.

import { $getSelection, $isRangeSelection } from 'lexical';
import { $isLinkNode } from '@lexical/link';

editor.update(() => {
  const selection = $getSelection();
  if ($isRangeSelection(selection)) {
    const nodes = selection.getNodes();
    nodes.forEach(node => {
      if ($isLinkNode(node)) {
        node.setURL('https://new-url.com');
      }
    });
  }
});

Remove Link

This feature allows you to remove a hyperlink from the editor. The code sample demonstrates how to replace a link node with its text content, effectively removing the link.

import { $getSelection, $isRangeSelection } from 'lexical';
import { $isLinkNode } from '@lexical/link';

editor.update(() => {
  const selection = $getSelection();
  if ($isRangeSelection(selection)) {
    const nodes = selection.getNodes();
    nodes.forEach(node => {
      if ($isLinkNode(node)) {
        node.replace(node.getTextContent());
      }
    });
  }
});

Other packages similar to @lexical/link

draft-js

Draft.js is a rich text editor framework for React. It provides extensive support for handling links, including inserting, editing, and removing links. Compared to @lexical/link, Draft.js offers a more comprehensive set of features for building rich text editors but may have a steeper learning curve.

slate

Slate is another popular framework for building rich text editors in React. It offers similar functionalities for managing links, such as inserting, editing, and removing links. Slate is highly customizable and flexible, making it a strong alternative to @lexical/link.

quill

Quill is a powerful, open-source WYSIWYG editor that provides built-in support for links. It allows users to easily insert and manage hyperlinks within the editor. Quill is known for its ease of use and extensive documentation, making it a good option for developers looking for a straightforward solution.

README

@lexical/link

This package contains the functionality for Lexical links.

More documentation coming soon.

Changelog

v0.7.0 (2022-12-09)

Lexical 0.7 includes some breaking changes, including:

• Removal of $cloneContents from @lexical/selection
• Changes to PlainTextPlugin and RichTextPlugin with regards to how placeholders are handled
• Pressing tab with the RichTextPlugin no longer indents by default, use the LexicalTabIndentationPlugin for this behavior.
• The unstable helper function unstable_convertLegacyJSONEditorState has been removed. This was always meant to be a temporary work-around to allow developers to convert their formats to the new JSON format rather than using the actual editor state internals directly.

Lexical 0.7 includes performance and usability improvements. Notably, Lexical has a new internal architecture that allows for much better performance with large documents of content. Lexical also now provides a way to handle selection between blocks of content by providing an emulated cursor (make sure you add a blockCursor theme to your editor config to use it).

• Revert "Fix exportJSON return types for ParagraphNode and LineBreakNode" (#3521) John Flockton
• Move default language setting to Tokenizer (#3368) mizuno
• Improve LexicalTreeView around large EditorStates (#3515) Dominic Gannaway
• Improve insertBefore, insertAfter, replace selection restoration logic (#3516) Dominic Gannaway
• ⏸ [0.7] Switch the internal architecture to utilize doubly linked lists (#3480) Dominic Gannaway
• Add missing annotation to internal field of Textnode (#3514) John Flockton
• ⏸ [0.7] Remove indentation keyboard shortcuts in RTE set up (#2855) John Flockton
• Fix dom-less reconciliation (#3506) Maksim Horbachevsky
• ⏸ [0.7] Add block emulated cursors (#3434) Dominic Gannaway
• ⏸ [0.7] Customize Placeholder visibility (#3379) Gerard Rovira
• ⏸ [0.7] Remove IntentionallyMarkedAsDirtyElement from public API (#3422) John Flockton
• ⏸ [0.7] Remove $cloneContents (#3483) Dominic Gannaway
• Update Playwright (#3511) Dominic Gannaway
• Improve Auto Embed (#3505) Tyler Bainbridge
• Skip tab e2e test in webkit (#3512) Dominic Gannaway
• Add poll and speech-to-text plugin examples (#3484) akmarzhan1
• Fix typedef for wrapNodes (#3492) Maksim Horbachevsky