Update node attributes

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>

image

1 Like