slate.js新建段落样式继承问题：如何阻止后续文本块继承前序样式

Slate 默认换行逻辑会继承当前光标所在块的类型与样式，要实现标题等特殊块换行后自动转为普通段落，需要自定义insertBreak行为覆盖默认规则。

实现步骤 #

• 第一步：编写自定义插件重写换行逻辑
  新增withNormalizeBreak高阶函数劫持编辑器原生的insertBreak方法，判断当前所在块的类型，非普通段落换行时主动将新块设置为paragraph类型，示例代码如下：

import { Editor, Transforms, Element as SlateElement } from 'slate'

const withNormalizeBreak = (editor) => {
  const { insertBreak } = editor

  editor.insertBreak = () => {
    // 获取当前光标所在的块级节点
    const [match] = Editor.nodes(editor, {
      match: n => SlateElement.isElement(n) && Editor.isBlock(editor, n)
    })

    if (match) {
      const [node, path] = match
      // 仅当当前块不是普通段落时执行自定义逻辑
      if (node.type !== 'paragraph') {
        // 拆分当前节点生成新块
        Transforms.splitNodes(editor, { always: true })
        // 将新生成的块设置为普通段落
        Transforms.setNodes(
          editor,
          { type: 'paragraph' },
          { match: n => Editor.isBlock(editor, n) }
        )
        return
      }
    }

    // 其余场景走默认换行逻辑
    insertBreak()
  }

  return editor
}

如果需要仅在块末尾换行时才重置为普通段落，块中间换行仍保留当前块样式，可以新增光标位置判断：

// 在判断node.type的逻辑前新增如下代码
const isAtBlockEnd = Editor.isEnd(editor, editor.selection.anchor, path)
// 修改判断条件为
if (node.type !== 'paragraph' && isAtBlockEnd)

• 第二步：注册插件到编辑器实例
  初始化编辑器时应用上述自定义插件即可生效，示例：

import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

const editor = withNormalizeBreak(withReact(createEditor()))

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