JSPM

@lexical/html

0.3.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 940009
  • Score
    100M100P100Q184868F
  • License MIT

This package contains HTML helpers and functionality for Lexical.

Package Exports

  • @lexical/html
  • @lexical/html/LexicalHtml.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lexical/html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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);