Lexical Editor：如何替换选中文本行并排除指定内容

我想用多行文本替换Lexical Editor里选中的内容，但没找到明确的实现方案。当前代码如下：

editor.update(() => {
    const paragraphNode = $createParagraphNode();
    const newNode = $createTextNode(popoverContent);
    paragraphNode.append(newNode);

    // How can I replace the selected nodes/text with paragraphNode? */
});

编辑器当前内容：

ab
cde
fghi
jklmn

其中第一行的"a"未被选中，替换时需要保留这个未选中的"a"。

实现方案 #

Lexical内置的选区操作API可以精准处理选中内容替换，同时自动保留未选中部分，以下是具体实现：

完整代码示例 #

editor.update(() => {
  // 获取当前编辑器选区
  const selection = $getSelection();
  
  // 只处理文本类选区（RangeSelection）
  if (selection instanceof RangeSelection) {
    // 创建承载多行文本的段落节点
    const paragraphNode = $createParagraphNode();
    // 直接传入多行文本，Lexical会自动保留换行格式
    const newTextNode = $createTextNode(popoverContent);
    paragraphNode.append(newTextNode);

    // 核心操作：替换选中内容，自动保留未选中的"a"及其他内容
    $replaceSelection(paragraphNode);
  }
});

关键说明 #

• $getSelection()：获取当前选区对象，先判断是否为文本选区（RangeSelection），避免处理其他类型选区
• $replaceSelection(node)：Lexical的核心替换API，会自动识别选区的起始和结束范围，只替换选中部分，完全不会影响未选中的内容（比如第一行的"a"）
• 如果popoverContent是带换行的多行文本，$createTextNode会完整保留换行符，Lexical渲染时会自动解析为换行显示；若需要拆分多个段落，可以将文本按换行分割后创建多个ParagraphNode再批量添加

可选：替换后定位光标 #

如果需要替换完成后将光标定位到新内容末尾，可以在替换后添加以下代码：

// 创建新选区，定位到新段落的文本末尾
const newRange = $createRangeSelection();
const lastChild = paragraphNode.getLatest();
newRange.select(paragraphNode, 0, paragraphNode, 0, lastChild.getLength());
$setSelection(newRange);

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