fix: 文本元素撤销时无法正确更新视图

This commit is contained in:
pipipi-pikachu 2021-08-06 00:04:08 +08:00
parent 90090411e5
commit 6d9bf15a7d
2 changed files with 5 additions and 3 deletions

View File

@ -10,7 +10,7 @@ const schema = new Schema({
marks: schemaMarks, marks: schemaMarks,
}) })
const createDocument = (content: string) => { export const createDocument = (content: string) => {
const htmlString = `<div>${content}</div>` const htmlString = `<div>${content}</div>`
const parser = new window.DOMParser() const parser = new window.DOMParser()
const element = parser.parseFromString(htmlString, 'text/html').body.firstElementChild const element = parser.parseFromString(htmlString, 'text/html').body.firstElementChild

View File

@ -11,7 +11,7 @@ import { debounce } from 'lodash'
import { MutationTypes, useStore } from '@/store' import { MutationTypes, useStore } from '@/store'
import { EditorView } from 'prosemirror-view' import { EditorView } from 'prosemirror-view'
import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands' import { toggleMark, wrapIn, selectAll } from 'prosemirror-commands'
import { initProsemirrorEditor } from '@/utils/prosemirror/' import { initProsemirrorEditor, createDocument } from '@/utils/prosemirror'
import { getTextAttrs } from '@/utils/prosemirror/utils' import { getTextAttrs } from '@/utils/prosemirror/utils'
import emitter, { EmitterEvents, RichTextCommand } from '@/utils/emitter' import emitter, { EmitterEvents, RichTextCommand } from '@/utils/emitter'
import { alignmentCommand } from '@/utils/prosemirror/commands/setTextAlign' import { alignmentCommand } from '@/utils/prosemirror/commands/setTextAlign'
@ -92,7 +92,9 @@ export default defineComponent({
watch(textContent, () => { watch(textContent, () => {
if (!editorView) return if (!editorView) return
if (editorView.hasFocus()) return if (editorView.hasFocus()) return
editorView.dom.innerHTML = textContent.value
const { doc, tr } = editorView.state
editorView.dispatch(tr.replaceRangeWith(0, doc.content.size, createDocument(textContent.value)))
}) })
// / // /