如何检测CodeMirror中退格删除Firepad annotation实体获取其ID

核心解决思路 #

你在Firepad里注册的annotation实体是文档模型层的不可拆分原子块，自带完整的生命周期钩子，根本不需要额外去监听原生的退格键盘事件，直接用实体内置的删除触发逻辑就能覆盖所有删除场景。

• 首先补全实体注册配置里的destroy生命周期方法。这个方法会在实体即将从文档中被移除的时候触发，不管触发删除的操作是本地按退格删整段标注、框选内容批量删除、其他协作用户远程删除标注，还是文档版本回退把实体移除，方法触发时都会带回当前被删实体的完整元数据——也就是你之前存的id、颜色、光标样式、展示文本这些所有属性，你可以直接在这里拿到对应实体的ID，执行关联数据的AJAX清理操作。
  需要修改的注册代码片段：

firepad.registerEntity('annotation', {
  // 原有已经写好的render、fromElement、update方法逻辑全部保留即可
  // 新增删除触发钩子
  destroy: function (info, entityHandler) {
    // 直接读取被删除实体的唯一ID
    const removedAnnotationId = info.id;
    // 在这里写需要的AJAX调用逻辑就行
    // 如果想避免频繁发请求导致性能问题，可以把ID存在临时队列里，做防抖后批量提交
  },
  // 修正原有export方法的缺失逻辑
  export: function (info) {
    const inputElement = document.createElement('a');
    if (info.id) inputElement.setAttribute('id', info.id);
    if (info.classList) inputElement.setAttribute('class', info.classList);
    if (info.color || info.cursor) {
      inputElement.style.cssText = `color:${info.color};cursor:${info.cursor}`;
    }
    inputElement.innerText = info.innerText;
    return inputElement;
  }
});

• 不建议直接全局监听退格键事件：这类监听只能捕捉本地用户的键盘操作，完全覆盖不到协同场景下其他用户远程删内容、一键清空文档、版本回退这些会移除实体的操作，很容易出现关联标注数据和文档内容不匹配的残留问题。而实体的destroy钩子是直接嵌入在OT文档的变更流程里的，不管通过什么路径把实体删掉，钩子都会触发，可靠性高很多。
• 边界场景处理：如果单次删除操作里包含好几个annotation实体，每个实体对应的destroy钩子都会单独触发，不需要你额外写批量识别的逻辑，每个被删掉的实体都会独立把自己的ID传出来。

现有代码的待修正问题 #

你现在写的实体注册逻辑里，export方法没有接收info参数，创建完一个空的<a>标签就直接返回，会导致文档序列化、本地缓存写入、协同数据同步的过程中，实体的ID、样式这些属性全部丢失，时间长了会出现标注样式乱掉、ID对不上关联数据的问题，按照上面的代码补上属性挂载逻辑就行。

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