What is the process for importing the nodeViewProps object from TipTap in a Vue 3 script setup?

Question

What is the process for importing the nodeViewProps object from TipTap in a Vue 3 script setup?

Currently utilizing TipTap, a Rich Text Editor that implements props in vue components (composition api) by importing them as follows:

<script>
import { nodeViewProps } from '@tiptap/vue-3'

export default {

  props: nodeViewProps

}

</script>

Upon logging nodeViewProps, it displays 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

The challenge lies in importing this prop object within the context of script setup. I've attempted various approaches without success:

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

Unfortunately, none of the above methods appear to be correct.

console.log(props.nodeViewProps)

This statement results in undefined being outputted.

javascript vue.js vuejs3 tiptap vue-script-setup

Answer 1

Answer №1

Here is how it functions within the realm of script setup. Interestingly enough, there is no longer a requirement to import nodeViewProps. Instead, a default node prop object is automatically passed to your Vue component, which can be accessed as follows:

<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 particular component is sourced from their official documentation. In its original guise, it appears 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>

Answer 2

Here is how it functions within the realm of script setup. Interestingly enough, there is no longer a requirement to import nodeViewProps. Instead, a default node prop object is automatically passed to your Vue component, which can be accessed as follows:

<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 particular component is sourced from their official documentation. In its original guise, it appears 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>

Answer 3

Answer №2

Another way to bring in all of the nodeViewProps is by using this flexible approach:

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

Answer 4

Another way to bring in all of the nodeViewProps is by using this flexible approach:

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

What is the process for importing the nodeViewProps object from TipTap in a Vue 3 script setup?

Answer №1

Answer №2

Similar questions

The CSS classes for the dropzonejs are not being properly updated for editing purposes

How to toggle between checked and unchecked states using jQuery within AngularJS?

javascript ondrag while self-pressing

Ways to incorporate validation into Material-UI form input fields

What is the most effective way to load data prior to the controller being loaded

An element generated through JavaScript fails to display on the webpage

How to change the date value in an HTML input field of type date using JavaScript

The node application route appears to be malfunctioning

I could use some assistance with implementing a remainder operator by incorporating it into an if statement and outputting the result to

Looking for a Regex pattern for this example: 12345678/90 MM/DD/YYYY

The Vue component is not displaying any data

ES6: Using DataURI to provide input results in undefined output

Creating Bubble Charts using npm highcharts with error code #17

The issue of JQuery selector failure within an AngularJS controller

Contrast the values extracted from an array of objects with a string in React Native/Javascript

Encountering an issue in Vue where trying to set focus to a button results in the error "Cannot read property 'focus' of

What is the best way to utilize jQuery.post in order to push JSON data to a php script?

Utilizing Jquery to locate a link inside a Div and displaying it as specified in the HTML

In search of a charts library that enables interactive, linked events

What steps should I follow to execute an external file in Gulp?