Tiptap更新图片属性致节点取消选中问题求助

问题原因 #

你将图片配置为inline节点后，执行updateAttributes时，ProseMirror内部处理节点属性更新后不会自动保留原有节点选择状态——inline节点的选区逻辑和block节点不同，属性变更会触发选区重置，导致气泡菜单消失、ProseMirror-selectednode类被移除。

正确解决方案 #

方案1：优化临时修复（简单直接）

你的思路可行，但需要更严谨地获取节点位置，避免非图片选区的误操作：

const currentSelection = editor.view.state.selection;
// 先确认当前选中的是图片节点
if (currentSelection.node?.type.name === 'image') {
  editor.chain()
    .focus()
    .updateAttributes('image', { title: 'Hello' })
    // 用node selection的起始位置重新选中节点，比anchor更可靠
    .setNodeSelection(currentSelection.from)
    .run();
}

方案2：自定义图片扩展，封装带选中保留的更新命令

如果需要频繁更新图片属性，建议封装自定义命令避免重复写选中逻辑：

import Image from '@tiptap/extension-image';

// 扩展原生Image，添加带选区保留的属性更新命令
const CustomImage = Image.extend({
  addCommands() {
    return {
      ...this.parent(),
      // 自定义命令名：updateImageAttributes
      updateImageAttributes: (attributes) => ({ tr, commands }) => {
        const { selection } = tr;
        // 仅处理图片节点的选中情况
        if (!selection.node || selection.node.type.name !== this.name) {
          return false;
        }
        // 执行属性更新
        const updateSuccess = commands.updateAttributes(this.name, attributes);
        // 更新成功后重新设置节点选择
        if (updateSuccess) {
          tr.setSelection(tr.doc.resolve(selection.from).nodeSelection());
        }
        return updateSuccess;
      },
    };
  },
});

使用时直接调用自定义命令：

editor.chain().focus().updateImageAttributes({ title: 'Hello' }).run();

方案3：利用编辑器onUpdate钩子自动恢复选中

不想修改命令的话，也可以在编辑器实例的onUpdate钩子中处理：

const editor = new Editor({
  // ...其他配置
  extensions: [
    // ...其他扩展
    Image.configure({ inline: true }),
  ],
  onUpdate: ({ editor }) => {
    const lastTransaction = editor.state.lastTransaction;
    // 判断是否为图片属性更新操作
    if (lastTransaction?.meta?.isImageAttrUpdate) {
      const selection = lastTransaction.before.selection;
      if (selection.node?.type.name === 'image') {
        editor.view.dispatch(editor.view.state.tr.setSelection(
          editor.view.state.doc.resolve(selection.from).nodeSelection()
        ));
      }
    }
  },
});

// 调用updateAttributes时添加标记meta
editor.chain()
  .focus()
  .updateAttributes('image', { title: 'Hello' }, { isImageAttrUpdate: true })
  .run();

对你临时方案的说明 #

你原来的代码思路没问题，但直接用selection.anchor不够严谨——如果当前选区不是精确的节点选择（比如选区包含图片和部分文本），anchor可能指向错误位置。改用selection.from（节点选择时from和to为同一值）能确保选中正确的图片节点。

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