Slate.js中粘贴新链接更新旧链接元素的问题求助

我开发了一个withLink()插件，实现用户向编辑器粘贴链接字符串时自动转换为链接。但遇到一个问题：当用户粘贴新链接覆盖旧链接元素时，使用Transform.removeNode和Transform.insertNode替换链接会连带删除之前的段落节点。

解决方案 #

核心问题在于直接删除选中节点的操作会破坏原有文档结构，正确的做法是定位到目标链接节点并更新其属性，而非删除后重新插入。修改后的wrapLink函数如下：

export const wrapLink = (editor: Editor, url: string): void => {
  const { selection } = editor;
  if (!selection) return;

  const isCollapsed = Range.isCollapsed(selection);
  const linkElement: LinkElement = {
    type: CustomElementTypes.link,
    url,
    children: [{ text: url }]
  };

  // 查找选中范围内的链接节点
  const [match] = Array.from(Editor.nodes(editor, {
    at: selection,
    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === CustomElementTypes.link
  }));

  if (isCollapsed) {
    console.log("添加新链接");
    Transforms.insertNodes(editor, linkElement);
  } else if (match) {
    // 找到旧链接，直接更新其URL和显示文本
    console.log("更新现有链接");
    const [_, path] = match;
    Transforms.setNodes(
      editor,
      { url, children: [{ text: url }] },
      { at: path }
    );
    Transforms.collapse(editor, { edge: "end" });
  } else {
    // 选中普通文本，包裹为新链接
    console.log("将选中文本转为链接");
    Transforms.wrapNodes(editor, linkElement, { split: true });
    Transforms.collapse(editor, { edge: "end" });
  }
};

关键改动说明 #

1. 精准定位链接节点：通过Editor.nodes方法筛选选中范围内的链接节点，避免误删父段落等无关节点。
2. 直接更新节点属性：使用Transforms.setNodes修改链接的url和显示文本，保留原有文档层级结构，不会破坏段落节点。
3. 多场景分支处理：覆盖三种核心操作场景：
   • 折叠选区：直接插入新链接
   • 选中旧链接：更新现有链接属性
   • 选中普通文本：将文本包裹为链接

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