如何在Slate.js中实现链接的部分解除包裹？

你遇到的核心问题是：选中链接内的部分文本点击取消链接时，整个链接被解除包裹，而非仅选中部分。是否需要配合Transform.wrapNodes？答案是需要，但更关键的是先修正选区判断和节点拆分逻辑。

问题根源 #

1. 你的isElementActive(editor)可能未正确判断「选区处于链接元素内」，而是判断「选中了链接元素本身」，导致部分选文本时按钮可能未激活
2. 仅用Transforms.unwrapNodes加split: true无法保留未选中部分的链接状态，需要拆分后重新包裹未选中的链接片段

修正方案 #

先确保isElementActive能正确判断选区是否在链接内：

// 辅助函数：判断当前选区是否处于指定类型的元素内
const isElementActive = (editor: Editor, type: string) => {
  const [match] = Editor.nodes(editor, {
    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === type,
  });
  return !!match;
};

然后修改取消链接按钮的逻辑，拆分节点并重新保留未选中部分的链接：

export const UnLinkButton = () => {
  const editor = useSlate();
  const isActive = isElementActive(editor, "link"); // 明确判断是否在link元素内

  const handleUnlink = () => {
    if (!isActive) return;
    const { selection } = editor;
    if (!selection || !Range.isExpanded(selection)) return;

    // 1. 获取原链接的属性（比如url）
    const [originalLink] = Editor.nodes(editor, {
      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "link",
    });
    if (!originalLink) return;
    const linkProps = { type: "link", url: (originalLink[0] as any).url, children: [] };

    // 2. 在选区边界拆分链接节点，将选中部分与前后分离
    Transforms.splitNodes(editor, { at: selection.anchor });
    Transforms.splitNodes(editor, { at: selection.focus });

    // 3. 解除选中部分的链接包裹
    Transforms.unwrapNodes(editor, {
      at: selection,
      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "link",
    });

    // 4. 重新包裹前后未选中的片段为链接
    // 处理选区前的片段
    const prevPath = Path.previous(selection.anchor.path);
    if (Path.isValid(prevPath)) {
      const [prevNode] = Editor.nodes(editor, { at: prevPath });
      if (prevNode && Text.isText(prevNode[0])) {
        Transforms.wrapNodes(editor, linkProps, { at: prevPath.slice(0, -1) });
      }
    }

    // 处理选区后的片段
    const nextPath = Path.next(selection.focus.path);
    if (Path.isValid(nextPath)) {
      const [nextNode] = Editor.nodes(editor, { at: nextPath });
      if (nextNode && Text.isText(nextNode[0])) {
        Transforms.wrapNodes(editor, linkProps, { at: nextPath.slice(0, -1) });
      }
    }
  };

  return (
    <button
      color={isActive ? "red" : undefined}
      onClick={handleUnlink}
    >
      unlink
    </button>
  );
};

关键说明 #

• 拆分节点时要在选区的首尾都执行拆分，确保选中部分成为独立的文本节点
• 必须复用原链接的url属性，保证重新包裹的链接和原链接一致
• 辅助函数isElementActive要准确判断选区是否处于链接元素内，而非仅选中元素本身

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