ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

add basic implementation for node views

Browse Source
This commit is contained in:
Philipp Kühn
2020-10-30 11:08:23 +01:00
parent d43b0d96d6
commit f9089932ff
9 changed files with 47 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/vue/index.ts
View File

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

32
packages/vue/src/Renderer.ts
View File

@@ -1,32 +0,0 @@
import Vue from 'vue'
import { ComponentRenderer } from '@tiptap/core'
export default class Renderer extends ComponentRenderer {
static type = 'vue'
vm!: Vue
constructor(component: Vue) {
super()
this.mount(component)
}
mount(component: Vue) {
const Component = Vue.extend(component)
this.vm = new Component({
// parent: this.parent,
// propsData: props,
}).$mount()
}
get dom() {
return this.vm.$el
}
get contentDOM() {
return this.vm.$refs.content
}
}

78
packages/vue/src/VueRenderer.ts
View File

@@ -1,57 +1,20 @@
// @ts-nocheck
// export default (component: any) => {
// console.log('vue renderer', component)
// // return (node, view, getPos) => {
// return what => {
// console.log(what)
// // return new class ImageView {
// // constructor(node, view, getPos) {
// // this.dom = document.createElement('img')
// // this.dom.src = node.attrs.src
// // this.dom.alt = node.attrs.alt
// // this.dom.addEventListener('click', e => {
// // e.preventDefault()
// // const alt = prompt('New alt text:', '')
// // if (alt) {
// // view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, {
// // src: node.attrs.src,
// // alt,
// // }))
// // }
// // })
// // }
// // stopEvent() { return true }
// // }(node, view, getPos)
// }
// }
import { Editor } from '@tiptap/core'
import { Node as ProsemirrorNode } from 'prosemirror-model'
import { EditorView } from 'prosemirror-view'
import { NodeViewRendererProps } from '@tiptap/core'
import { NodeView } from 'prosemirror-view'
import Vue from 'vue'
import { VueConstructor } from 'vue/types/umd'
export default (component: any) => class ImageView {
class VueNodeView implements NodeView {
vm!: Vue
constructor(props: { editor: Editor, node: ProsemirrorNode, view: EditorView, getPos: any }) {
const {
node, editor, getPos, view,
} = props
constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
// const { node, editor, getPos } = props
// const { view } = editor
// this.dom = document.createElement('div')
// this.dom.innerHTML = 'hello node view'
this.mount(component)
}
mount(component: Vue) {
mount(component: Vue | VueConstructor) {
const Component = Vue.extend(component)
this.vm = new Component({
@@ -65,32 +28,15 @@ export default (component: any) => class ImageView {
}
get contentDOM() {
return this.vm.$refs.content
return this.vm.$refs.content as Element
}
stopEvent() {
return true
}
// console.log(what)
// return new class ImageView {
// constructor(node, view, getPos) {
// this.dom = document.createElement('img')
// this.dom.src = node.attrs.src
// this.dom.alt = node.attrs.alt
// this.dom.addEventListener('click', e => {
// e.preventDefault()
// const alt = prompt('New alt text:', '')
// if (alt) {
// view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, {
// src: node.attrs.src,
// alt,
// }))
// }
// })
// }
// stopEvent() { return true }
// }(node, view, getPos)
}
export default function VueRenderer(component: Vue | VueConstructor) {
return (props: NodeViewRendererProps) => new VueNodeView(component, props) as NodeView
}