move componentrenderer

packages/core/src/ComponentRenderer.ts

@@ -0,0 +1,3 @@
+export default abstract class ComponentRenderer {
+
+}

packages/core/src/ComponentView.ts

@@ -1,32 +0,0 @@
-import Vue from 'vue'
-
-export default class ComponentView {
-  // @ts-ignore
-  constructor(component, options) {
-    this.mount(component)
-  }
-
-  // @ts-ignore
-  mount(component) {
-    // @ts-ignore
-    const Component = Vue.extend(component)
-
-    // @ts-ignore
-    this.vm = new Component({
-      // parent: this.parent,
-      // propsData: props,
-    }).$mount()
-  }
-
-  get dom() {
-    // @ts-ignore
-    return this.vm.$el
-  }
-
-  get contentDOM() {
-    // @ts-ignore
-    return this.vm.$refs.content
-  }
-
-}
-

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()

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,

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)
+}