diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue index 62b73b9858..7f37271923 100644 --- a/src/components/input/editor/TipTap.vue +++ b/src/components/input/editor/TipTap.vue @@ -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(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(null)