add vue-2 and vue-3

packages/vue-3/src/VueRenderer.ts

@@ -0,0 +1,49 @@
+import { ref, markRaw, Component } from 'vue'
+import { Editor } from './Editor'
+
+export interface VueRendererOptions {
+  as?: string;
+  editor: Editor;
+  props?: { [key: string]: any };
+}
+
+export class VueRenderer {
+  id: string
+
+  editor: Editor
+
+  component: Component
+
+  teleportElement: Element
+
+  element: Element
+
+  props: { [key: string]: any }
+
+  constructor(component: Component, { props = {}, editor }: VueRendererOptions) {
+    this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
+    this.editor = editor
+    this.component = markRaw(component)
+    this.teleportElement = document.createElement('div')
+    this.element = this.teleportElement
+    this.props = ref(props)
+    this.editor.vueRenderers.set(this.id, this)
+
+    if (this.editor.contentComponent) {
+      this.editor.contentComponent.update()
+      this.element = this.teleportElement.firstElementChild as Element
+    }
+  }
+
+  get ref() {
+    return this.editor.contentComponent?.ctx.$refs[this.id]
+  }
+
+  updateProps(props: { [key: string]: any } = {}) {
+    this.props.value = props
+  }
+
+  destroy() {
+    this.editor.vueRenderers.delete(this.id)
+  }
+}