@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.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