如何在Slate.js编辑器中阻止删除指定区块或给出删除提示

方案1：直接阻止用户删除特定区块 #

核心思路是给需要保护的节点自定义标记属性，再通过Slate的编辑器事件拦截删除操作，步骤如下：

• 给受保护的区块节点增加自定义属性，比如isProtected: true用于后续识别
• 重写编辑器的删除相关方法，拦截退格、向前删除、整块选中删除三类操作
• 当删除范围覆盖到带isProtected标记的节点时，直接终止删除逻辑，可同步弹出提示告知用户该区块不可删除
  实现示例代码：

import { Editor, Transforms, Range } from 'slate'

const withProtectedBlocks = (editor) => {
  const { deleteBackward, deleteForward, onKeyDown } = editor

  // 拦截退格删除
  editor.deleteBackward = (unit) => {
    const { selection } = editor
    if (selection && Range.isCollapsed(selection)) {
      const [match] = Editor.nodes(editor, {
        match: n => n.isProtected === true,
        at: selection
      })
      // 匹配到受保护区块，直接终止删除
      if (match) return 
    }
    deleteBackward(unit)
  }

  // 拦截向前删除
  editor.deleteForward = (unit) => {
    const { selection } = editor
    if (selection && Range.isCollapsed(selection)) {
      const [match] = Editor.nodes(editor, {
        match: n => n.isProtected === true,
        at: selection
      })
      if (match) return
    }
    deleteForward(unit)
  }

  // 拦截整块选中后删除的场景
  editor.onKeyDown = (event) => {
    if (event.key === 'Delete' || event.key === 'Backspace') {
      const { selection } = editor
      if (selection && !Range.isCollapsed(selection)) {
        const [match] = Editor.nodes(editor, {
          match: n => n.isProtected === true,
          at: selection
        })
        if (match) {
          event.preventDefault()
          alert('该区块为受保护内容，无法删除')
          return
        }
      }
    }
    onKeyDown?.(event)
  }
  return editor
}

// 编辑器初始化时挂载插件即可
const editor = withProtectedBlocks(createEditor())

方案2：删除前提示用户确认 #

如果不需要完全禁止删除，只需要做风险提示，只需要调整拦截逻辑即可：

• 匹配到受保护区块后，先阻止默认删除行为
• 弹出确认弹窗告知用户操作风险，用户确认后再执行删除
  实现示例代码（以退格删除逻辑为例）：

editor.deleteBackward = (unit) => {
  const { selection } = editor
  if (selection && Range.isCollapsed(selection)) {
    const [match] = Editor.nodes(editor, {
      match: n => n.isProtected === true,
      at: selection
    })
    if (match) {
      const isAllowDelete = confirm('当前区块为受保护内容，确定要删除吗？')
      if (!isAllowDelete) return
      // 确认删除后先移除保护标记，再执行删除
      Transforms.setNodes(editor, { isProtected: false }, { at: match[1] })
    }
  }
  deleteBackward(unit)
}

注意：如果你的编辑器支持右键菜单删除、剪切等其他删除操作，需要在对应事件回调里加上相同的保护判断，避免绕过键盘事件拦截。

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