add copy button to tranbox

src/views/Selection/CopyBtn.js

@@ -0,0 +1,35 @@
+import IconButton from "@mui/material/IconButton";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import LibraryAddCheckIcon from "@mui/icons-material/LibraryAddCheck";
+import { useState } from "react";
+
+export default function CopyBtn({ text }) {
+  const [copied, setCopied] = useState(false);
+  const handleClick = (e) => {
+    e.stopPropagation();
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      setCopied(false);
+    }, 500);
+  };
+  return (
+    <IconButton
+      size="small"
+      sx={{
+        opacity: 0.5,
+        "&:hover": {
+          opacity: 1,
+        },
+      }}
+      onClick={handleClick}
+    >
+      {copied ? (
+        <LibraryAddCheckIcon fontSize="inherit" />
+      ) : (
+        <ContentCopyIcon fontSize="inherit" />
+      )}
+    </IconButton>
+  );
+}

src/views/Selection/TranBox.js

@@ -8,10 +8,13 @@ import MenuItem from "@mui/material/MenuItem";
 import Grid from "@mui/material/Grid";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import DoneIcon from "@mui/icons-material/Done";
 import { useI18n } from "../../hooks/I18n";
 import { OPT_TRANS_ALL, OPT_LANGS_FROM, OPT_LANGS_TO } from "../../config";
 import { useState, useRef } from "react";
 import TranCont from "./TranCont";
+import CopyBtn from "./CopyBtn";
 
 function TranForm({ text, setText, tranboxSetting, transApis }) {
   const i18n = useI18n();
@@ -113,6 +116,31 @@ function TranForm({ text, setText, tranboxSetting, transApis }) {
             setEditMode(false);
             setText(editText.trim());
           }}
+          InputProps={{
+            endAdornment: (
+              <Stack
+                direction="row"
+                sx={{
+                  position: "absolute",
+                  right: 0,
+                  top: 0,
+                }}
+              >
+                {editMode ? (
+                  <IconButton
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                  >
+                    <DoneIcon fontSize="inherit" />
+                  </IconButton>
+                ) : (
+                  <CopyBtn text={text} />
+                )}
+              </Stack>
+            ),
+          }}
         />
       </Box>
 

src/views/Selection/TranCont.js

@@ -9,6 +9,7 @@ import { DEFAULT_TRANS_APIS, OPT_TRANS_BAIDU } from "../../config";
 import { useEffect, useState } from "react";
 import { apiTranslate } from "../../apis";
 import { isValidWord } from "../../libs/utils";
+import CopyBtn from "./CopyBtn";
 
 const exchangeMap = {
   word_third: "第三人称单数",
@@ -118,9 +119,24 @@ export default function TranCont({
       <Box>
         <TextField
           label={i18n("translated_text")}
+          // disabled
           fullWidth
           multiline
           value={trText}
+          InputProps={{
+            endAdornment: (
+              <Stack
+                direction="row"
+                sx={{
+                  position: "absolute",
+                  right: 0,
+                  top: 0,
+                }}
+              >
+                <CopyBtn text={trText} />
+              </Stack>
+            ),
+          }}
         />
       </Box>
 

src/views/Selection/index.js

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import TranBtn from "./Tranbtn";
-import TranBox from "./Tranbox";
+import TranBtn from "./TranBtn";
+import TranBox from "./TranBox";
 import { shortcutRegister } from "../../libs/shortcut";
 
 export default function Slection({ tranboxSetting, transApis }) {