I'm using TipTap, a Rich Text Editor and the way they handle props in vue components (composition api) is by importing them like so:
<script>
import { nodeViewProps } from '@tiptap/vue-3'
export default {
props: nodeViewProps
}
</script>
logging nodeViewProps shows an object of objects:
{0: false, 1: true, editor: {…}, node: {…}, decorations: {…}, selected: {…}, extension: {…}, …}
0: false
1: true
decorations: {required: true, type: ƒ}
deleteNode: {required: true, type: ƒ}
editor: {required: true, type: ƒ}
extension: {required: true, type: ƒ}
getPos: {required: true, type: ƒ}
node: {required: true, type: ƒ}
selected: {required: true, type: ƒ}
updateAttributes: {required: true, type: ƒ}
[[Prototype]]: Object
How would I import this prop object inside of script setup? I've tried:
<script setup>
import {nodeViewProps} from '@tiptap/vue-3'
const props = defineProps([
nodeViewProps
])
const props = defineProps([
'nodeViewProps'
])
const props = defineProps({
nodeViewProps: nodeViewProps
})
const props = defineProps({
node: nodeViewProps
})
</script>
none of which seems to be the correct way.
console.log(props.nodeViewProps)
outputs undefined.
This is how it works in script setup. Apparently you don't need to import nodeViewProps anymore and instead a node prop object is passed by default to your vue component which can be accessed like so:
<script setup>
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>
This component if from their documentation and its original form looks like this:
<template>
<node-view-wrapper class="vue-component">
<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>
<script>
import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
export default {
components: {
NodeViewWrapper,
},
props: nodeViewProps,
methods: {
increase() {
this.updateAttributes({
count: this.node.attrs.count + 1,
})
},
},
}
</script>