tiptap/packages/vue-3/src/VueNodeViewRenderer.ts

125 lines
3.1 KiB
TypeScript
Raw Normal View History

2021-03-17 04:55:40 +08:00
import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
2021-02-28 06:56:08 +08:00
import {
ref,
provide,
2021-02-28 06:56:08 +08:00
Component,
defineComponent,
} from 'vue'
2021-03-17 04:55:40 +08:00
import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
2021-02-28 06:56:08 +08:00
import { Node as ProseMirrorNode } from 'prosemirror-model'
import { Editor } from './Editor'
import { VueRenderer } from './VueRenderer'
interface VueNodeViewRendererOptions {
stopEvent: ((event: Event) => boolean) | null,
update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
}
2021-03-17 04:55:40 +08:00
class VueNodeView extends NodeView<Component, Editor> {
2021-02-28 06:56:08 +08:00
renderer!: VueRenderer
2021-03-17 04:55:40 +08:00
mount() {
2021-02-28 06:56:08 +08:00
const props = {
editor: this.editor,
node: this.node,
decorations: this.decorations,
selected: false,
extension: this.extension,
getPos: () => this.getPos(),
updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
}
const onDragStart = this.onDragStart.bind(this)
const isEditable = ref(this.editor.isEditable)
this.editor.on('viewUpdate', () => {
isEditable.value = this.editor.isEditable
})
2021-02-28 06:56:08 +08:00
const extendedComponent = defineComponent({
2021-03-17 04:55:40 +08:00
extends: { ...this.component },
2021-02-28 06:56:08 +08:00
props: Object.keys(props),
2021-03-17 04:55:40 +08:00
setup: () => {
provide('onDragStart', onDragStart)
provide('isEditable', isEditable)
2021-03-17 04:55:40 +08:00
return (this.component as any).setup?.()
2021-02-28 06:56:08 +08:00
},
})
this.renderer = new VueRenderer(extendedComponent, {
editor: this.editor,
props,
})
}
get dom() {
2021-03-05 16:46:47 +08:00
if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
throw Error('Please use the NodeViewWrapper component for your node view.')
}
2021-02-28 06:56:08 +08:00
return this.renderer.element
}
get contentDOM() {
2021-03-15 01:00:50 +08:00
if (this.node.isLeaf) {
return null
2021-02-28 06:56:08 +08:00
}
const contentElement = this.dom.querySelector('[data-node-view-content]')
return contentElement || this.dom
2021-02-28 06:56:08 +08:00
}
update(node: ProseMirrorNode, decorations: Decoration[]) {
if (typeof this.options.update === 'function') {
return this.options.update(node, decorations)
}
if (node.type !== this.node.type) {
return false
}
if (node === this.node && this.decorations === decorations) {
return true
}
this.node = node
this.decorations = decorations
this.renderer.updateProps({ node, decorations })
return true
}
selectNode() {
this.renderer.updateProps({
selected: true,
})
}
deselectNode() {
this.renderer.updateProps({
selected: false,
})
}
2021-03-17 04:55:40 +08:00
destroy() {
this.renderer.destroy()
}
2021-02-28 06:56:08 +08:00
}
export function VueNodeViewRenderer(component: Component, options?: Partial<VueNodeViewRendererOptions>): NodeViewRenderer {
return (props: NodeViewRendererProps) => {
2021-03-05 18:01:26 +08:00
// try to get the parent component
// this is important for vue devtools to show the component hierarchy correctly
// maybe its `undefined` because <editor-content> isnt rendered yet
2021-03-05 18:58:52 +08:00
if (!(props.editor as Editor).contentComponent) {
2021-02-28 06:56:08 +08:00
return {}
}
2021-03-17 04:55:40 +08:00
return new VueNodeView(component, props, options) as ProseMirrorNodeView
2021-02-28 06:56:08 +08:00
}
}