From 30d53d33a56eddbb1f5d630c0f05d8846190b6a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sat, 25 Apr 2020 22:40:38 +0200
Subject: [PATCH] move componentrenderer

---
 docs/src/demos/Basic/index.vue                |  3 ++-
 packages/core/index.ts                        |  1 +
 packages/core/src/ComponentRenderer.ts        |  3 +++
 packages/core/src/Editor.ts                   |  2 ++
 packages/core/src/ExtensionManager.ts         | 25 ++++++++++++++-----
 packages/core/src/utils/capitalize.ts         |  3 +++
 packages/extension-paragraph/index.ts         |  2 +-
 packages/extension-paragraph/paragraph.vue    |  2 +-
 packages/vue/index.ts                         |  3 ++-
 packages/vue/package.json                     |  1 +
 .../ComponentView.ts => vue/src/Renderer.ts}  | 19 +++++++-------
 11 files changed, 45 insertions(+), 19 deletions(-)
 create mode 100644 packages/core/src/ComponentRenderer.ts
 create mode 100644 packages/core/src/utils/capitalize.ts
 rename packages/{core/src/ComponentView.ts => vue/src/Renderer.ts} (56%)

diff --git a/docs/src/demos/Basic/index.vue b/docs/src/demos/Basic/index.vue
index 74ed259d..2eb691c6 100644
--- a/docs/src/demos/Basic/index.vue
+++ b/docs/src/demos/Basic/index.vue
@@ -4,7 +4,7 @@
 
 <script>
 import { Editor } from '@tiptap/core'
