From a580e257f557c4027eb4645fdbbc38859aa024b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 8 Mar 2020 23:25:48 +0100
Subject: [PATCH] add editorcontent component

---
 packages/tiptap-core/index.ts                 |  4 ++-
 packages/tiptap-core/src/Editor.ts            | 20 ++++++++++--
 .../src/components/EditorContent.ts           | 32 +++++++++++++++++++
 src/demos/Basic/index.vue                     |  9 ++++--
 src/demos/HandleExtensions/index.vue          |  9 ++++--
 5 files changed, 65 insertions(+), 9 deletions(-)
 create mode 100644 packages/tiptap-core/src/components/EditorContent.ts

diff --git a/packages/tiptap-core/index.ts b/packages/tiptap-core/index.ts
index 67b83709..4579d128 100644
--- a/packages/tiptap-core/index.ts
+++ b/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'
\ No newline at end of file
+export { default as Node } from './src/Node'
+export { default as EditorContent } from './src/components/EditorContent'
\ No newline at end of file
diff --git a/packages/tiptap-core/src/Editor.ts b/packages/tiptap-core/src/Editor.ts
index 161e420c..311521ec 100644
--- a/packages/tiptap-core/src/Editor.ts
+++ b/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()
   }
diff --git a/packages/tiptap-core/src/components/EditorContent.ts b/packages/tiptap-core/src/components/EditorContent.ts
new file mode 100644
index 00000000..69d49d9c
--- /dev/null
+++ b/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
+  },
+})
diff --git a/src/demos/Basic/index.vue b/src/demos/Basic/index.vue
index 0e80572c..2c48d666 100644
--- a/src/demos/Basic/index.vue
+++ b/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(),
     })
diff --git a/src/demos/HandleExtensions/index.vue b/src/demos/HandleExtensions/index.vue
index 7fadb566..a5d1fde5 100644
--- a/src/demos/HandleExtensions/index.vue
+++ b/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(),