替换现有HTML编辑器为Lexical时插入节点报错求助

问题描述 #

我计划将现有HTML编辑器替换为Lexical，以官网序列化文档中的代码为基础实现HTML转节点功能。目前数据已完成转换并生成节点，但插入节点时出现如下错误：

Error: insertNode: topLevelElement is root node
报错位置：RangeSelection.insertNodes (c:\Projects\ActivateV8\Activate.React.Web\ClientApp\node_modules\lexical\Lexical.dev.js:4002:1)

以下是我的SetDataPlugin代码：

function SetDataPlugin ({model}) {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if(!model) return;
      
    editor.update(() => {
      // In the browser you can use the native DOMParser API to parse the HTML string.
      const parser = new DOMParser();
      const dom = parser.parseFromString(model, "text/html");
      
      // Once you have the DOM instance it's easy to generate LexicalNodes.
      const nodes = $generateNodesFromDOM(editor, dom);
      
      // Select the root
      $getRoot().select();
    
      // Insert them at a selection.
      const selection = $getSelection();
      selection.insertNodes(nodes);
    });
  }, [editor,model]);
}

解决方案 #

报错原因是$generateNodesFromDOM解析HTML后返回的节点集合中包含了Lexical的根节点（对应HTML的<html>或<body>），而Lexical禁止直接将根节点插入到编辑器中。

修改代码如下：

function SetDataPlugin ({model}) {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    if(!model) return;
      
    editor.update(() => {
      const parser = new DOMParser();
      const dom = parser.parseFromString(model, "text/html");
      
      const nodes = $generateNodesFromDOM(editor, dom);
      // 过滤掉根节点和空段落节点
      const validNodes = nodes.filter(node => {
        return !(node instanceof RootNode) && !(node instanceof ParagraphNode && node.getTextContent().trim() === '');
      });

      // 清空编辑器现有内容，再插入有效节点
      const root = $getRoot();
      root.clear();
      root.append(...validNodes);
    });
  }, [editor,model]);
}

核心修改说明 #

• 过滤无效节点：通过filter剔除RootNode，同时移除解析过程中可能生成的空段落节点，避免编辑器出现多余空白。
• 直接操作根节点：使用root.clear()清空原有内容，再用root.append()添加有效节点，替代原有的选择插入方式，操作更直接，避免选择相关的异常。

内容的提问来源于stack exchange，提问作者Shaun Blackmore