fix: code editor for json file (close AlistGo/alist#1165)

AlistGo · May 28, 2022 · edc8e29 · edc8e29
1 parent 3a73254
commit edc8e29
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 62 deletions.
diff --git a/src/pages/list/preview/codeeditor.tsx b/src/pages/list/preview/codeeditor.tsx
@@ -1,46 +1,14 @@
 // Integrating the ESM version of the Monaco Editor
 // https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
 
-// import * as monaco from 'monaco-editor';
-// self.MonacoEnvironment = {
-// 	getWorker: function (workerId, label) {
-// 		const getWorkerModule = (moduleUrl, label) => {
-// 			return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), {
-// 				name: label,
-// 				type: 'module'
-// 			});
-// 		};
-
-// 		switch (label) {
-// 			case 'json':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label);
-// 			case 'css':
-// 			case 'scss':
-// 			case 'less':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
-// 			case 'html':
-// 			case 'handlebars':
-// 			case 'razor':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
-// 			case 'typescript':
-// 			case 'javascript':
-// 				return getWorkerModule('/monaco-editor/esm/vs/language/typescript/ts.worker?worker', label);
-// 			default:
-// 				return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
-// 		}
-// 	}
-// };
-
 import Editor from "@monaco-editor/react";
 import {
   Box,
-  Select,
   Button,
   Flex,
   Spacer,
   useColorModeValue,
   useToast,
-  Heading,
 } from "@chakra-ui/react";
 import React from "react";
 import axios from "axios";
@@ -49,29 +17,27 @@ import { useTranslation } from "react-i18next";
 import useFileUrl from "../../../hooks/useFileUrl";
 import { FileProps } from "../context";
 import request from "../../../utils/public";
+import { File } from "../context";
 
 export const type = -1;
 export const exts = [];
 
-const CodeEditor = ({ file }: FileProps) => {
+export interface CodeEditorProps {
+  file: File;
+  content: string;
+  setContent: (content: string) => void;
+}
+
+const CodeEditor = ({ file, content, setContent }: CodeEditorProps) => {
   const theme = useColorModeValue("light", "dark");
   const { t } = useTranslation();
   const toast = useToast();
   const { pathname } = useLocation();
 
-  const [content, setContent] = React.useState<string | undefined>("");
-
-  let link = useFileUrl(true)(file);
-  const getContent = () => {
-    axios.get(link).then(async (resp) => {
-      setContent(resp.data);
-    });
-  };
-
   const handleSaveButton: React.MouseEventHandler = async () => {
     const folder = pathname.substring(0, pathname.lastIndexOf("/") || 1);
     const form = new FormData();
-    form.append("files", new Blob([content as string]), file.name);
+    form.append("files", new Blob([content]), file.name);
     form.append("path", folder);
     request
       .post("upload", form, {
@@ -89,9 +55,6 @@ const CodeEditor = ({ file }: FileProps) => {
         });
       });
   };
-  React.useEffect(() => {
-    getContent();
-  }, []);
 
   return (
     <Box>
@@ -100,7 +63,7 @@ const CodeEditor = ({ file }: FileProps) => {
         value={content}
         path={file.name}
         theme={theme === "light" ? "light" : "vs-dark"}
-        onChange={(value) => setContent(value)}
+        onChange={(value) => setContent(value ?? "")}
       />
       <Flex m="2">
         <Spacer />

diff --git a/src/pages/list/preview/markdown.tsx b/src/pages/list/preview/markdown.tsx
@@ -14,8 +14,7 @@ export const exts = [];
 
 const MarkdownPreview = ({ file, readme }: FileProps) => {
   const [content, setContent] = React.useState("");
-  const [srcDoc, setSrcDoc] = React.useState("");
-  const { getSetting,loggedIn } = useContext(IContext);
+  const { getSetting, loggedIn } = useContext(IContext);
   let link = useFileUrl(true)(file);
   const html = file.name.endsWith(".html");
   const [show, setShow] = React.useState("preview");
@@ -36,16 +35,7 @@ const MarkdownPreview = ({ file, readme }: FileProps) => {
           const decoder = new TextDecoder("gbk");
           res = decoder.decode(await blob.arrayBuffer());
         }
-        if (html) {
-          setSrcDoc(res);
-        }
-        if (file.name.endsWith(".md")) {
-          setContent(res);
-        } else {
-          setContent(
-            "```" + file.name.split(".").pop() + "\n" + res + "\n" + "```"
-          );
-        }
+        setContent(res);
       });
   };
   useEffect(() => {
@@ -89,7 +79,7 @@ const MarkdownPreview = ({ file, readme }: FileProps) => {
         </HStack>
         {show === "render" ? (
           <iframe
-            srcDoc={srcDoc}
+            srcDoc={content}
             style={{
               width: "100%",
               borderRadius: "0.75rem",
@@ -98,10 +88,19 @@ const MarkdownPreview = ({ file, readme }: FileProps) => {
             }}
           ></iframe>
         ) : show === "edit" ? (
-          <CodeEditor file={file} />
+          <CodeEditor content={content} setContent={setContent} file={file} />
         ) : (
           <Box className="markdown-body">
-            <Markdown>{content}</Markdown>
+            <Markdown>
+              {file.name.endsWith(".md")
+                ? content
+                : "```" +
+                  file.name.split(".").pop() +
+                  "\n" +
+                  content +
+                  "\n" +
+                  "```"}
+            </Markdown>
           </Box>
         )}
       </Box>