javascriptvue.jsvuejs3tiptapvue-script-setup

How to import nodeViewProps object from TipTap in Vue 3 script setup?


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.


Solution

  • 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>