Tiptap: How to Change Attribute of a Node

[renerdias]

I created a node with specific attributes, now how do I change the value of these attributes in a plugin? Or how could it do that?

[laurensiusadi]

you can use updateAttrs function
You can check examples such as embeds (use vue component as plugin view)

[renerdias]

@laurensiusadi Thank you very much, and one more question, how would I have a method in this component and fire it through a command?

[laurensiusadi]

on your vue component put it on props: ['updateAttrs']
then you can call it this.updateAttrs({ attribute: value })

[renerdias]

@laurensiusadi I refer to using something of the type below to execute the method on component:

// this command will be called from menus to add a blockquote
// type is the prosemirror schema object for this blockquote
// schema is a collection of all registered nodes and marks
commands({ type, schema }) {
return () => toggleWrap(type)
}

// here you can register some shortcuts
// in this case you can create a blockquote with ctrl + >
keys({ type }) {
return {
'Ctrl->': toggleWrap(type),
}
}

[laurensiusadi]

I'm not to familiar with that, but looking at the Toolbar implementation will help, I guess?

[theknet]

Hey @laurensiusadi,

I'm attempting to implement something similar right now but can't seem to find the correct documentation. If I have my Vue component in a seperate file to the Node declaration. How would I call updateAttrs from a command? Or should I be using dispatch with a prosemirror utility command to update an attribute?

[laurensiusadi]

@theknet

Here's how you use the vue component on a node https://github.com/laurensiusadi/vue-tiptap/blob/master/src/components/editor/TodoItem.js#L12
Use props here https://github.com/laurensiusadi/vue-tiptap/blob/master/src/components/editor/TodoItemComponent.vue#L38

[philippkuehn]

please use updateAttrs