fix: submit twice by shortcut (#64)

修复使用快捷键（Command + Enter）提交时触发两次请求的问题。

同时，此 PR 对此进行了优化，支持非 Mac 设备使用 Ctrl + Enter 进行提交。

/kind bug

Fixes #62 

```release-note
修复使用快捷键提交时触发两次请求的问题。
```

Author: ruibaby

packages/comment-widget/package.json

@@ -42,6 +42,7 @@
   "devDependencies": {
     "@iconify-json/mdi": "^1.1.52",
     "@tailwindcss/forms": "^0.5.6",
+    "@types/autosize": "^4.0.1",
     "@types/lodash.clonedeep": "^4.5.7",
     "@types/qs": "^6.9.7",
     "@types/uuid": "^8.3.4",

packages/comment-widget/src/components/Form.vue

@@ -12,12 +12,13 @@ import type {
 // @ts-ignore
 import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
 import "emoji-mart-vue-fast/css/emoji-mart.css";
-import { inject, ref, watchEffect, type Ref } from "vue";
+import { inject, ref, type Ref } from "vue";
 import { apiClient } from "@/utils/api-client";
-import { useLocalStorage, useMagicKeys } from "@vueuse/core";
+import { useLocalStorage } from "@vueuse/core";
 import axios from "axios";
 import { onClickOutside } from "@vueuse/core";
 import autosize from "autosize";
+import { isMac } from "@/utils/device";
 
 interface CustomAccount {
   displayName: string;
@@ -240,16 +241,20 @@ onClickOutside(emojiPickerRef, () => {
 });
 
 // KeyBoard shortcuts
-const { Command_Enter } = useMagicKeys();
+function onKeydown(e: KeyboardEvent) {
+  if (!raw.value) {
+    return;
+  }
 
-watchEffect(() => {
-  if (Command_Enter.value) {
+  const isEnter = e.key === "Enter";
+  const isShortcut = isMac ? e.metaKey : e.ctrlKey;
+  if (isShortcut && isEnter) {
     handleSubmit();
+    e.preventDefault();
   }
-});
+}
 
 // login
-
 const parentDomId = `#comment-${[group?.replaceAll(".", "-"), kind, name]
   .join("-")
   .replaceAll(/-+/g, "-")}`;
@@ -264,7 +269,7 @@ function handleOpenLoginPage() {
 </script>
 
 <template>
-  <div class="comment-form flex gap-4">
+  <div class="comment-form flex gap-4" @keydown="onKeydown">
     <div class="flex flex-1 flex-col gap-y-4">
       <textarea
         ref="contentInputRef"

packages/comment-widget/src/utils/device.ts

@@ -0,0 +1 @@
+export const isMac = /macintosh|mac os x/i.test(navigator.userAgent);

packages/comment-widget/tsconfig.app.json

@@ -9,6 +9,7 @@
       "@/*": ["./src/*"]
     },
     "ignoreDeprecations": "5.0",
-    "types": ["unplugin-icons/types/vue"]
+    "types": ["unplugin-icons/types/vue"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"]
   }
 }