SlateJS序列化时如何区分换行产生的空文本节点？

我在使用SlateJS时遇到一个基础问题：我的序列化器和官方示例类似，当在编辑器中输入换行时，会生成一个JSON结构为{text: ''}的新text节点。我该如何判断这个空文本节点是换行产生的？

我尝试过检查node.text === ''，但这并不奏效，因为空文本节点还会出现在其他场景中，比如<a>标签周围。

我的代码 #

serialize函数

const serialize = (node) => {
  const children = node.children?.map((n) => serialize(n)).join('') || '';

  switch (node.type) {
    [... 省略其他标签处理 ...]
    case 'br':
      return '<br>';
    default: {
      if (node?.text === '') {
        return '<br>';
      } else {
        let string = node?.text ? escapeHtml(node.text) : children;
        if (node.bold) {
          string = `<strong>${string}</strong>`;
        }
        if (node.italic) {
          string = `<em>${string}</em>`;
        }

        return string;
      }
    }
  }
};

Slate组件

<Slate
  editor={editor}
  initialValue={initialValue}
  onChange={() => {
    const [node] = Editor.nodes(editor);
    if (!node) {
      return;
    }
    const html = serialize(node[0]);
    [... 处理html的逻辑 ...]
  }}
>

1. 修正编辑器的换行行为，生成正确的br节点 #

Slate默认的Enter行为可能会创建新段落或空text节点，我们需要自定义换行逻辑，让输入换行时直接插入br类型的节点：

// 自定义编辑器插件，修改换行行为
const withSoftBreak = editor => {
  const { insertBreak } = editor;

  editor.insertBreak = () => {
    // 插入br节点，子节点保留空text是Slate的要求
    editor.insertNode({ type: 'br', children: [{ text: '' }] });
  };

  return editor;
};

// 创建编辑器时应用该插件
const editor = withSoftBreak(createEditor());

2. 调整序列化函数，准确识别换行节点 #

移除默认分支中把空text节点当成换行的逻辑，只处理type: 'br'的节点：

const serialize = (node) => {
  const children = node.children?.map((n) => serialize(n)).join('') || '';

  switch (node.type) {
    [... 保留其他标签的处理逻辑 ...]
    case 'br':
      return '<br>';
    default: {
      // 处理text节点：空text直接返回空字符串，避免误判为换行
      if (node.text !== undefined) {
        let string = node.text ? escapeHtml(node.text) : '';
        if (node.bold) {
          string = `<strong>${string}</strong>`;
        }
        if (node.italic) {
          string = `<em>${string}</em>`;
        }
        return string;
      }
      // 非text节点返回子节点的序列化结果
      return children;
    }
  }
};

3. 修正onChange中的序列化范围 #

之前的代码只序列化了单个节点，应该序列化整个编辑器的内容：

<Slate
  editor={editor}
  initialValue={initialValue}
  onChange={() => {
    // 序列化整个编辑器的根节点内容
    const html = serialize({ type: 'root', children: editor.children });
    [... 处理html的逻辑 ...]
  }}
>

原理说明 #

问题的核心是之前的换行生成了错误的节点类型（空text），而非Slate标准的br节点。通过自定义insertBreak方法，让换行动作生成br节点，这样序列化时就能精准识别换行，同时避免把其他场景的空text节点误判为换行。

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