lexical icon indicating copy to clipboard operation
lexical copied to clipboard

Bug: Error in Generating DOM-based Lexical Nodes for Specific Case

Open dineug2 opened this issue 10 months ago • 4 comments

Error in Generating DOM-based Lexical Nodes for Specific Case

Lexical version: 0.24.0

Steps To Reproduce

const dom = parser.parseFromString(
  /* html */ `
  <blockquote>
    <ul><li>test1</li></ul>
    <blockquote><pre><code>test2</code></pre></blockquote>
  </blockquote>`,
  'text/html',
);
const nodes = $generateNodesFromDOM(editor, dom);

The Current Behavior

  • An error occurs: Expected node 19 to have a parent.

The Expected Behavior

  • Lexical nodes should be generated correctly.

Impact of Fix

  • The generation of Lexical nodes related to blockquote will be improved.

dineug2 avatar Mar 06 '25 06:03 dineug2

This isn't enough information to reproduce the problem you're experiencing, this issue doesn't occur in the playground when pasting this sort of structure so maybe you just haven't configured your editor appropriately.

etrepum avatar Mar 06 '25 07:03 etrepum

Thank you for the hint. @etrepum

dineug2 avatar Mar 06 '25 09:03 dineug2

I found the cause of the issue.
It occurs when the DecoratorNode is not a child of the rootNode during importDOM and has child nodes.
<blockquote><pre><code>test2</code></pre></blockquote> or <ul><li><pre><code>test2</code></pre></li></ul>

It does not occur if forChild is set to null.
{ node: '...', forChild: () => null }
I'm curious if this is the intended behavior. @etrepum

class CodeMirrorNode extends DecoratorNode<JSX.Element> {
  ...
  
  static importDOM(): DOMConversionMap | null {
    return {
      pre: () => ({
        conversion: $convertPreElement,
        priority: 0,
      }),
    };
  }
}

function $convertPreElement(domNode: HTMLElement): DOMConversionOutput {
  const language = domNode.getAttribute('...');
  const value = domNode.textContent || '';
  return { node: $createCodeMirrorNode(value, language) };
}

The reproduction code is here. https://codesandbox.io/p/devbox/youthful-keldysh-kr252t?from-embed=&workspaceId=ws_RK7K4cthbSg12MdfRLRrkM

dineug2 avatar Mar 07 '25 07:03 dineug2

I think this is intended behavior, decorator nodes can’t have children, although the error message could be better and perhaps the documentation could describe a workaround.

etrepum avatar Mar 07 '25 14:03 etrepum