tranbox...

src/views/Selection/index.js

@@ -1,26 +1,38 @@
 import { useState, useEffect } from "react";
 import TranBtn from "./Tranbtn";
 import TranBox from "./Tranbox";
+import { shortcutRegister } from "../../libs/shortcut";
 
-export default function Slection({ tranboxSetting }) {
+export default function Slection({ tranboxSetting, transApis }) {
   const [showBox, setShowBox] = useState(false);
   const [showBtn, setShowBtn] = useState(false);
+  const [selectedText, setSelText] = useState("");
   const [text, setText] = useState("");
   const [position, setPosition] = useState({ x: 0, y: 0 });
-
-  console.log("tranboxSetting", tranboxSetting);
+  const [boxSize, setBoxSize] = useState({ w: 600, h: 400 });
+  const [boxPosition, setBoxPosition] = useState({
+    x: (window.innerWidth - 600) / 2,
+    y: (window.innerHeight - 400) / 2,
+  });
 
   function handleMouseup(e) {
-    const text = window.getSelection()?.toString()?.trim() || "";
+    const selectedText = window.getSelection()?.toString()?.trim() || "";
+    if (!selectedText) {
+      setShowBtn(false);
+      return;
+    }
+
+    setSelText(selectedText);
+    setShowBtn(true);
     setPosition({ x: e.clientX, y: e.clientY });
-    setText(text);
-    setShowBtn(!!text);
   }
 
   const handleClick = (e) => {
     e.stopPropagation();
     setShowBtn(false);
-    if (!!text) {
+
+    setText(selectedText);
+    if (!showBox) {
       setShowBox(true);
     }
   };
@@ -32,12 +44,31 @@ export default function Slection({ tranboxSetting }) {
     };
   }, []);
 
+  useEffect(() => {
+    const clearShortcut = shortcutRegister(
+      tranboxSetting.tranboxShortcut,
+      () => {
+        setShowBox((pre) => !pre);
+      }
+    );
+
+    return () => {
+      clearShortcut();
+    };
+  }, [tranboxSetting.tranboxShortcut, setShowBox]);
+
   return (
     <>
       {showBox && (
         <TranBox
-          position={position}
+          text={text}
+          setText={setText}
+          boxSize={boxSize}
+          setBoxSize={setBoxSize}
+          boxPosition={boxPosition}
+          setBoxPosition={setBoxPosition}
           tranboxSetting={tranboxSetting}
+          transApis={transApis}
           setShowBox={setShowBox}
         />
       )}