fix(vue-3): faster component rendering (#5206)

packages/vue-3/src/Editor.ts

@@ -1,16 +1,14 @@
 import { Editor as CoreEditor, EditorOptions } from '@tiptap/core'
 import { EditorState, Plugin, PluginKey } from '@tiptap/pm/state'
 import {
+  AppContext,
   ComponentInternalInstance,
   ComponentPublicInstance,
   customRef,
   markRaw,
-  reactive,
   Ref,
 } from 'vue'
 
-import { VueRenderer } from './VueRenderer.js'
-
 function useDebouncedRef<T>(value: T) {
   return customRef<T>((track, trigger) => {
     return {
@@ -42,10 +40,10 @@ export class Editor extends CoreEditor {
 
   private reactiveExtensionStorage: Ref<Record<string, any>>
 
-  public vueRenderers = reactive<Map<string, VueRenderer>>(new Map())
-
   public contentComponent: ContentComponent | null = null
 
+  public appContext: AppContext | null = null
+
   constructor(options: Partial<EditorOptions> = {}) {
     super(options)
 

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'
@@ -45,6 +43,17 @@ export const EditorContent = defineComponent({
           // @ts-ignore
           editor.contentComponent = instance.ctx._
 
+          if (instance) {
+            editor.appContext = {
+              ...instance.appContext,
+              provides: {
+                // @ts-ignore
+                ...instance.provides,
+                ...instance.appContext.provides,
+              },
+            }
+          }
+
           editor.setOptions({
             element,
           })
@@ -69,6 +78,7 @@ export const EditorContent = defineComponent({
       }
 
       editor.contentComponent = null
+      editor.appContext = null
 
       if (!editor.options.element.firstChild) {
         return
@@ -87,35 +97,11 @@ export const EditorContent = defineComponent({
   },
 
   render() {
-    const vueRenderers: any[] = []
-
-    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)
-      })
-    }
-
     return h(
       'div',
       {
         ref: (el: any) => { this.rootEl = el },
       },
-      ...vueRenderers,
     )
   },
 })

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -124,7 +124,7 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
   }
 
   get dom() {
-    if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
+    if (!this.renderer.element || !this.renderer.element.hasAttribute('data-node-view-wrapper')) {
       throw Error('Please use the NodeViewWrapper component for your node view.')
     }
 
@@ -183,14 +183,18 @@ class VueNodeView extends NodeView<Component, Editor, VueNodeViewRendererOptions
     this.renderer.updateProps({
       selected: true,
     })
-    this.renderer.element.classList.add('ProseMirror-selectednode')
+    if (this.renderer.element) {
+      this.renderer.element.classList.add('ProseMirror-selectednode')
+    }
   }
 
   deselectNode() {
     this.renderer.updateProps({
       selected: false,
     })
-    this.renderer.element.classList.remove('ProseMirror-selectednode')
+    if (this.renderer.element) {
+      this.renderer.element.classList.remove('ProseMirror-selectednode')
+    }
   }
 
   getDecorationClasses() {

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, render,
+} from 'vue'
 
 import { Editor as ExtendedEditor } from './Editor.js'
 
@@ -8,19 +10,27 @@ export interface VueRendererOptions {
   props?: Record<string, any>,
 }
 
+type ExtendedVNode = ReturnType<typeof h> | null
+
+interface RenderedComponent {
+  vNode: ExtendedVNode
+  destroy: () => void
+  el: Element | null
+}
+
 /**
  * This class is used to render Vue components inside the editor.
  */
 export class VueRenderer {
   id: string
 
+  renderedComponent!: RenderedComponent
+
   editor: ExtendedEditor
 
   component: Component
 
-  teleportElement: Element
+  el: Element | null
-
-  element: Element
 
   props: Record<string, any>
 
@@ -28,35 +38,40 @@ export class VueRenderer {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.editor = editor as ExtendedEditor
     this.component = markRaw(component)
-    this.teleportElement = document.createElement('div')
+    this.el = document.createElement('div')
-    this.element = this.teleportElement
     this.props = reactive(props)
-    this.editor.vueRenderers.set(this.id, this)
+    this.renderedComponent = this.renderComponent()
-
-    if (this.editor.contentComponent) {
-      this.editor.contentComponent.update()
-
-      if (this.teleportElement.children.length !== 1) {
-        throw Error('VueRenderer doesn’t support multiple child elements.')
-      }
-
-      this.element = this.teleportElement.firstElementChild as Element
-    }
   }
 
-  get ref(): any {
+  get element(): Element | null {
-    return this.editor.contentComponent?.refs[this.id]
+    return this.renderedComponent.el
+  }
+
+  renderComponent() {
+    let vNode: ExtendedVNode = h(this.component as DefineComponent, this.props)
+
+    if (typeof document !== 'undefined' && this.el) { render(vNode, this.el) }
+
+    const destroy = () => {
+      if (this.el) { render(null, this.el) }
+      this.el = null
+      vNode = null
+    }
+
+    return { vNode, destroy, el: this.el ? this.el.firstElementChild : null }
   }
 
   updateProps(props: Record<string, any> = {}): void {
+
     Object
       .entries(props)
       .forEach(([key, value]) => {
         this.props[key] = value
       })
+    this.renderComponent()
   }
 
   destroy(): void {
-    this.editor.vueRenderers.delete(this.id)
+    this.renderedComponent.destroy()
   }
 }