tranbox...

src/views/Selection/index.js

@@ -0,0 +1,54 @@
+import { useState, useEffect } from "react";
+import TranBtn from "./Tranbtn";
+import TranBox from "./Tranbox";
+
+export default function Slection({ tranboxSetting }) {
+  const [showBox, setShowBox] = useState(false);
+  const [showBtn, setShowBtn] = useState(false);
+  const [text, setText] = useState("");
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+
+  console.log("tranboxSetting", tranboxSetting);
+
+  function handleMouseup(e) {
+    const text = window.getSelection()?.toString()?.trim() || "";
+    setPosition({ x: e.clientX, y: e.clientY });
+    setText(text);
+    setShowBtn(!!text);
+  }
+
+  const handleClick = (e) => {
+    e.stopPropagation();
+    setShowBtn(false);
+    if (!!text) {
+      setShowBox(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("mouseup", handleMouseup);
+    return () => {
+      window.removeEventListener("mouseup", handleMouseup);
+    };
+  }, []);
+
+  return (
+    <>
+      {showBox && (
+        <TranBox
+          position={position}
+          tranboxSetting={tranboxSetting}
+          setShowBox={setShowBox}
+        />
+      )}
+
+      {showBtn && (
+        <TranBtn
+          position={position}
+          tranboxSetting={tranboxSetting}
+          onClick={handleClick}
+        />
+      )}
+    </>
+  );
+}