Bug: Error in Generating DOM-based Lexical Nodes for Specific Case
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.
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.
Thank you for the hint. @etrepum
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
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.