Slate.js(React)中选中内容无法作为单个子元素传入组件问题

核心问题分析 #

你遇到的问题是因为Slate默认会对选中范围内的每个匹配节点单独执行包裹操作，而编号列表的每个<li>都是独立节点，所以每个列表项都会被单独包裹进Summary组件。要解决这个问题，需要先定位到选中列表项的共同父级列表节点（<ol>/<ul>），然后对整个列表节点进行包裹，而不是处理单个列表项。

具体解决方案 #

1. 调整工具栏按钮的处理逻辑 #

在自定义按钮的点击事件中，先遍历选中的列表项，找到它们所属的同一个父级列表节点，再对整个列表执行包裹操作：

import { Editor, Node } from 'slate';
import { useSlate } from 'slate-react';

const WrapSummaryButton = () => {
  const { editor } = useSlate();

  const handleClick = () => {
    const { selection } = editor;
    if (!selection) return;

    // 存储选中列表项的共同父级列表节点
    let targetList = null;

    // 遍历选中的所有列表项节点
    for (const [node, path] of Editor.nodes(editor, {
      at: selection,
      match: n => n.type === 'list-item', // 匹配你的列表项节点type
    })) {
      // 获取当前列表项的父级列表节点
      const [parentNode, parentPath] = Editor.parent(editor, path);
      if (parentNode.type === 'numbered-list' || parentNode.type === 'bulleted-list') {
        if (!targetList) {
          targetList = { node: parentNode, path: parentPath };
        } else if (targetList.path.toString() !== parentPath.toString()) {
          // 选中了多个不同列表，提示用户
          alert('请选中同一个列表的内容进行操作');
          return;
        }
      }
    }

    if (targetList) {
      // 包裹整个列表节点
      Editor.wrapNodes(
        editor,
        { type: 'summary', children: [] }, // Summary对应的Slate节点类型
        { at: targetList.path }
      );
    } else {
      // 如果选中的不是列表项，直接包裹选中内容（可选逻辑）
      Editor.wrapNodes(
        editor,
        { type: 'summary', children: [] },
        { at: selection }
      );
    }
  };

  return <button onClick={handleClick}>包裹为摘要</button>;
};

2. 配置Slate节点规则，确保Summary可以包含列表 #

在你的Slate插件（withXXX）中，添加节点合法性校验，允许Summary节点作为列表的父节点：

const withSummaryValidation = editor => {
  const { normalizeNode } = editor;

  editor.normalizeNode = entry => {
    const [node, path] = entry;

    // 确保Summary节点可以包含列表节点
    if (node.type === 'summary') {
      for (const [child, childPath] of Node.children(editor, path)) {
        const allowedTypes = ['numbered-list', 'bulleted-list', 'paragraph']; // 按需添加允许的子节点类型
        if (!allowedTypes.includes(child.type)) {
          // 如果子节点不合法，这里可以根据需求修正，比如移动到Summary外部
          Editor.moveNodes(editor, {
            at: childPath,
            to: [path[0] + 1],
          });
        }
      }
    }

    // 执行原有校验逻辑
    normalizeNode(entry);
  };

  return editor;
};

3. 正确渲染Summary组件 #

在你的渲染器（renderElement）中，确保Summary组件正确渲染其子节点：

const renderElement = ({ attributes, children, element }) => {
  switch (element.type) {
    case 'summary':
      return (
        <div {...attributes} className="summary-container">
          {/* 直接渲染子节点，也就是整个列表 */}
          {children}
        </div>
      );
    // 其他节点渲染逻辑...
    default:
      return <p {...attributes}>{children}</p>;
  }
};

关键注意点 #

• 务必确保你的列表结构是父级列表节点（如numbered-list）包含多个列表项节点（list-item），这是Slate处理列表的标准结构。
• 如果用户只选中了列表的部分项，上述逻辑仍然会包裹整个列表，如果你需要仅包裹选中的部分项，可以调整逻辑，先将选中的列表项合并为一个新的子列表，再包裹这个新列表。

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