ref #3300 Use vueuse for shortcut keys

package.json

@@ -76,6 +76,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@trodi/electron-splashscreen": "^1.0.2",
+    "@vueuse/core": "^8.3.1",
     "about-window": "^1.15.2",
     "animate.css": "^4.1.0",
     "auto-launch": "^5.0.5",

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -73,6 +73,7 @@ import 'emoji-mart-vue-fast/css/emoji-mart.css'
 import data from 'emoji-mart-vue-fast/data/all.json'
 import { defineComponent, computed, toRefs, ref, onBeforeUnmount, onMounted } from 'vue'
 import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'
+import { useMagicKeys, whenever } from '@vueuse/core'
 
 import suggestText from '@/utils/suggestText'
 import { useStore } from '@/store'
@@ -104,6 +105,12 @@ export default defineComponent({
   setup(props, ctx) {
     const space = 'TimelineSpace/Modals/NewToot/Status'
     const store = useStore()
+    const { up, down, enter, escape, Ctrl_Enter } = useMagicKeys({
+      passive: false,
+      onEventFired(e) {
+        if (e.key === 'Enter' && suggestOpened.value) e.preventDefault()
+      }
+    })
 
     const { modelValue } = toRefs(props)
     const highlightedIndex = ref(0)
@@ -121,31 +128,27 @@ export default defineComponent({
       custom: customEmojis.value
     })
 
-    const onKeyUp = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowUp') {
-        event.preventDefault()
-        suggestHighlight(highlightedIndex.value - 1)
-      }
-      if (event.key === 'ArrowDown') {
-        event.preventDefault()
-        suggestHighlight(highlightedIndex.value + 1)
-      }
-      if (event.key === 'Enter') {
-        event.preventDefault()
-        selectCurrentItem()
-      }
-      if (event.key === 'Escape') {
-        event.preventDefault()
-        closeSuggest()
-      }
-    }
+    whenever(up, () => {
+      suggestHighlight(highlightedIndex.value - 1)
+    })
+    whenever(down, () => {
+      suggestHighlight(highlightedIndex.value + 1)
+    })
+    whenever(enter, () => {
+      selectCurrentItem()
+    })
+    whenever(escape, () => {
+      closeSuggest()
+    })
+    whenever(Ctrl_Enter, () => {
+      ctx.emit('toot')
+    })
 
     onBeforeUnmount(() => {
-      document.removeEventListener('keyup', onKeyUp)
       closeSuggest()
     })
     onMounted(() => {
-      document.addEventListener('keyup', onKeyUp)
+      statusRef.value?.focus()
     })
 
     const openSuggest = () => {

yarn.lock

@@ -2126,11 +2126,25 @@
     "@vueuse/shared" "8.2.6"
     vue-demi "*"
 
+"@vueuse/core@^8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.3.1.tgz#7f2c5977cc0690a803f44c3f5c291536ad7880d1"
+  integrity sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw==
+  dependencies:
+    "@vueuse/metadata" "8.3.1"
+    "@vueuse/shared" "8.3.1"
+    vue-demi "*"
+
 "@vueuse/metadata@8.2.6":
   version "8.2.6"
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.2.6.tgz#0e649ff5c784ac73d35f44f9758fac33f62e3e3f"
   integrity sha512-OBKtafCt+4RcEJlYDCjp1vl65pBCL2g4TmipEtdZ8/qphKlW6nakJbkY7XRN5grPmjqU99/ahJGtyGk5NHS2hw==
 
+"@vueuse/metadata@8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.3.1.tgz#acc0ff9ad686c68dfc7b4869639c43e71ae2682b"
+  integrity sha512-1aZaFL44HzXXkfN6Q7KMDOXBFKTHDClHlOJBxtN8rTBXIIScoGOrJCpxWiQ4kuVg95MzG/pHrd3P4wd8poL9XQ==
+
 "@vueuse/shared@8.2.6":
   version "8.2.6"
   resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.2.6.tgz#7cbf2bdd576f86d888014272982a7c84b7015d21"
@@ -2138,6 +2152,13 @@
   dependencies:
     vue-demi "*"
 
+"@vueuse/shared@8.3.1":
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.3.1.tgz#a941ef6a0eaf483ecb0e88a062163d506c22cc4b"
+  integrity sha512-7HKLCcxp4dtONq6QSSoavblo9riYgqzw7jhqiC0/VUYMXKzqj1G/GznOzTmY8Wi8uKKT197JqjKQ1DKt2j/0+A==
+  dependencies:
+    vue-demi "*"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"