Lexical编辑器：如何在粘贴时拦截并转换待插入节点？

方式一：通过注册命令拦截（推荐） #

原函数里首先尝试分发SELECTION_INSERT_CLIPBOARD_NODES_COMMAND命令，只要这个命令的处理器返回true，就会跳过后续的selection.insertNodes(nodes)。我们可以利用这个机制，在插件中注册该命令，在处理器里完成节点内容的修改，再自行插入或者让命令流程处理。

具体实现步骤： #

1. 在你的CopyPasteEnhancementPlugin中注册命令：

import { SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, COMMAND_PRIORITY_EDITOR } from 'lexical';

// 插件初始化时注册命令
editor.registerCommand(
  SELECTION_INSERT_CLIPBOARD_NODES_COMMAND,
  (payload) => {
    const { nodes, selection } = payload;
    // 对节点进行递归处理
    const processedNodes = processPastedNodes(nodes);
    // 插入处理后的节点
    selection.insertNodes(processedNodes);
    // 返回true，终止原函数的后续逻辑
    return true;
  },
  COMMAND_PRIORITY_EDITOR // 设置优先级确保你的处理器先触发
);

2. 实现节点处理函数processPastedNodes，递归遍历所有文本节点完成替换：

import { TextNode, LexicalNode } from 'lexical';

function processPastedNodes(nodes: LexicalNode[]): LexicalNode[] {
  return nodes.map(node => {
    // 处理文本节点
    if (node instanceof TextNode) {
      let textContent = node.getTextContent();
      // 替换 （对应Unicode的\u00A0）为普通空格
      textContent = textContent.replace(/\u00A0/g, ' ');
      // 替换特定单词，比如把"foo"换成"bar"
      textContent = textContent.replace(/foo/g, 'bar');
      // 创建新的文本节点替换原节点
      return node.__clone(textContent);
    }
    // 处理包含子节点的元素（比如段落、列表项等）
    if (node.getChildrenSize() > 0) {
      const processedChildren = processPastedNodes(node.getChildren());
      // 克隆节点并替换子节点
      const clonedNode = node.__clone();
      clonedNode.replaceChildren(...processedChildren);
      return clonedNode;
    }
    // 其他类型节点直接返回原节点
    return node;
  });
}

方式二：直接修改$insertGeneratedNodes函数 #

如果不想通过命令拦截，也可以直接在原函数的插入逻辑前添加节点处理步骤：

export function $insertGeneratedNodes(
  editor: LexicalEditor,
  nodes: Array<LexicalNode>,
  selection: BaseSelection,
): void {
  // 先处理节点
  const processedNodes = processPastedNodes(nodes);
  
  if (
    !editor.dispatchCommand(SELECTION_INSERT_CLIPBOARD_NODES_COMMAND, {
      nodes: processedNodes, // 传入处理后的节点
      selection,
    })
  ) {
    selection.insertNodes(processedNodes); // 插入处理后的节点
  }
  return;
}

关键细节说明： #

• Lexical中的 在文本节点里是以Unicode字符\u00A0存储的，替换时要针对这个字符，而非字符串" "。
• 必须递归遍历节点，因为粘贴内容可能包含多层嵌套结构（比如段落里的文本、列表项里的文本等），只处理顶层节点会漏掉子节点内容。
• 优先选择命令拦截的方式，因为Lexical的命令系统支持多插件协作，不会破坏原有代码的扩展性，直接修改函数则耦合度更高。

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