Using TipTap with Vue3+Composition API+TS

370 Views Asked by At

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)

0

There are 0 best solutions below