From 35151deb764726b94dacfbcae61fd7b3b4d9fd3a Mon Sep 17 00:00:00 2001
From: Settel <settel@localhost>
Date: Sat, 27 Aug 2022 18:43:00 +0200
Subject: [PATCH] feat: cancel edit mode in QuoteCard with Escape key

---
 client/src/components/QuoteCard.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/src/components/QuoteCard.vue b/client/src/components/QuoteCard.vue
index f816947..4ebead1 100644
--- a/client/src/components/QuoteCard.vue
+++ b/client/src/components/QuoteCard.vue
@@ -17,6 +17,7 @@
         :no-html="true"
         @returned="saveQuote"
         @blur="saveQuote"
+        @keydown="keydown"
       />
     </div>
   </div>
@@ -57,11 +58,8 @@ if (props.instantEdit) {
 
 const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
 
-const saveQuote = async () => {
+const editModeEnd = async () => {
   isEditMode.value = false
-  if (props.quote.quote) {
-    useEngine().saveQuote(props.quote.id || ':new:', props.quote.quote)
-  }
   emit('edit-end')
   await useEngine().loadQuotes()
 
@@ -74,6 +72,20 @@ const saveQuote = async () => {
     }
   }, 0)
 }
+
+const saveQuote = async () => {
+  if (props.quote.quote) {
+    useEngine().saveQuote(props.quote.id || ':new:', props.quote.quote)
+  }
+
+  await editModeEnd()
+}
+
+const keydown = async (ev: KeyboardEvent) => {
+  if (ev.key === 'Escape') {
+    await editModeEnd()
+  }
+}
 </script>
 
 <style lang="scss">