How To Display Programming Language Select Button #142

Activity

1. jaywcjlove commented on Feb 25, 2023

   

   jaywcjlove

   on Feb 25, 2023

   Member

   More actions

   import React, { useEffect, useState } from "react";
   import ReactDOM from "react-dom";
   import CodeEditor, { SelectionText } from "@uiw/react-textarea-code-editor";
   import "./index.css";
   import exts from "code-example/ext.json";
   
   const useFetch = (language) => {
     const [code, setCode] = useState("");
     const [loading, setLoading] = useState(false);
     const [lang, setLang] = useState(language);
     const [error, setError] = useState();
   
     useEffect(() => {
       setLoading(true);
       const fetchData = async () => {
         try {
           const codeStr = await import(`code-example/txt/sample.${language}.txt`);
           setCode(
             atob((codeStr.default || "").replace("data:text/plain;base64,", ""))
           );
   
           let str = language;
           if (/^(mysql|pgsql)$/.test(language)) {
             str = "sql";
           }
           if (/^(objective-c)$/.test(language)) {
             str = "objc";
           }
           if (/^(vue)$/.test(language)) {
             str = "html";
           }
           setLang(str);
           setLoading(false);
         } catch (error) {
           console.log(error);
           setLoading(false);
           setError(error);
           setCode("");
         }
       };
       fetchData();
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [language]);
   
     return { lang, loading, code, setCode, error };
   };
   
   const Loading = () => (
     <div
       style={{
         position: "fixed",
         top: 0,
         left: 0,
         background: "rgba(51, 51, 51, 0.62)",
         right: 0,
         bottom: 0,
         textAlign: "center",
         display: "flex",
         flexDirection: "column",
         justifyContent: "center",
         zIndex: 999,
         color: "white"
       }}
     >
       Loading...{" "}
     </div>
   );
   
   function App() {
     const textRef = React.useRef();
     const [language, setLanguage] = useState("jsx");
     const { loading, code, setCode } = useFetch(language);
     return (
       <div>
         <h3>Auto</h3>
         {loading ? <Loading /> : null}
         <CodeEditor
           value={code}
           ref={textRef}
           language="js"
           placeholder="Please enter JS code."
           onChange={(evn) => setCode(evn.target.value)}
           padding={15}
           style={{
             fontFamily:
               "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
             fontSize: 12
           }}
         />
         <select
           value={language}
           onChange={(evn) => setLanguage(evn.target.value)}
         >
           {exts.map((keyName, idx) => {
             if (/^diff/.test(keyName)) return null;
             return (
               <option key={idx} value={keyName}>
                 Language: {keyName}
               </option>
             );
           })}
         </select>
       </div>
     );
   }
   
   ReactDOM.render(<App />, document.getElementById("container"));

   @clarnx https://codesandbox.io/embed/react-textarea-code-editor-for-example-https-github-com-uiwjs-react-textarea-code-editor-issues-142-4svb4f?fontsize=14&hidenavigation=1&theme=dark