@lexical/headless

@lexical/headless

This package allows you to use interact with Lexical in a headless environment (one that does not rely on DOM, e.g. for Node.js environment), and use its main features like editor.update(), editor.registerNodeTransform(), editor.registerUpdateListener() to create, update or traverse state.

Install @lexical/headless:

npm install --save @lexical/headless

const { createHeadlessEditor } = require('@lexical/headless');

const editor = createHeadlessEditor({
  nodes: [],
  onError: () => {},
});

editor.update(() => {
  $getRoot().append(
    $createParagraphNode().append(
      $createTextNode('Hello world')
    )
  )
});

Any plugins that do not rely on DOM could also be used. Here's an example of how you can convert lexical editor state to markdown on server:

const { createHeadlessEditor } = require('@lexical/headless');
const { $convertToMarkdownString, TRANSFORMERS } = require('@lexical/markdown');

app.get('article/:id/markdown', await (req, res) => {
  const editor = createHeadlessEditor({
    nodes: [],
    onError: () => {},
  });

  const articleEditorStateJSON = await loadArticleBody(req.query.id);
  editor.setEditorState(editor.parseEditorState(articleEditorStateJSON));  

  editor.update(() => {
    const markdown = $convertToMarkdownString(TRANSFORMERS);
    res.send(markdown);
  });
});

Changelog

v0.8.0 (2023-02-09)

This release includes some breaking changes, including: - Remove of indentList and outdentList from @lexical/list. - Refactor of the LexicalContentEditable types from @lexical/react to make them more accurate with HTMLDivElement attributes.

This release adds functionality to apply node transforms to node replacements, it allows users to specify tab indentation sizes, and improved support for tracking the origin of YJS updates for collaborative editing.

• Ensure deletions capture existing formatting (#3867) Dominic Gannaway
• Add style properties to RangeSelection (#3863) Dominic Gannaway
• List indentation simplified (#3809) EgonBolton
• Update ContentEditable types (#3580) John Flockton
• Allow the format property to be omitted (#3812) Karibash
• Allow users to customise the indentation of tabs (#3802) John Flockton
• Apply node transform not only to the original node but also to the overriding node (#3639) mizuno
• feat: set the update tag from yjs based on the origin (#3608) El-Hussein Abdelraouf