fix(vue-3): render node only once

ueberdosis · Apr 8, 2024 · 5cdab90 · 5cdab90
1 parent 0f41e38
commit 5cdab90
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
diff --git a/packages/vue-3/src/Editor.ts b/packages/vue-3/src/Editor.ts
@@ -7,10 +7,11 @@ import {
   markRaw,
   reactive,
   Ref,
+  RendererElement,
+  RendererNode,
+  VNode,
 } from 'vue'
 
-import { VueRenderer } from './VueRenderer.js'
-
 function useDebouncedRef<T>(value: T) {
   return customRef<T>((track, trigger) => {
     return {
@@ -42,7 +43,9 @@ export class Editor extends CoreEditor {
 
   private reactiveExtensionStorage: Ref<Record<string, any>>
 
-  public vueRenderers = reactive<Map<string, VueRenderer>>(new Map())
+  public vueRenderers = reactive<Map<string, VNode<RendererNode, RendererElement, {
+    [key: string]: any;
+}>>>(new Map())
 
   public contentComponent: ContentComponent | null = null
 

diff --git a/packages/vue-3/src/EditorContent.ts b/packages/vue-3/src/EditorContent.ts
@@ -1,5 +1,4 @@
 import {
-  DefineComponent,
   defineComponent,
   getCurrentInstance,
   h,
@@ -8,7 +7,6 @@ import {
   PropType,
   Ref,
   ref,
-  Teleport,
   unref,
   watchEffect,
 } from 'vue'
@@ -91,22 +89,7 @@ export const EditorContent = defineComponent({
 
     if (this.editor) {
       this.editor.vueRenderers.forEach(vueRenderer => {
-        const node = h(
-          Teleport,
-          {
-            to: vueRenderer.teleportElement,
-            key: vueRenderer.id,
-          },
-          h(
-            vueRenderer.component as DefineComponent,
-            {
-              ref: vueRenderer.id,
-              ...vueRenderer.props,
-            },
-          ),
-        )
-
-        vueRenderers.push(node)
+        vueRenderers.push(vueRenderer)
       })
     }
 

diff --git a/packages/vue-3/src/VueRenderer.ts b/packages/vue-3/src/VueRenderer.ts
@@ -1,5 +1,7 @@
 import { Editor } from '@tiptap/core'
-import { Component, markRaw, reactive } from 'vue'
+import {
+  Component, DefineComponent, h, markRaw, reactive, Teleport,
+} from 'vue'
 
 import { Editor as ExtendedEditor } from './Editor.js'
 
@@ -8,6 +10,20 @@ export interface VueRendererOptions {
   props?: Record<string, any>,
 }
 
+const nodeRenderer = (node: VueRenderer) => {
+  return h(
+    Teleport,
+    {
+      to: node.teleportElement,
+      key: node.id,
+    },
+    h(node.component as DefineComponent, {
+      ref: node.id,
+      ...node.props,
+    }),
+  )
+}
+
 export class VueRenderer {
   id: string
 
@@ -28,7 +44,10 @@ export class VueRenderer {
     this.teleportElement = document.createElement('div')
     this.element = this.teleportElement
     this.props = reactive(props)
-    this.editor.vueRenderers.set(this.id, this)
+
+    const nodeRendered = nodeRenderer(this)
+
+    this.editor.vueRenderers.set(this.id, nodeRendered)
 
     if (this.editor.contentComponent) {
       this.editor.contentComponent.update()