From 3470a7be1c9eb0e5869beb5356453cbe10ec3256 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 24 Apr 2020 09:32:37 +0200
Subject: [PATCH] add basic support for components

---
 packages/core/src/ComponentView.ts         | 29 ++++++++++++++++++++++
 packages/core/src/Editor.ts                |  2 ++
 packages/core/src/ExtensionManager.ts      | 19 ++++++++++++++
 packages/extension-paragraph/index.ts      |  2 ++
 packages/extension-paragraph/paragraph.vue |  9 +++++++
 shims/vue.d.ts                             |  4 +++
 tsconfig.json                              |  3 +++
 7 files changed, 68 insertions(+)
 create mode 100644 packages/core/src/ComponentView.ts
 create mode 100644 packages/extension-paragraph/paragraph.vue
 create mode 100644 shims/vue.d.ts

diff --git a/packages/core/src/ComponentView.ts b/packages/core/src/ComponentView.ts
new file mode 100644
index 000000000..dc2fb7898
--- /dev/null
+++ b/packages/core/src/ComponentView.ts
@@ -0,0 +1,29 @@
+import Vue from 'vue'
+
+export default class ComponentView {
+  // @ts-ignore
+  constructor(component, options) {
+    // @ts-ignore
+    this.component = component
+    // @ts-ignore
+    this.dom = this.createDOM()
+    // @ts-ignore
+    this.contentDOM = this.vm.$refs.content
+  }
+
+  createDOM() {
+    // @ts-ignore
+    const Component = Vue.extend(this.component)
+
+    // @ts-ignore
+    this.vm = new Component({
+      // parent: this.parent,
+      // propsData: props,
+    }).$mount()
+
+    // @ts-ignore
+    return this.vm.$el
+  }
+
+}
+
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index add815854..e82566150 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -170,6 +170,8 @@ export class Editor extends EventEmitter {
         plugins: this.plugins,
       }),
       dispatchTransaction: this.dispatchTransaction.bind(this),
+      // @ts-ignore
+      nodeViews: this.extensionManager.nodeViews,
     })
   }
 
diff --git a/packages/core/src/ExtensionManager.ts b/packages/core/src/ExtensionManager.ts
index 9b81746fd..69a82519d 100644
--- a/packages/core/src/ExtensionManager.ts
+++ b/packages/core/src/ExtensionManager.ts
@@ -1,9 +1,11 @@
 import collect from 'collect.js'
 import { keymap } from 'prosemirror-keymap'
 import { inputRules } from 'prosemirror-inputrules'
+import { NodeSpec } from 'prosemirror-model'
 import { Editor, CommandSpec } from './Editor'
 import Extension from './Extension'
 import Node from './Node'
+import ComponentView from './ComponentView'
 
 export default class ExtensionManager {
 
@@ -85,4 +87,21 @@ export default class ExtensionManager {
       .toArray()
   }
 
+  get nodeViews() {
+    return collect(this.nodes)
+      .filter((schema: any) => schema.toVue)
+      .map((schema: any) => {
+        // @ts-ignore
+        return (node, view, getPos, decorations) => {
+          return new ComponentView(schema.toVue, {
+            node,
+            view,
+            getPos,
+            decorations,
+          })
+        }
+      })
+      .all()
+  }
+
 }
diff --git a/packages/extension-paragraph/index.ts b/packages/extension-paragraph/index.ts
index f85259a99..1f324adf3 100644
--- a/packages/extension-paragraph/index.ts
+++ b/packages/extension-paragraph/index.ts
@@ -1,5 +1,6 @@
 import { Node } from '@tiptap/core'
 import { NodeSpec } from 'prosemirror-model'
+import ParagraphComponent from './paragraph.vue'
 
 export default class Paragraph extends Node {
 
@@ -11,6 +12,7 @@ export default class Paragraph extends Node {
       group: 'block',
       parseDOM: [{ tag: 'p' }],
       toDOM: () => ['p', 0],
+      // toVue: ParagraphComponent,
     }
   }
 
diff --git a/packages/extension-paragraph/paragraph.vue b/packages/extension-paragraph/paragraph.vue
new file mode 100644
index 000000000..07efc691a
--- /dev/null
+++ b/packages/extension-paragraph/paragraph.vue
@@ -0,0 +1,9 @@
+<template>
+  <p ref="content"></p>
+</template>
+
+<script>
+export default {
+
+}
+</script>
\ No newline at end of file
diff --git a/shims/vue.d.ts b/shims/vue.d.ts
new file mode 100644
index 000000000..e6cf1b160
--- /dev/null
+++ b/shims/vue.d.ts
@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index f6e4e023e..83fac464f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,9 @@
       "scripthost"
     ]
   },
+  "files": [
+    "./shims/vue.d.ts"
+  ],
   "include": [
     "docs/src/**/*.ts",
     "docs/src/**/*.tsx",