Skip to content

Bug: List/ListItem Nodes From DOM results in invalid editor state  #3975

@brianbolnick

Description

@brianbolnick

I'm working on parsing HTML (from a headless editor) and converting it as the initial state for an editor. I'm getting what looks like a valid json obj back, but providing that value to the editor is giving me a Cannot call set() on a frozen Lexical node map error, thrown by the ListItemNode. I'm comparing what result I get from this process to the value I get from pasting the same html into an editor, and they look real similar, with small exceptions being the format and direction keys of some of the values.

Any ideas here? Maybe a bug with the headless editor? This only happens with the list/listitem nodes. Everything else seems to parse pretty smoothly.

Here's the full stack trace:

Lexical.dev.js:5445 Uncaught Error: Cannot call set() on a frozen Lexical node map
    at nodeMap.set (Lexical.dev.js:5445:1)
    at ListItemNode.getWritable (Lexical.dev.js:6257:1)
    at ListItemNode.setValue (LexicalList.dev.js:657:1)
    at updateChildrenListItemValue (LexicalList.dev.js:279:1)
    at ListItemNode.createDOM (LexicalList.dev.js:473:1)
    at createNode (Lexical.dev.js:1690:1)
    at createChildren (Lexical.dev.js:1772:1)
    at createChildrenWithDirection (Lexical.dev.js:1763:1)
    at createNode (Lexical.dev.js:1710:1)
    at createChildren (Lexical.dev.js:1772:1)

Lexical version: 0.8.1

Steps To Reproduce

  1. See example code below

Link to code example:
Here's a brief example of the process for debug purposes:

  const editor = createHeadlessEditor({
    nodes: [
      AutoLinkNode,
      HeadingNode,
      LinkNode,
      ListNode,
      ListItemNode
    ],
  });

  editor.update(() => {
    const dom = new JSDOM(htmlString);

    const nodes = $generateNodesFromDOM(editor, dom.window.document);
    const root = $getRoot();

    nodes.forEach((node) => {
      root.append(node);
    });
  });

  editor.registerUpdateListener(({ editorState }) => {
    editorState.read(() => {
      const lexicalStructure = JSON.stringify(editorState);
      // save to a db for later use
    });
  });

The current behavior

Returns a stringified state object that looks correct, but breaks when passed to an editor as initial state.

The expected behavior

It works :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions