From 7c757415e9169269acf27c7535edb48b3de71dc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 3 Apr 2021 23:15:13 +0200
Subject: [PATCH] fix adding decoration classes to node views in vue

---
 packages/vue-2/src/NodeViewWrapper.ts     |  4 +++-
 packages/vue-2/src/VueNodeViewRenderer.ts | 20 +++++++++++++++++++-
 packages/vue-3/src/NodeViewWrapper.ts     |  4 +++-
 packages/vue-3/src/VueNodeViewRenderer.ts | 15 +++++++++++++++
 4 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/packages/vue-2/src/NodeViewWrapper.ts b/packages/vue-2/src/NodeViewWrapper.ts
index 073c7614..c67bd24e 100644
--- a/packages/vue-2/src/NodeViewWrapper.ts
+++ b/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',
         },
diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts
index 389638c0..0772b99b 100644
--- a/packages/vue-2/src/VueNodeViewRenderer.ts
+++ b/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()
   }
diff --git a/packages/vue-3/src/NodeViewWrapper.ts b/packages/vue-3/src/NodeViewWrapper.ts
index 12870176..04d0b547 100644
--- a/packages/vue-3/src/NodeViewWrapper.ts
+++ b/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',
         },
diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
index 3150b46e..cab63348 100644
--- a/packages/vue-3/src/VueNodeViewRenderer.ts
+++ b/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()
   }