如何在更新Tiptap2节点属性时避免编辑器夺取焦点

核心原因 #

Tiptap/ProseMirror默认会在执行节点属性更新这类transaction后，自动聚焦编辑器内容区域，导致外部属性面板的输入框失去焦点。

解决方案 #

方案1：通过Transaction Meta阻止编辑器自动聚焦

ProseMirror支持通过设置transaction的focus meta为false，跳过执行后的自动聚焦逻辑。修改你的自定义updateAttribute命令，替换原有的自定义meta，改用官方支持的focus meta：

updateAttribute:
    (attributeName, attributeValue) =>
         ({ tr, state, dispatch }) => {
            const { selection } = state;
            const { from, to } = selection;

            tr.doc.nodesBetween(from, to, (node, pos) => {
                if (node.type.name === "section") {
                   const updatedAttrs = { ...node.attrs, [attributeName]: attributeValue };
                   tr.setMeta('focus', false); // 关键：阻止编辑器自动获取焦点
                   tr.setNodeMarkup(pos, null, updatedAttrs);
               }
           });

           if (dispatch) {
               dispatch(tr);
           }

           return true; // 命令执行成功需返回true
},

如果使用Tiptap官方的updateAttributes方法，可通过手动创建transaction并设置meta的方式实现：

const updateSectionAttribute = (attributeName, value) => {
  const { state, view } = editor;
  const tr = state.tr;
  
  tr.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => {
    if (node.type.name === 'section') {
      tr.setNodeMarkup(pos, null, { ...node.attrs, [attributeName]: value });
    }
  });
  
  tr.setMeta('focus', false);
  view.dispatch(tr);
};

这个方案是最推荐的，从根源上阻止编辑器触发聚焦逻辑，无焦点闪烁问题。

方案2：手动保存并恢复焦点

如果方案1因Tiptap版本或自定义逻辑不生效，可在更新属性前后手动管理焦点：

在React组件的输入框change事件处理函数中，先记录当前焦点元素，执行更新后再恢复焦点：

const handleAttrChange = (attributeName, value) => {
  // 记录当前获取焦点的元素
  const activeElement = document.activeElement;
  
  // 执行节点属性更新
  editor.commands.updateAttribute(attributeName, value);
  
  // 恢复焦点到原输入框
  if (activeElement instanceof HTMLElement) {
    activeElement.focus();
  }
};

这个方法可能会有短暂的焦点闪烁，但兼容性更好，适合所有场景。

废弃原插件方案

你之前尝试的appendTransaction插件是用来维护编辑器内部的选区，而当前问题焦点在编辑器外部，所以这个插件无法解决问题，可以移除。

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