CODEWITHSUNDEEP
javascriptvue.jsvuejs3tiptapvue-script-setup
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5801

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.

Upvotes: 2

Views: 1344

Answers (2)

snebes
snebes

Reputation: 81

You can also import the entirety of the nodeViewProps using the composable format:

<script setup>
import { nodeViewProps } from '@tiptap/vue-3'
const props = defineProps(nodeViewProps)
</script>

Upvotes: 0

Artur M&#252;ller Romanov
Artur M&#252;ller Romanov

Reputation: 5801

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>

Upvotes: 3

Related Questions