@lexical/html

@lexical/html

HTML

This package exports utility functions for converting Lexical -> HTML and HTML -> Lexical. These same functions are also used in the lexical-clipboard package for copy and paste.

Full documentation can be found here.

Exporting

// When converting to HTML you can pass in a selection object to narrow it
// down to a certain part of the editor's contents.
const htmlString = $generateHtmlFromNodes(editor, selection | null);

Importing

First we need to parse the HTML string into a DOM instance.

// In the browser you can use the native DOMParser API to parse the HTML string.
const parser = new DOMParser();
const dom = parser.parseFromString(htmlString, textHtmlMimeType);

// In a headless environment you can use a package such as JSDom to parse the HTML string.
const dom = new JSDOM(htmlString);

And once you have the DOM instance.

const nodes = $generateNodesFromDOM(editor, dom);

// Once you have the lexical nodes you can initialize an editor instance with the parsed nodes.
const editor = createEditor({ ...config, nodes });

// Or insert them at a selection.
$insertNodes(nodes);

Changelog

0.10.0 (2023-04-18)

Breaking Changes

@lexical/link will now sanitize anchor tag hrefs before rendering them to the DOM. This provides a measure of protection against XSS attacks that rely on inlining javascript in that attribute. However, it means that links using less common protocols will now be sanitized (converted to about:blank), which will be a breaking change for any existing links.

Like most other node-based logic in Lexical, the sanitization logic can be overriden by overriding LinkNode using the Node Overrides API and replacing it with a node that implements the sanitizeUrl method differently.

Fixes CVE-2023-30792

• Table feature: background color (#4345) Gerard Rovira
• Add @react/LexicalClickableLinkPlugin (#4316) Gerard Rovira
• TablePlugin feature: cell merge (#4343) Gerard Rovira
• Ban javascript URLs in @lexical/link (#4342) Acy Watson
• Table Cell Background Color (#4306) Gerard Rovira
• ExportDOM in Debug Tree View (#4307) Ivaylo Pavlov