使用SlateJS包裹节点时如何忽略空行？

要实现选中多行时只给非空行添加行内格式、跳过空行的需求，你可以通过以下两种方式修改代码：

方法一：精准匹配非空文本节点（推荐） #

直接在wrapNodes中设置匹配条件，只针对非空文本节点进行包裹，同时指定mode: 'lowest'确保只操作最底层的文本节点，不会破坏空行的块结构：

toggleInline: function (editor, format) {
  const isActive = this.isFormatActive(editor, format, TYPES.FORMATS.INLINE);

  if (isActive) {
    Transforms.unwrapNodes(editor, {
      match: node => !this.isEditor(node) && Element.isElement(node) && node.type === format
    });

  } else {
    const inline = { type: format, children: noChildren };
    Transforms.wrapNodes(editor, inline, {
      // 只匹配非空且非纯空格的文本节点
      match: node => Text.isText(node) && node.text.trim() !== '',
      split: true,
      // 仅操作最底层的文本节点，避免影响上层块元素
      mode: 'lowest'
    });
  }
}

方法二：手动筛选目标节点后逐个包裹 #

如果需要更精细的控制，可以先遍历选中范围内的节点，筛选出非空文本节点的路径，再逐个执行包裹操作：

toggleInline: function (editor, format) {
  const isActive = this.isFormatActive(editor, format, TYPES.FORMATS.INLINE);

  if (isActive) {
    Transforms.unwrapNodes(editor, {
      match: node => !this.isEditor(node) && Element.isElement(node) && node.type === format
    });

  } else {
    const inline = { type: format, children: noChildren };
    // 遍历选中范围，获取所有非空文本节点的路径
    const targetPaths = Array.from(Editor.nodes(editor, {
      at: editor.selection,
      match: node => Text.isText(node) && node.text.trim() !== ''
    })).map(([_, path]) => path);

    // 对每个目标路径单独执行包裹
    targetPaths.forEach(path => {
      Transforms.wrapNodes(editor, inline, { at: path });
    });
  }
}

关键说明 #

• 两种方法都通过node.text.trim() !== ''判断文本是否有效，既排除了空文本，也排除了纯空格的文本（如果需要保留纯空格的文本，改成node.text !== ''即可）。
• 方法一利用Slate内置的wrapNodes参数直接过滤，代码更简洁；方法二手动筛选路径，灵活性更高，适合复杂场景。

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