vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix(editor): use modelValue directly to update values in the editor

This commit is contained in:
kolaente 2023-10-29 19:39:38 +01:00
parent 4350d78178
commit 9cf81e1478
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 36 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/input/editor/TipTap.vue
View File

@ -267,41 +267,12 @@ const {
const emit = defineEmits(['update:modelValue', 'save'])
const inputHTML = ref('')
watch(
() => modelValue,
() => {
inputHTML.value = modelValue
},
{immediate: true},
)
const isEmpty = computed(() => inputHTML.value === '')
const internalMode = ref<Mode>(initialMode)
const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled)
function setEdit() {
internalMode.value = 'edit'
editor.value?.commands.focus()
}
const debouncedInputHTML = refDebounced(inputHTML, 1000)
watch(debouncedInputHTML, () => bubbleNow())
function bubbleNow() {
emit('update:modelValue', inputHTML.value)
}
function bubbleSave() {
bubbleNow()
emit('save', inputHTML.value)
if (initialMode === 'preview' && isEditing.value) {
internalMode.value = 'preview'
}
}
const editor = useEditor({
content: inputHTML.value,
content: modelValue,
editable: isEditing.value,
extensions: [
// Starterkit:
@ -386,14 +357,45 @@ const editor = useEditor({
BubbleMenu,
],
onUpdate: () => {
// HTML
inputHTML.value = editor.value!.getHTML()
// JSON
// this.$emit('update:modelValue', this.editor.getJSON())
},
})
watch(
() => modelValue,
value => {
inputHTML.value = modelValue
if (!editor?.value) return
if (editor.value.getHTML() === value) {
return
}
editor.value.commands.setContent(value, false)
},
)
const debouncedInputHTML = refDebounced(inputHTML, 1000)
watch(debouncedInputHTML, () => bubbleNow())
function bubbleNow() {
emit('update:modelValue', inputHTML.value)
}
function bubbleSave() {
bubbleNow()
emit('save', inputHTML.value)
if (initialMode === 'preview' && isEditing.value) {
internalMode.value = 'preview'
}
}
function setEdit() {
internalMode.value = 'edit'
editor.value?.commands.focus()
}
watch(
() => isEditing.value,
() => {
@ -401,21 +403,6 @@ watch(
},
)
watch(inputHTML, (value) => {
if (!editor.value) return
// HTML
const isSame = editor.value.getHTML() === value
// JSON
// const isSame = JSON.stringify(editor.value.getJSON()) === JSON.stringify(value)
if (isSame) {
return
}
editor.value.commands.setContent(value, false)
})
onBeforeUnmount(() => editor.value?.destroy())
const uploadInputRef = ref<HTMLInputElement | null>(null)