updateAttrs on EditorMenus ?

In #622 there was getNodeAttr added. But to update a node, such as setting the alt of an image, we need updateAttrs? I assumed I could do something like this, but that fails:

  <editor-menu-bubble
      v-slot="{ commands, isActive, getNodeAttrs, updateAttrs, getMarkAttrs, menu }"
      :editor="editor"
      keep-in-bounds
    >
      <div>
 
      </div>
    </editor-menu-bubble>

<script>
[...]
  imageAlt: {
      get () {
        return this.getNodeAttrs('image').alt // .alt , .src  or .title
      },
      set (value) {
        const alt = value
        this.updateAttrs({ alt )
        console.log('alt was set to',  this.getNodeAttrs('image').alt)
      }
    },
[...]
</script>

[gambolputty]

You could create a command that updates the node:

  commands ({ type, schema }) {
    return {
      updateNode: attrs => {
        return (state, dispatch) => {
          const { node, from } = state.selection // must be a node selection, so make sure "node" is present 

          const tr = state.tr
          tr.setNodeMarkup(from, null, Object.assign({}, node.attrs, attrs))
          dispatch(tr)

          return true
        }
      }
    }
  }

Then in my Vue component I call this:

methods: {
    updateNode (value) {
      const command = this.editor.commands.updateNode
      command({ myAttr: value })
    }
  }

Hope that helps!

[hanspagel]

Thanks @gambolputty for sharing! We’ve also added something like that to the upcoming tiptap v2. 👀

Closing this here for now. ✌️