mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-08-06 13:38:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix adding decoration classes to node views in vue

Browse Source
This commit is contained in:
Philipp Kühn 2021-04-03 23:15:13 +02:00
parent bdccc66d0f
commit 7c757415e9
4 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/vue-2/src/NodeViewWrapper.ts
View File

@ -8,11 +8,13 @@ export const NodeViewWrapper = Vue.extend({
},
},
inject: ['onDragStart'],
inject: ['onDragStart', 'decorationClasses'],
render(createElement) {
return createElement(
this.as, {
// @ts-ignore
class: this.decorationClasses.value,
style: {
whiteSpace: 'normal',
},

20
packages/vue-2/src/VueNodeViewRenderer.ts
View File

@ -51,6 +51,10 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
renderer!: VueRenderer
decorationClasses!: {
value: string
}
mount() {
const props: NodeViewProps = {
editor: this.editor,
@ -71,14 +75,19 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
isEditable.value = this.editor.isEditable
})
this.decorationClasses = Vue.observable({
value: this.getDecorationClasses(),
})
const Component = Vue
.extend(this.component)
.extend({
props: Object.keys(props),
provide() {
provide: () => {
return {
onDragStart,
isEditable,
decorationClasses: this.decorationClasses,
}
},
})
@ -122,6 +131,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
this.node = node
this.decorations = decorations
this.decorationClasses.value = this.getDecorationClasses()
this.renderer.updateProps({ node, decorations })
return true
@ -139,6 +149,14 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
})
}
getDecorationClasses() {
return this.decorations
// @ts-ignore
.map(item => item.type.attrs.class)
.flat()
.join(' ')
}
destroy() {
this.renderer.destroy()
}

4
packages/vue-3/src/NodeViewWrapper.ts
View File

@ -8,11 +8,13 @@ export const NodeViewWrapper = defineComponent({
},
},
inject: ['onDragStart'],
inject: ['onDragStart', 'decorationClasses'],
render() {
return h(
this.as, {
// @ts-ignore
class: this.decorationClasses.value,
style: {
whiteSpace: 'normal',
},

15
packages/vue-3/src/VueNodeViewRenderer.ts
View File

@ -6,6 +6,7 @@ import {
} from '@tiptap/core'
import {
ref,
Ref,
provide,
PropType,
Component,
@ -56,6 +57,8 @@ class VueNodeView extends NodeView<Component, Editor> {
renderer!: VueRenderer
decorationClasses!: Ref<string>
mount() {
const props: NodeViewProps = {
editor: this.editor,
@ -74,12 +77,15 @@ class VueNodeView extends NodeView<Component, Editor> {
isEditable.value = this.editor.isEditable
})
this.decorationClasses = ref(this.getDecorationClasses())
const extendedComponent = defineComponent({
extends: { ...this.component },
props: Object.keys(props),
setup: () => {
provide('onDragStart', onDragStart)
provide('isEditable', isEditable)
provide('decorationClasses', this.decorationClasses)
return (this.component as any).setup?.(props)
},
@ -124,6 +130,7 @@ class VueNodeView extends NodeView<Component, Editor> {
this.node = node
this.decorations = decorations
this.decorationClasses.value = this.getDecorationClasses()
this.renderer.updateProps({ node, decorations })
return true
@ -141,6 +148,14 @@ class VueNodeView extends NodeView<Component, Editor> {
})
}
getDecorationClasses() {
return this.decorations
// @ts-ignore
.map(item => item.type.attrs.class)
.flat()
.join(' ')
}
destroy() {
this.renderer.destroy()
}