fix adding decoration classes to node views in vue

packages/vue-2/src/NodeViewWrapper.ts

@@ -8,11 +8,13 @@ export const NodeViewWrapper = Vue.extend({
     },
   },
 
-  inject: ['onDragStart'],
+  inject: ['onDragStart', 'decorationClasses'],
 
   render(createElement) {
     return createElement(
       this.as, {
+        // @ts-ignore
+        class: this.decorationClasses.value,
         style: {
           whiteSpace: 'normal',
         },

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -51,6 +51,10 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
 
   renderer!: VueRenderer
 
+  decorationClasses!: {
+    value: string
+  }
+
   mount() {
     const props: NodeViewProps = {
       editor: this.editor,
@@ -71,14 +75,19 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
       isEditable.value = this.editor.isEditable
     })
 
+    this.decorationClasses = Vue.observable({
+      value: this.getDecorationClasses(),
+    })
+
     const Component = Vue
       .extend(this.component)
       .extend({
         props: Object.keys(props),
-        provide() {
+        provide: () => {
           return {
             onDragStart,
             isEditable,
+            decorationClasses: this.decorationClasses,
           }
         },
       })
@@ -122,6 +131,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
 
     this.node = node
     this.decorations = decorations
+    this.decorationClasses.value = this.getDecorationClasses()
     this.renderer.updateProps({ node, decorations })
 
     return true
@@ -139,6 +149,14 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
     })
   }
 
+  getDecorationClasses() {
+    return this.decorations
+      // @ts-ignore
+      .map(item => item.type.attrs.class)
+      .flat()
+      .join(' ')
+  }
+
   destroy() {
     this.renderer.destroy()
   }

packages/vue-3/src/NodeViewWrapper.ts

@@ -8,11 +8,13 @@ export const NodeViewWrapper = defineComponent({
     },
   },
 
-  inject: ['onDragStart'],
+  inject: ['onDragStart', 'decorationClasses'],
 
   render() {
     return h(
       this.as, {
+        // @ts-ignore
+        class: this.decorationClasses.value,
         style: {
           whiteSpace: 'normal',
         },

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -6,6 +6,7 @@ import {
 } from '@tiptap/core'
 import {
   ref,
+  Ref,
   provide,
   PropType,
   Component,
@@ -56,6 +57,8 @@ class VueNodeView extends NodeView<Component, Editor> {
 
   renderer!: VueRenderer
 
+  decorationClasses!: Ref<string>
+
   mount() {
     const props: NodeViewProps = {
       editor: this.editor,
@@ -74,12 +77,15 @@ class VueNodeView extends NodeView<Component, Editor> {
       isEditable.value = this.editor.isEditable
     })
 
+    this.decorationClasses = ref(this.getDecorationClasses())
+
     const extendedComponent = defineComponent({
       extends: { ...this.component },
       props: Object.keys(props),
       setup: () => {
         provide('onDragStart', onDragStart)
         provide('isEditable', isEditable)
+        provide('decorationClasses', this.decorationClasses)
 
         return (this.component as any).setup?.(props)
       },
@@ -124,6 +130,7 @@ class VueNodeView extends NodeView<Component, Editor> {
 
     this.node = node
     this.decorations = decorations
+    this.decorationClasses.value = this.getDecorationClasses()
     this.renderer.updateProps({ node, decorations })
 
     return true
@@ -141,6 +148,14 @@ class VueNodeView extends NodeView<Component, Editor> {
     })
   }
 
+  getDecorationClasses() {
+    return this.decorations
+      // @ts-ignore
+      .map(item => item.type.attrs.class)
+      .flat()
+      .join(' ')
+  }
+
   destroy() {
     this.renderer.destroy()
   }