diff --git a/packages/core/src/ComponentView.ts b/packages/core/src/ComponentView.ts
new file mode 100644
index 00000000..dc2fb789
--- /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 add81585..e8256615 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 9b81746f..69a82519 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 f85259a9..1f324adf 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 00000000..07efc691
--- /dev/null
+++ b/packages/extension-paragraph/paragraph.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/shims/vue.d.ts b/shims/vue.d.ts
new file mode 100644
index 00000000..e6cf1b16
--- /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 f6e4e023..83fac464 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,6 +25,9 @@
"scripthost"
]
},
+ "files": [
+ "./shims/vue.d.ts"
+ ],
"include": [
"docs/src/**/*.ts",
"docs/src/**/*.tsx",