v1.7.3

.env

@@ -2,7 +2,7 @@ GENERATE_SOURCEMAP=false
 
 REACT_APP_NAME=KISS Translator
 REACT_APP_NAME_CN=简约翻译
-REACT_APP_VERSION=1.7.2
+REACT_APP_VERSION=1.7.3
 
 REACT_APP_HOMEPAGE=https://github.com/fishjar/kiss-translator
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kiss-translator",
   "description": "A minimalist bilingual translation Extension & Greasemonkey Script",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "author": "Gabe<yugang2002@gmail.com>",
   "private": true,
   "dependencies": {

public/manifest.firefox.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

public/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "__MSG_app_name__",
   "description": "__MSG_app_description__",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "default_locale": "en",
   "author": "Gabe<yugang2002@gmail.com>",
   "homepage_url": "https://github.com/fishjar/kiss-translator",

src/config/i18n.js

@@ -576,8 +576,8 @@ export const I18N = {
     en: `Trigger Translation Shortcut Keys`,
   },
   trigger_trans_shortcut_help: {
-    zh: `默认为单击“Alt+i”`,
-    en: `Default is "Alt+i"`,
+    zh: `默认为单击“AltLeft+KeyI”`,
+    en: `Default is "AltLeft+KeyI"`,
   },
   shortcut_press_count: {
     zh: `快捷键连击次数`,

src/config/index.js

@@ -201,7 +201,7 @@ export const GLOBLA_RULE = {
 
 // 输入框翻译
 export const OPT_INPUT_TRANS_SIGNS = ["/", "//", "\\", "\\\\", ">", ">>"];
-export const DEFAULT_INPUT_SHORTCUT = ["Alt", "i"];
+export const DEFAULT_INPUT_SHORTCUT = ["AltLeft", "KeyI"];
 export const DEFAULT_INPUT_RULE = {
   transOpen: true,
   translator: OPT_TRANS_MICROSOFT,
@@ -261,10 +261,10 @@ export const OPT_SHORTCUT_STYLE = "toggleStyle";
 export const OPT_SHORTCUT_POPUP = "togglePopup";
 export const OPT_SHORTCUT_SETTING = "openSetting";
 export const DEFAULT_SHORTCUTS = {
-  [OPT_SHORTCUT_TRANSLATE]: ["Alt", "q"],
-  [OPT_SHORTCUT_STYLE]: ["Alt", "c"],
-  [OPT_SHORTCUT_POPUP]: ["Alt", "k"],
-  [OPT_SHORTCUT_SETTING]: ["Alt", "o"],
+  [OPT_SHORTCUT_TRANSLATE]: ["AltLeft", "KeyQ"],
+  [OPT_SHORTCUT_STYLE]: ["AltLeft", "KeyC"],
+  [OPT_SHORTCUT_POPUP]: ["AltLeft", "KeyK"],
+  [OPT_SHORTCUT_SETTING]: ["AltLeft", "KeyN"],
 };
 
 export const TRANS_MIN_LENGTH = 5; // 最短翻译长度

src/hooks/Sync.js

@@ -23,7 +23,7 @@ export function useSyncMeta() {
       syncMeta[key] = { ...(syncMeta[key] || {}), updateAt: Date.now() };
       await updateSync({ syncMeta });
     },
-    [sync, updateSync]
+    [sync?.syncMeta, updateSync]
   );
   return { updateSyncMeta };
 }

src/libs/shortcut.js

@@ -22,14 +22,14 @@ export const shortcutListener = (fn, target = document, timeout = 3000) => {
     }, timeout);
 
     if (e.code) {
-      allkeys.add(e.key);
-      curkeys.add(e.key);
+      allkeys.add(e.code);
+      curkeys.add(e.code);
       fn([...curkeys], [...allkeys]);
     }
   };
 
   const handleKeyup = (e) => {
-    curkeys.delete(e.key);
+    curkeys.delete(e.code);
     if (curkeys.size === 0) {
       fn([...curkeys], [...allkeys]);
       allkeys.clear();

src/libs/translator.js

@@ -91,8 +91,8 @@ function addLoading(node, loadingId) {
   node.offsetParent?.appendChild(div);
 }
 
-function removeLoading(loadingId) {
-  const div = document.getElementById(loadingId);
+function removeLoading(node, loadingId) {
+  const div = node.offsetParent.querySelector(`#${loadingId}`);
   if (div) {
     div.remove();
   }
@@ -259,6 +259,22 @@ export class Translator {
     );
   };
 
+  _queryShadowNodes = (selector, rootNode) => {
+    this._rootNodes.add(rootNode);
+    this._queryFilter(selector, rootNode).forEach((item) => {
+      if (!this._tranNodes.has(item)) {
+        this._tranNodes.set(item, "");
+      }
+    });
+
+    Array.from(rootNode.querySelectorAll("*"))
+      .map((item) => item.shadowRoot)
+      .filter(Boolean)
+      .forEach((item) => {
+        this._queryShadowNodes(selector, item);
+      });
+  };
+
   _queryNodes = (rootNode = document) => {
     // const childRoots = Array.from(rootNode.querySelectorAll("*"))
     //   .map((item) => item.shadowRoot)
@@ -281,14 +297,15 @@ export class Translator {
             const outNodes = this._querySelectorAll(outSelector, rootNode);
             outNodes.forEach((outNode) => {
               if (outNode.shadowRoot) {
-                this._rootNodes.add(outNode.shadowRoot);
-                this._queryFilter(inSelector, outNode.shadowRoot).forEach(
-                  (item) => {
-                    if (!this._tranNodes.has(item)) {
-                      this._tranNodes.set(item, "");
-                    }
-                  }
-                );
+                // this._rootNodes.add(outNode.shadowRoot);
+                // this._queryFilter(inSelector, outNode.shadowRoot).forEach(
+                //   (item) => {
+                //     if (!this._tranNodes.has(item)) {
+                //       this._tranNodes.set(item, "");
+                //     }
+                //   }
+                // );
+                this._queryShadowNodes(inSelector, outNode.shadowRoot);
               }
             });
           }
@@ -357,8 +374,17 @@ export class Translator {
     stepShortcutRegister(
       triggerShortcut,
       async () => {
-        const node = document.activeElement;
-        if (!node || !(isInputNode(node) || isEditAbleNode(node))) {
+        let node = document.activeElement;
+
+        if (!node) {
+          return;
+        }
+
+        while (node.shadowRoot) {
+          node = node.shadowRoot.activeElement;
+        }
+
+        if (!isInputNode(node) && !isEditAbleNode(node)) {
           return;
         }
 
@@ -435,7 +461,7 @@ export class Translator {
         } catch (err) {
           console.log("[translate input]", err.message);
         } finally {
-          removeLoading(loadingId);
+          removeLoading(node, loadingId);
         }
       },
       triggerCount,