export extended editor for vue

docs/src/demos/Basic/index.vue

@@ -3,9 +3,7 @@
 </template>
 
 <script>
-import { Editor } from '@tiptap/core'
-import { EditorContent, Renderer } from '@tiptap/vue-starter-kit'
-import extensions from '@tiptap/starter-kit'
+import { Editor, EditorContent, defaultExtensions } from '@tiptap/vue-starter-kit'
 
 export default {
   components: {
@@ -21,8 +19,7 @@ export default {
   mounted() {
     this.editor = new Editor({
       content: '<p>foo</p>',
-      extensions: extensions(),
-      renderer: Renderer,
+      extensions: defaultExtensions(),
     })
 
     window.editor = this.editor

docs/src/demos/ExtensionConfiguration/index.vue

@@ -5,8 +5,7 @@
 </template>
 
 <script>
-import { Editor } from '@tiptap/core'
-import { EditorContent, Renderer } from '@tiptap/vue'
+import { Editor, EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -32,7 +31,6 @@ export default {
         new Text(),
         new Bold(),
       ],
-      renderer: Renderer,
     })
   },
 

packages/core/src/ComponentRenderer.ts

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

packages/core/src/Editor.ts

@@ -20,6 +20,7 @@ import Extension from './Extension'
 import Node from './Node'
 import Mark from './Mark'
 import EventEmitter from './EventEmitter'
+import ComponentRenderer from './ComponentRenderer'
 
 export type Command = (next: Function, editor: Editor) => (...args: any) => any
 
@@ -34,13 +35,13 @@ interface EditorOptions {
   content: EditorContent
   extensions: (Extension | Node | Mark)[]
   injectCSS: Boolean,
-  renderer: any,
 }
 
 @magicMethods
 export class Editor extends EventEmitter {
 
-  private proxy!: any
+  public renderer!: any
+  private proxy!: Editor
   private extensionManager!: ExtensionManager
   private commands: { [key: string]: any } = {}
   private css!: HTMLStyleElement
@@ -53,7 +54,6 @@ export class Editor extends EventEmitter {
     content: '',
     injectCSS: true,
     extensions: [],
-    renderer: null,
   }
 
   constructor(options: Partial<EditorOptions> = {}) {

packages/core/src/ExtensionManager.ts

@@ -90,7 +90,7 @@ export default class ExtensionManager {
   }
 
   get nodeViews() {
-    const { renderer: Renderer } = this.editor.options
+    const { renderer: Renderer } = this.editor
 
     if (!Renderer || !Renderer.type) {
       return {}

packages/vue/index.ts

@@ -1,3 +1,9 @@
+import { Editor as CoreEditor } from '@tiptap/core'
+import Renderer from './src/Renderer'
+
 export * from '@tiptap/core'
 export { default as EditorContent } from './src/components/EditorContent'
-export { default as Renderer } from './src/Renderer'
+
+export class Editor extends CoreEditor {
+  renderer = Renderer
+}