feat: add playground

src/views/Options/Navigator.js

@@ -14,7 +14,7 @@ import ApiIcon from "@mui/icons-material/Api";
 import InputIcon from "@mui/icons-material/Input";
 import SelectAllIcon from "@mui/icons-material/SelectAll";
 import EventNoteIcon from "@mui/icons-material/EventNote";
-import MouseIcon from '@mui/icons-material/Mouse';
+import MouseIcon from "@mui/icons-material/Mouse";
 
 function LinkItem({ label, url, icon }) {
   const match = useMatch(url);
@@ -77,6 +77,12 @@ export default function Navigator(props) {
       url: "/words",
       icon: <EventNoteIcon />,
     },
+    {
+      id: "playground",
+      label: "Playground",
+      url: "/playground",
+      icon: <EventNoteIcon />,
+    },
     { id: "about", label: i18n("about"), url: "/about", icon: <InfoIcon /> },
   ];
   return (

src/views/Options/Playground.js

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import TranForm from "../Selection/TranForm";
+import { DEFAULT_SETTING, DEFAULT_TRANBOX_SETTING } from "../../config";
+import { useSetting } from "../../hooks/Setting";
+
+export default function Playgound() {
+  const [text, setText] = useState("");
+  const { setting } = useSetting();
+  const { transApis, langDetector, tranboxSetting } =
+    setting || DEFAULT_SETTING;
+  const { apiSlugs, fromLang, toLang, toLang2, enDict } =
+    tranboxSetting || DEFAULT_TRANBOX_SETTING;
+  return (
+    <TranForm
+      text={text}
+      setText={setText}
+      apiSlugs={apiSlugs}
+      fromLang={fromLang}
+      toLang={toLang}
+      toLang2={toLang2}
+      transApis={transApis}
+      simpleStyle={false}
+      langDetector={langDetector}
+      enDict={enDict}
+      isPlaygound={true}
+    />
+  );
+}

src/views/Options/Tranbox.js

@@ -10,6 +10,7 @@ import {
   OPT_TRANBOX_TRIGGER_CLICK,
   OPT_TRANBOX_TRIGGER_ALL,
   OPT_DICT_BAIDU,
+  OPT_DICT_ALL,
 } from "../../config";
 import ShortcutInput from "./ShortcutInput";
 import FormControlLabel from "@mui/material/FormControlLabel";
@@ -65,7 +66,7 @@ export default function Tranbox() {
     simpleStyle = false,
     followSelection = false,
     triggerMode = OPT_TRANBOX_TRIGGER_CLICK,
-    extStyles = "",
+    // extStyles = "",
     enDict = OPT_DICT_BAIDU,
   } = tranboxSetting;
 
@@ -153,7 +154,8 @@ export default function Tranbox() {
                 helperText={i18n("to_lang2_helper")}
                 onChange={handleChange}
               >
-                {[["none", "None"], ...OPT_LANGS_TO].map(([lang, name]) => (
+                <MenuItem value={"-"}>{i18n("disable")}</MenuItem>
+                {OPT_LANGS_TO.map(([lang, name]) => (
                   <MenuItem key={lang} value={lang}>
                     {name}
                   </MenuItem>
@@ -172,7 +174,11 @@ export default function Tranbox() {
                 onChange={handleChange}
               >
                 <MenuItem value={"-"}>{i18n("disable")}</MenuItem>
-                <MenuItem value={OPT_DICT_BAIDU}>{OPT_DICT_BAIDU}</MenuItem>
+                {OPT_DICT_ALL.map((item) => (
+                  <MenuItem value={item} key={item}>
+                    {item}
+                  </MenuItem>
+                ))}
               </TextField>
             </Grid>
             <Grid item xs={12} sm={12} md={6} lg={3}>
@@ -305,7 +311,7 @@ export default function Tranbox() {
           </Grid>
         </Box>
 
-        <TextField
+        {/* <TextField
           size="small"
           label={i18n("extend_styles")}
           name="extStyles"
@@ -313,7 +319,7 @@ export default function Tranbox() {
           onChange={handleChange}
           maxRows={10}
           multiline
-        />
+        /> */}
       </Stack>
     </Box>
   );

src/views/Options/index.js

@@ -21,6 +21,7 @@ import Apis from "./Apis";
 import InputSetting from "./InputSetting";
 import Tranbox from "./Tranbox";
 import FavWords from "./FavWords";
+import Playgound from "./Playground";
 import MouseHoverSetting from "./MouseHover";
 import Loading from "../../hooks/Loading";
 
@@ -111,6 +112,7 @@ export default function Options() {
                   <Route path="apis" element={<Apis />} />
                   <Route path="sync" element={<SyncSetting />} />
                   <Route path="words" element={<FavWords />} />
+                  <Route path="playground" element={<Playgound />} />
                   <Route path="about" element={<About />} />
                 </Route>
               </Routes>