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

fix getPos for mark views

Browse Source
This commit is contained in:
Philipp Kühn 2019-05-15 23:12:00 +02:00
parent ac6b7dc5ca
commit 0f9179bc4f
1 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/tiptap/src/Utils/ComponentView.js
View File

@ -1,5 +1,7 @@
import Vue from 'vue' import Vue from 'vue'
import { getMarkRange } from 'tiptap-utils'
export default class ComponentView { export default class ComponentView {
constructor(component, { constructor(component, {
@ -20,9 +22,14 @@ export default class ComponentView {
this.decorations = decorations this.decorations = decorations
this.editable = editable this.editable = editable
this.selected = false this.selected = false
this.isNode = this.node.constructor.name === 'Node'
this.isMark = !this.isNode
this.dom = this.createDOM() this.dom = this.createDOM()
this.contentDOM = this.vm.$refs.content this.contentDOM = this.vm.$refs.content
if (this.isMark) {
this.getPos = this.getMarkPos
}
} }
createDOM() { createDOM() {
@ -32,13 +39,12 @@ export default class ComponentView {
propsData: { propsData: {
node: this.node, node: this.node,
view: this.view, view: this.view,
getPos: this.getPos, getPos: () => this.getPos(),
decorations: this.decorations, decorations: this.decorations,
editable: this.editable, editable: this.editable,
selected: false, selected: false,
options: this.extension.options, options: this.extension.options,
updateAttrs: attrs => this.updateAttrs(attrs), updateAttrs: attrs => this.updateAttrs(attrs),
updateContent: content => this.updateContent(content),
}, },
}).$mount() }).$mount()
return this.vm.$el return this.vm.$el
@ -88,19 +94,19 @@ export default class ComponentView {
return return
} }
const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), null, { const { state } = this.view
const { type } = this.node
const pos = this.getPos()
const newAttrs = {
...this.node.attrs, ...this.node.attrs,
...attrs, ...attrs,
})
this.view.dispatch(transaction)
}
updateContent(content) {
if (!this.editable) {
return
} }
const transaction = this.isMark
? state.tr
.removeMark(pos.from, pos.to, type)
.addMark(pos.from, pos.to, type.create(newAttrs))
: state.tr.setNodeMarkup(pos, null, newAttrs)
const transaction = this.view.state.tr.setNodeMarkup(this.getPos(), this.node.type, { content })
this.view.dispatch(transaction) this.view.dispatch(transaction)
} }
@ -141,6 +147,13 @@ export default class ComponentView {
}) })
} }
getMarkPos() {
const pos = this.view.posAtDOM(this.dom)
const resolvedPos = this.view.state.doc.resolve(pos)
const range = getMarkRange(resolvedPos, this.node.type)
return range
}
destroy() { destroy() {
this.vm.$destroy() this.vm.$destroy()
} }