add context menus

src/views/Options/Tranbox.js

@@ -3,7 +3,12 @@ import Stack from "@mui/material/Stack";
 import TextField from "@mui/material/TextField";
 import MenuItem from "@mui/material/MenuItem";
 import { useI18n } from "../../hooks/I18n";
-import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
+import {
+  OPT_TRANS_ALL,
+  OPT_LANGS_FROM,
+  OPT_LANGS_TO,
+  DEFAULT_TRANSEL_SHORTCUT,
+} from "../../config";
 import ShortcutInput from "./ShortcutInput";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
@@ -39,14 +44,23 @@ export default function Tranbox() {
     [updateTranbox]
   );
 
+  const handleShortcutTransel = useCallback(
+    (val) => {
+      updateTranbox({ transelShortcut: val });
+    },
+    [updateTranbox]
+  );
+
   const {
     transOpen,
     translator,
     fromLang,
     toLang,
     tranboxShortcut,
+    transelShortcut = DEFAULT_TRANSEL_SHORTCUT,
     btnOffsetX,
     btnOffsetY,
+    hideTranBtn = false,
   } = tranboxSetting;
 
   return (
@@ -129,11 +143,29 @@ export default function Tranbox() {
           onChange={handleChange}
         />
 
+        <TextField
+          select
+          size="small"
+          name="hideTranBtn"
+          value={hideTranBtn}
+          label={i18n("hide_tran_button")}
+          onChange={handleChange}
+        >
+          <MenuItem value={false}>{i18n("show")}</MenuItem>
+          <MenuItem value={true}>{i18n("hide")}</MenuItem>
+        </TextField>
+
         <ShortcutInput
           value={tranboxShortcut}
           onChange={handleShortcutInput}
           label={i18n("trigger_tranbox_shortcut")}
         />
+
+        <ShortcutInput
+          value={transelShortcut}
+          onChange={handleShortcutTransel}
+          label={i18n("trigger_transel_shortcut")}
+        />
       </Stack>
     </Box>
   );

src/views/Selection/index.js

@@ -1,8 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import TranBtn from "./TranBtn";
 import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
 import { sleep } from "../../libs/utils";
+import { MSG_TRANSLATE_SELECTED, DEFAULT_TRANSEL_SHORTCUT } from "../../config";
 
 export default function Slection({ tranboxSetting, transApis }) {
   const [showBox, setShowBox] = useState(false);
@@ -16,36 +17,47 @@ export default function Slection({ tranboxSetting, transApis }) {
     y: (window.innerHeight - 400) / 2,
   });
 
-  async function handleMouseup(e) {
-    await sleep(10);
+  const handleClick = (e) => {
+    e.stopPropagation();
+
+    setShowBtn(false);
+    setText(selectedText);
+    setShowBox(true);
+  };
+
+  const handleTranSelected = useCallback(() => {
+    setShowBtn(false);
 
     const selectedText = window.getSelection()?.toString()?.trim() || "";
     if (!selectedText) {
-      setShowBtn(false);
       return;
     }
 
     setSelText(selectedText);
-    setShowBtn(true);
-    setPosition({ x: e.clientX, y: e.clientY });
-  }
-
-  const handleClick = (e) => {
-    e.stopPropagation();
-    setShowBtn(false);
-
     setText(selectedText);
-    if (!showBox) {
-      setShowBox(true);
-    }
-  };
+    setShowBox(true);
+  }, []);
 
   useEffect(() => {
+    async function handleMouseup(e) {
+      await sleep(10);
+
+      const selectedText = window.getSelection()?.toString()?.trim() || "";
+      setSelText(selectedText);
+      if (!selectedText) {
+        setShowBtn(false);
+        return;
+      }
+
+      !tranboxSetting.hideTranBtn && setShowBtn(true);
+      setPosition({ x: e.clientX, y: e.clientY });
+    }
+
     window.addEventListener("mouseup", handleMouseup);
     return () => {
       window.removeEventListener("mouseup", handleMouseup);
     };
-  }, []);
+  }, [tranboxSetting.hideTranBtn]);
 
   useEffect(() => {
     const clearShortcut = shortcutRegister(
@@ -58,7 +70,25 @@ export default function Slection({ tranboxSetting, transApis }) {
     return () => {
       clearShortcut();
     };
-  }, [tranboxSetting.tranboxShortcut, setShowBox]);
+  }, [tranboxSetting.tranboxShortcut]);
+
+  useEffect(() => {
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.transelShortcut || DEFAULT_TRANSEL_SHORTCUT,
+      handleTranSelected
+    );
+
+    return () => {
+      clearShortcut();
+    };
+  }, [tranboxSetting.transelShortcut, handleTranSelected]);
+
+  useEffect(() => {
+    window.addEventListener(MSG_TRANSLATE_SELECTED, handleTranSelected);
+    return () => {
+      window.removeEventListener(MSG_TRANSLATE_SELECTED, handleTranSelected);
+    };
+  }, [handleTranSelected]);
 
   return (
     <>