abort creation/edit of note on [esc]

Author: rainu

README.md

@@ -65,6 +65,8 @@ For detailed explanation on how things work, check out [Nuxt.js docs](https://nu
 ## Changelog
 
 ### 0.9.17
+* abort creation/edit of note while typing [ESC]
+* autofocus the first text element on copy dialog for template notes
 * fix crash when try to create new placeholder
 * preselect board tags on new notes [#31](https://github.com/rainu/dev-notes/issues/31)
 * UX: redesign themes

nuxt.config.js

@@ -80,6 +80,7 @@ export default {
   plugins: [
     '~/plugins/localStore',
     '~/plugins/i18n',
+    '~/plugins/shortkey',
     '~/plugins/init',
     '~/plugins/style',
     '~/plugins/notification',

package-lock.json

@@ -26,6 +26,7 @@
     "uuid4": "^1.1.4",
     "vue-i18n": "^8.14.0",
     "vue-markdown": "^2.2.4",
+    "vue-shortkey": "^3.1.7",
     "vue-web-cam": "^1.8.0",
     "vuedraggable": "^2.23.1",
     "webdav": "^2.10.0"

package.json

@@ -14,7 +14,7 @@
       </v-card-text>
       <v-card-actions>
         <div class="flex-grow-1"></div>
-        <v-btn color="error" @click="onAbort">{{$t('note.actions.abort')}}</v-btn>
+        <v-btn color="error" @click="onAbort" v-shortkey="['esc']" @shortkey="onAbort">{{$t('note.actions.abort')}}</v-btn>
         <v-btn color="primary" type="submit" form="note-edit-form">{{$t('note.actions.save')}}</v-btn>
       </v-card-actions>
     </v-card>

pages/notes/edit/_id.vue

@@ -22,7 +22,7 @@
       </v-card-text>
       <v-card-actions>
         <div class="flex-grow-1"></div>
-        <v-btn color="error" @click="onAbort">{{$t('note.actions.abort')}}</v-btn>
+        <v-btn color="error" @click="onAbort" v-shortkey="['esc']" @shortkey="onAbort">{{$t('note.actions.abort')}}</v-btn>
         <v-btn color="primary" type="submit" form="note-new-form">{{$t('note.actions.save')}}</v-btn>
       </v-card-actions>
     </v-card>

pages/notes/new/_type.vue

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+
+import shortkey from 'vue-shortkey'
+
+Vue.use(shortkey)
+
+export default ({ app, store }) => {
+
+}