1

src/pages/components/CodeEditor/index.tsx

@@ -2,7 +2,7 @@ import Cache from "@App/app/cache";
 import { LinterWorker } from "@App/pkg/utils/monaco-editor";
 import { useAppSelector } from "@App/pages/store/hooks";
 import { editor, Range } from "monaco-editor";
-import React, { useEffect, useImperativeHandle, useState } from "react";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 
 type Props = {
   className?: string;
@@ -18,60 +18,59 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.ICodeEditor |
 ) => {
   const settings = useAppSelector((state) => state.setting);
   const [monacoEditor, setEditor] = useState<editor.ICodeEditor>();
+  const div = useRef<HTMLDivElement>(null);
   useImperativeHandle(ref, () => ({
     editor: monacoEditor,
   }));
   useEffect(() => {
-    if (diffCode === undefined || code === undefined) {
+    if (diffCode === undefined || code === undefined || !div.current) {
       return () => {};
     }
     let edit: editor.IStandaloneDiffEditor | editor.IStandaloneCodeEditor;
+    const inlineDiv = document.getElementById(id) as HTMLDivElement;
     // @ts-ignore
-    const ts = window.tsUrl ? 0 : 200;
-    setTimeout(() => {
-      const div = document.getElementById(id) as HTMLDivElement;
-      if (diffCode) {
-        edit = editor.createDiffEditor(div, {
-          enableSplitViewResizing: false,
-          renderSideBySide: false,
-          folding: true,
-          foldingStrategy: "indentation",
-          automaticLayout: true,
-          overviewRulerBorder: false,
-          scrollBeyondLastLine: false,
-          readOnly: true,
-          diffWordWrap: "off",
-          glyphMargin: true,
-        });
-        edit.setModel({
-          original: editor.createModel(diffCode, "javascript"),
-          modified: editor.createModel(code, "javascript"),
-        });
-      } else {
-        edit = editor.create(div, {
-          language: "javascript",
-          theme: document.body.getAttribute("arco-theme") === "dark" ? "vs-dark" : "vs",
-          folding: true,
-          foldingStrategy: "indentation",
-          automaticLayout: true,
-          overviewRulerBorder: false,
-          scrollBeyondLastLine: false,
-          readOnly: !editable,
-          glyphMargin: true,
-        });
-        edit.setValue(code);
+    if (diffCode) {
+      edit = editor.createDiffEditor(inlineDiv, {
+        enableSplitViewResizing: false,
+        renderSideBySide: false,
+        folding: true,
+        foldingStrategy: "indentation",
+        automaticLayout: true,
+        overviewRulerBorder: false,
+        scrollBeyondLastLine: false,
+        readOnly: true,
+        diffWordWrap: "off",
+        glyphMargin: true,
+      });
+      edit.setModel({
+        original: editor.createModel(diffCode, "javascript"),
+        modified: editor.createModel(code, "javascript"),
+      });
+    } else {
+      edit = editor.create(inlineDiv, {
+        language: "javascript",
+        theme: document.body.getAttribute("arco-theme") === "dark" ? "vs-dark" : "vs",
+        folding: true,
+        foldingStrategy: "indentation",
+        automaticLayout: true,
+        overviewRulerBorder: false,
+        scrollBeyondLastLine: false,
+        readOnly: !editable,
+        glyphMargin: true,
+      });
+      edit.setValue(code);
 
-        setEditor(edit);
-      }
-    }, ts);
+      setEditor(edit);
+    }
     return () => {
       if (edit) {
         edit.dispose();
       }
     };
-  }, [code, diffCode, editable, id]);
+  }, [div, code, diffCode, editable, id]);
 
   useEffect(() => {
+    return () => {};
     if (!settings.eslint.enable) {
       return () => {};
     }
@@ -218,6 +217,7 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.ICodeEditor |
         overflow: "hidden",
       }}
       className={className}
+      ref={div}
     />
   );
 };

src/pages/options/main.tsx

@@ -12,9 +12,11 @@ import migrate from "@App/app/migrate.ts";
 import LoggerCore from "@App/app/logger/core.ts";
 import { LoggerDAO } from "@App/app/repo/logger.ts";
 import DBWriter from "@App/app/logger/db_writer.ts";
+import registerEditor from "@App/pkg/utils/monaco-editor.ts";
 
 // 初始化数据库
 migrate();
+registerEditor();
 // 初始化日志组件
 const loggerCore = new LoggerCore({
   writer: new DBWriter(new LoggerDAO()),

src/pages/options/routes/script/ScriptEditor.tsx

@@ -1,4 +1,4 @@
-import { Script, ScriptCodeDAO, ScriptDAO } from "@App/app/repo/scripts";
+import { Script, ScriptAndCode, ScriptCodeDAO, ScriptDAO } from "@App/app/repo/scripts";
 import CodeEditor from "@App/pages/components/CodeEditor";
 import React, { useEffect, useRef, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
@@ -30,7 +30,7 @@ type HotKey = {
 
 const Editor: React.FC<{
   id: string;
-  script: Script;
+  script: ScriptAndCode;
   hotKeys: HotKey[];
   callbackEditor: (e: editor.IStandaloneCodeEditor) => void;
   onChange: (code: string) => void;
@@ -41,11 +41,9 @@ const Editor: React.FC<{
   ScriptMap.set(script.uuid, script);
   useEffect(() => {
     if (!codeEditor.current || !codeEditor.current.editor) {
-      setTimeout(() => {
-        setInit(true);
-      }, 200);
       return () => {};
     }
+    console.log(codeEditor);
     // 初始化editor时将Script的uuid绑定到editor上
     // @ts-ignore
     if (!codeEditor.current.editor.uuid) {
@@ -72,7 +70,7 @@ const Editor: React.FC<{
     });
     callbackEditor(codeEditor.current.editor);
     return () => {};
-  }, [init]);
+  }, []);
 
   return <CodeEditor id={id} ref={codeEditor} code={script.code} diffCode="" editable />;
 };
@@ -150,8 +148,7 @@ function ScriptEditor() {
   const [visible, setVisible] = useState<{ [key: string]: boolean }>({});
   const [editors, setEditors] = useState<
     {
-      script: Script;
-      code: string;
+      script: ScriptAndCode;
       active: boolean;
       hotKeys: HotKey[];
       editor?: editor.IStandaloneCodeEditor;
@@ -378,7 +375,6 @@ function ScriptEditor() {
                   return prev.map((item) => {
                     if (item.script.uuid === scripts[i].uuid) {
                       item.active = true;
-                      item.code = code!.code;
                     } else {
                       item.active = false;
                     }
@@ -386,8 +382,7 @@ function ScriptEditor() {
                   });
                 }
                 prev.push({
-                  script: scripts[i],
-                  code: code!.code,
+                  script: Object.assign(scripts[i], code),
                   active: true,
                   hotKeys,
                   isChanged: false,
@@ -870,7 +865,7 @@ function ScriptEditor() {
                       });
                     }}
                     onChange={(code) => {
-                      const isChanged = !(item.code === code);
+                      const isChanged = !(item.script.code === code);
                       if (isChanged !== item.isChanged) {
                         setEditors((prev) => {
                           prev.forEach((v) => {