-import { EditorContent } from '@tiptap/vue'
+import { EditorContent, Renderer } from '@tiptap/vue'
 import extensions from '@tiptap/starter-kit'
 
 export default {
@@ -22,6 +22,7 @@ export default {
     this.editor = new Editor({
       content: '<p>foo</p>',
       extensions: extensions(),
+      renderer: Renderer,
     })
   },
 
diff --git a/packages/core/index.ts b/packages/core/index.ts
index c0b7b0d9..f82559e8 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -2,6 +2,7 @@ import { Editor, CommandSpec } from './src/Editor'
 
 export default Editor
 export { Editor, CommandSpec }
+export { default as ComponentRenderer } from './src/ComponentRenderer'
 export { default as Extension } from './src/Extension'
 export { default as Node } from './src/Node'
 export { default as Mark } from './src/Mark'
diff --git a/packages/core/src/ComponentRenderer.ts b/packages/core/src/ComponentRenderer.ts
new file mode 100644
index 00000000..5cf45587
--- /dev/null
+++ b/packages/core/src/ComponentRenderer.ts
@@ -0,0 +1,3 @@
+export default abstract class ComponentRenderer {
+
+}
\ No newline at end of file
diff --git a/packages/core/src/Editor.ts b/packages/core/src/Editor.ts
index e8256615..5666b66c 100644
--- a/packages/core/src/Editor.ts
+++ b/packages/core/src/Editor.ts
@@ -34,6 +34,7 @@ interface EditorOptions {
   content: EditorContent
   extensions: (Extension | Node | Mark)[]
   injectCSS: Boolean,
+  renderer: any,
 }
 
 @magicMethods
@@ -50,6 +51,7 @@ export class Editor extends EventEmitter {
     content: '',
     injectCSS: true,
     extensions: [],
+    renderer: null,
   }
   
   private lastCommand = Promise.resolve()
diff --git a/packages/core/src/ExtensionManager.ts b/packages/core/src/ExtensionManager.ts
index 69a82519..d260d998 100644
--- a/packages/core/src/ExtensionManager.ts
+++ b/packages/core/src/ExtensionManager.ts
@@ -1,11 +1,12 @@
 import collect from 'collect.js'
 import { keymap } from 'prosemirror-keymap'
 import { inputRules } from 'prosemirror-inputrules'
-import { NodeSpec } from 'prosemirror-model'
+import { EditorView, Decoration } from 'prosemirror-view'
+import { Node as ProsemirrorNode } from 'prosemirror-model'
 import { Editor, CommandSpec } from './Editor'
 import Extension from './Extension'
 import Node from './Node'
-import ComponentView from './ComponentView'
+import capitalize from './utils/capitalize'
 
 export default class ExtensionManager {
 
@@ -88,12 +89,24 @@ export default class ExtensionManager {
   }
 
   get nodeViews() {
+    const { renderer: Renderer } = this.editor.options
+
+    if (!Renderer || !Renderer.type) {
+      return {}
+    }
+
+    const prop = `to${capitalize(Renderer.type)}`
+
     return collect(this.nodes)
-      .filter((schema: any) => schema.toVue)
+      .filter((schema: any) => schema[prop])
       .map((schema: any) => {
-        // @ts-ignore
-        return (node, view, getPos, decorations) => {
-          return new ComponentView(schema.toVue, {
+        return (
+          node: ProsemirrorNode,
+          view: EditorView,
+          getPos: (() => number) | boolean,
+          decorations: Decoration[],
+        ) => {
+          return new Renderer(schema[prop], {
             node,
             view,
             getPos,
diff --git a/packages/core/src/utils/capitalize.ts b/packages/core/src/utils/capitalize.ts
new file mode 100644
index 00000000..43abafe6
--- /dev/null
+++ b/packages/core/src/utils/capitalize.ts
@@ -0,0 +1,3 @@
+export default function capitalize(value: string = ''): string {
+  return value.charAt(0).toUpperCase() + value.slice(1)
+}
\ No newline at end of file
diff --git a/packages/extension-paragraph/index.ts b/packages/extension-paragraph/index.ts
index 1f324adf..2631c878 100644
--- a/packages/extension-paragraph/index.ts
+++ b/packages/extension-paragraph/index.ts
@@ -12,7 +12,7 @@ export default class Paragraph extends Node {
       group: 'block',
       parseDOM: [{ tag: 'p' }],
       toDOM: () => ['p', 0],
-      // toVue: ParagraphComponent,
+      toVue: ParagraphComponent,
     }
   }
 
diff --git a/packages/extension-paragraph/paragraph.vue b/packages/extension-paragraph/paragraph.vue
index 07efc691..be3b6ae6 100644
--- a/packages/extension-paragraph/paragraph.vue
+++ b/packages/extension-paragraph/paragraph.vue
@@ -1,5 +1,5 @@
 <template>
-  <p ref="content"></p>
+  <p data-component="yeah" ref="content"></p>
 </template>
 
 <script>
diff --git a/packages/vue/index.ts b/packages/vue/index.ts
index 6c391ee8..c6a375a8 100644
--- a/packages/vue/index.ts
+++ b/packages/vue/index.ts
@@ -1 +1,2 @@
-export { default as EditorContent } from './src/components/EditorContent'
\ No newline at end of file
+export { default as EditorContent } from './src/components/EditorContent'
+export { default as Renderer } from './src/Renderer'
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 529efb50..46d718eb 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -12,6 +12,7 @@
     "dist"
   ],
   "peerDependencies": {
+    "@tiptap/core": "2.x",
     "vue": "2.x"
   }
 }
diff --git a/packages/core/src/ComponentView.ts b/packages/vue/src/Renderer.ts
similarity index 56%
rename from packages/core/src/ComponentView.ts
rename to packages/vue/src/Renderer.ts
index e7f48367..88519bd6 100644
--- a/packages/core/src/ComponentView.ts
+++ b/packages/vue/src/Renderer.ts
@@ -1,17 +1,20 @@
 import Vue from 'vue'
+import { ComponentRenderer } from '@tiptap/core'
 
-export default class ComponentView {
-  // @ts-ignore
-  constructor(component, options) {
+export default class Renderer extends ComponentRenderer {
+
+  static type: string = 'vue'
+
+  vm!: Vue
+  
+  constructor(component: Vue, options: any) {
+    super()
     this.mount(component)
   }
 
-  // @ts-ignore
-  mount(component) {
-    // @ts-ignore
+  mount(component: Vue) {
     const Component = Vue.extend(component)
 
-    // @ts-ignore
     this.vm = new Component({
       // parent: this.parent,
       // propsData: props,
@@ -19,12 +22,10 @@ export default class ComponentView {
   }
 
   get dom() {
-    // @ts-ignore
     return this.vm.$el
   }
 
   get contentDOM() {
-    // @ts-ignore
     return this.vm.$refs.content
   }