add editorcontent component

packages/tiptap-core/index.ts

@@ -1,5 +1,7 @@
 import { Editor } from './src/Editor'
 
 export default Editor
+export { Editor }
 export { default as Extension } from './src/Extension'
-export { default as Node } from './src/Node'
+export { default as Node } from './src/Node'
+export { default as EditorContent } from './src/components/EditorContent'

packages/tiptap-core/src/Editor.ts

@@ -18,7 +18,6 @@ type EditorContent = string | JSON
 type Command = (next: Function, editor: Editor, ...args: any) => any
 
 interface Options {
-  element?: globalThis.Node
   content: EditorContent
   extensions: (Extension | Node)[]
   injectCSS: Boolean
@@ -26,6 +25,7 @@ interface Options {
 
 export class Editor extends EventEmitter {
 
+  element = document.createElement('div')
   extensionManager!: ExtensionManager
   schema!: Schema
   view!: EditorView
@@ -77,7 +77,7 @@ export class Editor extends EventEmitter {
   }
 
   private createView() {
-    this.view = new EditorView(this.options.element, {
+    this.view = new EditorView(this.element, {
       state: EditorState.create({
         doc: this.createDocument(this.options.content),
         plugins: this.plugins,
@@ -172,6 +172,22 @@ export class Editor extends EventEmitter {
     return this[name](...args)
   }
 
+  // public setParentComponent(component = null) {
+  //   if (!component) {
+  //     return
+  //   }
+
+  //   this.view.setProps({
+  //     nodeViews: this.initNodeViews({
+  //       parent: component,
+  //       extensions: [
+  //         ...this.builtInExtensions,
+  //         ...this.options.extensions,
+  //       ],
+  //     }),
+  //   })
+  // }
+
   public json() {
     return this.state.doc.toJSON()
   }

packages/tiptap-core/src/components/EditorContent.ts

@@ -0,0 +1,32 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  props: {
+    editor: {
+      default: null,
+      type: Object,
+    },
+  },
+
+  watch: {
+    editor: {
+      immediate: true,
+      handler(editor) {
+        if (editor && editor.element) {
+          this.$nextTick(() => {
+            this.$el.appendChild(editor.element.firstChild)
+            // editor.setParentComponent(this)
+          })
+        }
+      },
+    },
+  },
+
+  render(createElement) {
+    return createElement('div')
+  },
+
+  beforeDestroy() {
+    this.editor.element = this.$el
+  },
+})

src/demos/Basic/index.vue

@@ -1,12 +1,16 @@
 <template>
-  <div ref="editor"></div>
+  <editor-content :editor="editor" />
 </template>
 
 <script>
-import Editor from '@tiptap/core'
+import { Editor, EditorContent } from '@tiptap/core'
 import extensions from '@tiptap/starter-kit'
 
 export default {
+  components: {
+    EditorContent,
+  },
+
   data() {
     return {
       editor: null,
@@ -15,7 +19,6 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      element: this.$refs.editor,
       content: '<p>foo</p>',
       extensions: extensions(),
     })

src/demos/HandleExtensions/index.vue

@@ -8,18 +8,22 @@
         redo
       </button>
     </div>
-    <div ref="editor"></div>
+    <editor-content :editor="editor" />
   </div>
 </template>
 
 <script>
-import Editor from '@tiptap/core'
+import { Editor, EditorContent } from '@tiptap/core'
 import Document from '@tiptap/document-extension'
 import Paragraph from '@tiptap/paragraph-extension'
 import Text from '@tiptap/text-extension'
 import History from '@tiptap/history-extension'
 
 export default {
+  components: {
+    EditorContent,
+  },
+
   data() {
     return {
       editor: null,
@@ -28,7 +32,6 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      element: this.$refs.editor,
       content: '<p>foo</p>',
       extensions: [
         new Document(),