I'm using TipTap with Vue3, Composition API and typescript (script setup) and I've faced a problem. There is no documentation how to implement https://tiptap.dev/examples/interactivity vue interactivity into Vue3. I mean can't create an vue component + tiptap extension that will pass prop. So I've tried to pass node and updateAttributes but browser said props is not defined.
Vue3 component (DevPropTest.vue)
<script setup lang="ts">
import {NodeViewWrapper} from "@tiptap/vue-3";
const props = defineProps({
node: {
type: Object,
required: true
},
updateAttributes: {
type: Function,
required: true,
}
})
const increase = () => {
props.updateAttributes({
count: props.node.attrs.count + 1,
})
}
</script>
<template>
<node-view-wrapper class="DevPropTest">
<span class="label">Vue Component</span>
<div class="content">
<button @click="increase">
This button has been clicked {{ node.attrs.count }} times.
</button>
</div>
</node-view-wrapper>
</template>
Tiptap extension (DevPropTestExtension)
import { mergeAttributes, Node } from '@tiptap/core'
import {VueNodeViewRenderer} from "@tiptap/vue-3";
import DevPropTest from "@/components/UI/Widgets/DevSemanticEditor/Parts/Media/DevPropTest.vue";
export default Node.create({
name: 'DevPropTestExtension',
group: 'block',
atom: true,
draggable: true,
addAttributes() {
return {
count: {
default: 3,
}
}
},
parseHTML() {
return [{
tag: 'DevPropTest',
}]
},
renderHTML({ HTMLAttributes }) {
return['DevPropTest', mergeAttributes(HTMLAttributes)];
},
addNodeView() {
return VueNodeViewRenderer(DevPropTest);
}
});
Editor instance creation
let editor = reactive(
useEditor({
content: `<DevPropTest count="3"></DevPropTest>`,
extensions: [
StarterKit,
DevPropTestExtension,
],
})
)
I expect the same behavior as shown in documentation i.e. pass initial value (3)