Tiptap: updateAttrs on EditorMenus ?

Created on 21 Apr 2020 · 5Comments · Source: ueberdosis/tiptap

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>

feature request

Source

tvld

Most helpful comment

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!

gambolputty on 23 Apr 2020

👍2

All 5 comments

@philippkuehn As you submitted this in https://github.com/scrumpy/tiptap/commit/0ca798fe23cf2148a5e590c35cf96f63fd6b6176 : could you acknowledge that the suggestion to use updateAttrs or maybe updateNodeAttrs makes sense?

I am new here and not certain that this is best way...

tvld on 22 Apr 2020

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!

gambolputty on 23 Apr 2020

👍2

@gambolputty super, thank you. It works. :-) )))))))0

Although it does require to make a new custom node and the generic approach of this package is not maintained. But maybe for the better. I will leave this open until decided if we need updateNodeAttrs as slot parameter in the menu system?

tvld on 23 Apr 2020

👍1

👍 updateNodeAttrs would come handy. With getNodeAttrs and refactored isActive it enables for easy custom attribute handling