Hi guys, I created a custom node I’m trying to update its properties as I click on a date picker, but this action only updates when I click on a date, if I change the time in the input, it doesn’t change.
import { mergeAttributes, Node as Node } from '@tiptap/core'
import { VueNodeViewRenderer } from '@tiptap/vue-2'
import BaseMentionItem from '../components/BaseMentionItem'
export default Node.create({
name: "mention-item",
group: "inline",
inline: true,
draggable: false,
atom: true,
addAttributes() {
return {
type: {
default: '',
},
title: {
default: '',
},
isoDate: {
default: ''
},
image: {
default: ''
},
time: {
default: ''
},
path: {
default: ''
}
};
},
parseHTML() {
return [
{
tag: "mention-item"
}
]
},
renderHTML({ HTMLAttributes }) {
return ['span', this.options.HTMLAttributes, ['mention-item', HTMLAttributes]]
},
addNodeView() {
return VueNodeViewRenderer(BaseMentionItem)
},
addCommands() {
return {
insertMentionItem: (options) => ({ chain, commands }) => {
return commands.insertContent({
type: this.name,
attrs: options
})
},
updateMentionAttribute: (options) => ({ tr, commands }) => {
return commands.insertContent({
type: this.name,
attrs: {
...tr.selection.node.attrs,
...options
}
})
},
}
}
})
In my component I am passing the data,
this.editor.chain().updateMentionAttribute({
title: completeDate,
isoDate: isoDate,
time: hour
}).run()
<div>
<b-time
v-model="currentTime"
:hide-header="true"
@input="change($event)"
/>
</div>
<div>
<b-calendar
selected-variant="primary"
:hide-header="true"
v-model="currentDate"
label-help=""
@input="change($event)"
/>
</div>