@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.
const selection = $getSelection();
selection.insertNodes(nodes);

Changelog

0.3.4 (June 16, 2022)

• Customizable DecoratorBlockNode via theme (#2387)
• initializeEditorState on LexicalComposer (#2425)
• Revert "Prevent dispatching redundant can undo/redo commands (#2394)" (#2440)
• Improve Spread type (#2434)
• Improve text mutations around selection format changes (#2433)
• Remove redundant newlines (#2431)
• fix: add styles on copy (#2427)
• Fix exposed private methods (#2429)
• Fix backspace bug with non-RangeSelection (#2416)
• Fix Android backspace bug (#2412)
• Fix orphan list item clipboard bug (#2407)
• Remove default json and node-type from DOM output. (#2404)
• Simplify clickable links checks (#2395)
• Prevent dispatching redundant can undo/redo commands (#2394)
• Editor instance toJSON should call toJSON method on editor state (#2390)