Add keyboard shortcuts for save and close note

diff --git a/client/components/toastui/ToastEditor.vue b/client/components/toastui/ToastEditor.vue
index 5971607bd499eb26ec992c4cdc9c2f5ad98ad69e..f5f3150a0396ca87728d9c9562b981cade65f083 100644 (file)
--- a/client/components/toastui/ToastEditor.vue
+++ b/client/components/toastui/ToastEditor.vue
@@ -17,7 +17,7 @@ const props = defineProps({
   addImageBlobHook: Function,
 });
 
-const emit = defineEmits(["change"]);
+const emit = defineEmits(["change", "keydown"]);
 
 const editorElement = ref();
 let toastEditor;
@@ -32,6 +32,9 @@ onMounted(() => {
       change: () => {
         emit("change");
       },
+      keydown: (_, event) => {
+        emit("keydown", event);
+      },
     },
     hooks: props.addImageBlobHook
       ? { addImageBlobHook: props.addImageBlobHook }

diff --git a/client/views/Note.vue b/client/views/Note.vue
index a6be6b3c77eba27c1c195db5e96f9fd5b234b4a5..b9718cc014c0b3aa11ab5928c86c679b594af46c 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -102,6 +102,7 @@
         :initialEditType="loadDefaultEditorMode()"
         :addImageBlobHook="addImageBlobHook"
         @change="startContentChangedTimeout"
+        @keydown="keydownHandler"
       />
     </div>
   </LoadingIndicator>
@@ -165,13 +166,6 @@ const toast = useToast();
 const toastEditor = ref();
 const unsavedChanges = ref(false);
 
-// 'e' to edit
-Mousetrap.bind("e", () => {
-  if (editMode.value === false && canModify.value) {
-    editHandler();
-  }
-});
-
 function init() {
   // Return if we already have the note e.g. When we rename a note, the route prop would change but we’d already have the note.
   if (props.title && props.title == note.value.title) {
@@ -451,6 +445,25 @@ function loadDraft() {
   return localStorage.getItem(note.value.title);
 }
 
+// Keyboard Shortcuts
+// 'e' to edit
+Mousetrap.bind("e", () => {
+  if (editMode.value === false && canModify.value) {
+    editHandler();
+  }
+});
+
+function keydownHandler(event) {
+  // Ctrl + Alt + S to save
+  if (event.ctrlKey && event.altKey && event.key == "s") {
+    saveHandler((close = false));
+  }
+  // Escape to exit edit mode
+  if (event.key == "Escape") {
+    closeHandler();
+  }
+}
+
 // Helpers
 function entityTooLargeToast(entityName) {
   toast.add(