From 6ad8ce8f4476604ef898e418a6c2d40620dfdb2f Mon Sep 17 00:00:00 2001 From: Elscrux Date: Thu, 11 Apr 2024 00:39:19 +0200 Subject: [PATCH] Cancel current edits and exit edit mode with escape --- .../src/components/input/editor/TipTap.vue | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue index 56c474d43..91eb6598e 100644 --- a/frontend/src/components/input/editor/TipTap.vue +++ b/frontend/src/components/input/editor/TipTap.vue @@ -190,7 +190,7 @@ import BaseButton from '@/components/base/BaseButton.vue' import XButton from '@/components/input/button.vue' import {Placeholder} from '@tiptap/extension-placeholder' import {eventToHotkeyString} from '@github/hotkey' -import {mergeAttributes} from '@tiptap/core' +import {Extension, mergeAttributes} from '@tiptap/core' import {isEditorContentEmpty} from '@/helpers/editorContentEmpty' import inputPrompt from '@/helpers/inputPrompt' import {setLinkInEditor} from '@/components/input/editor/setLinkInEditor' @@ -312,6 +312,8 @@ const internalMode = ref('preview') const isEditing = computed(() => internalMode.value === 'edit' && isEditEnabled) const contentHasChanged = ref(false) +let lastSavedState = modelValue + watch( () => internalMode.value, mode => { @@ -349,6 +351,19 @@ const editor = useEditor({ } }, }), + // Add a custom extension for the Escape key + Extension.create({ + name: 'escapeKey', + + addKeyboardShortcuts() { + return { + 'Escape': () => { + exitEditMode() + return true + }, + } + }, + }), Heading, History, HorizontalRule, @@ -462,7 +477,15 @@ function bubbleNow() { function bubbleSave() { bubbleNow() - emit('save', editor.value?.getHTML()) + lastSavedState = editor.value?.getHTML() ?? '' + emit('save', lastSavedState) + if (isEditing.value) { + internalMode.value = 'preview' + } +} + +function exitEditMode() { + editor.value?.commands.setContent(lastSavedState, false) if (isEditing.value) { internalMode.value = 'preview' }