✨ 增加自定义编辑器配置和编辑器类型定义 (#708)

* wip: 自定义编辑器支持

* ✨ 增加编辑器配置和编辑器类型定义

* 修改注释

* 通过单元测试

Author: CodFrm

rspack.config.ts

@@ -108,11 +108,6 @@ export default defineConfig({
           },
         ],
       },
-      {
-        type: "asset/source",
-        test: /\.d\.ts$/,
-        exclude: /node_modules/,
-      },
       {
         type: "asset/source",
         test: /\.tpl$/,

src/locales/ach-UG/translation.json

@@ -460,5 +460,16 @@
     "all": "crwdns10812:0crwdne10812:0",
     "normal-tabs": "crwdns10814:0crwdne10814:0",
     "incognito-tabs": "crwdns10816:0crwdne10816:0"
-  }
+  },
+  "editor_config": "crwdns10818:0crwdne10818:0",
+  "editor_config_description": "crwdns10820:0crwdne10820:0",
+  "editor_type_definition": "crwdns10822:0crwdne10822:0",
+  "editor_type_definition_description": "crwdns10824:0crwdne10824:0",
+  "eslint_rules_reset": "crwdns10826:0crwdne10826:0",
+  "eslint_rules_saved": "crwdns10828:0crwdne10828:0",
+  "editor_config_reset": "crwdns10830:0crwdne10830:0",
+  "editor_config_saved": "crwdns10832:0crwdne10832:0",
+  "editor_config_format_error": "crwdns10834:0crwdne10834:0",
+  "editor_type_definition_reset": "crwdns10836:0crwdne10836:0",
+  "editor_type_definition_saved": "crwdns10838:0crwdne10838:0"
 }

src/locales/en-US/translation.json

@@ -460,5 +460,16 @@
     "all": "All",
     "normal-tabs": "Normal tags",
     "incognito-tabs": "Incognito tags"
-  }
+  },
+  "editor_config": "Editor Configuration",
+  "editor_config_description": "You can refer to the compilerOptions in <Link href=\"https://code.visualstudio.com/docs/languages/jsconfig\">jsconfig.js</Link> for configuration",
+  "editor_type_definition": "Editor Type Definition",
+  "editor_type_definition_description": "You can customize your own type definitions, and the script editor will automatically load these type definitions",
+  "eslint_rules_reset": "ESLint Rules Reset",
+  "eslint_rules_saved": "ESLint Rules Saved",
+  "editor_config_reset": "Editor Configuration Reset",
+  "editor_config_saved": "Editor Configuration Saved",
+  "editor_config_format_error": "Editor Configuration Format Error",
+  "editor_type_definition_reset": "Editor Type Definition Reset",
+  "editor_type_definition_saved": "Editor Type Definition Saved"
 }

src/locales/zh-CN/translation.json

@@ -460,5 +460,16 @@
     "all": "所有标签",
     "normal-tabs": "普通标签",
     "incognito-tabs": "隐身标签"
-  }
+  },
+  "editor_config": "",
+  "editor_config_description": "",
+  "editor_type_definition": "",
+  "editor_type_definition_description": "",
+  "eslint_rules_reset": "",
+  "eslint_rules_saved": "",
+  "editor_config_reset": "",
+  "editor_config_saved": "",
+  "editor_config_format_error": "",
+  "editor_type_definition_reset": "",
+  "editor_type_definition_saved": ""
 }

src/pages/components/CodeEditor/index.tsx

@@ -1,7 +1,7 @@
-import { LinterWorker } from "@App/pkg/utils/monaco-editor";
 import { editor, Range } from "monaco-editor";
 import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { globalCache, systemConfig } from "@App/pages/store/global";
+import { LinterWorker } from "@App/pkg/utils/monaco-editor";
 
 type Props = {
   className?: string;

src/pages/components/CustomTrans/index.tsx

@@ -4,8 +4,9 @@ import { useTranslation } from "react-i18next";
 
 // 因为i18n的Trans组件打包后出现问题，所以自己实现一个
 export const CustomTrans: React.FC<{
+  className?: string;
   i18nKey: string;
-}> = ({ i18nKey }) => {
+}> = ({ className, i18nKey }) => {
   const { t } = useTranslation();
   const children: (JSX.Element | string)[] = [];
   let content = t(i18nKey);
@@ -39,7 +40,7 @@ export const CustomTrans: React.FC<{
     }
   }
 
-  return <div>{children}</div>;
+  return <div className={className}>{children}</div>;
 };
 
 export default CustomTrans;

src/pages/options/main.tsx

@@ -11,7 +11,7 @@ import "./index.css";
 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";
+import registerEditor from "@App/pkg/utils/monaco-editor";
 import storeSubscribe from "../store/subscribe.ts";
 import migrate from "@App/app/migrate.ts";
 

src/pages/options/routes/Setting.tsx

@@ -14,6 +14,7 @@ import FileSystemFactory from "@Packages/filesystem/factory";
 import FileSystemParams from "@App/pages/components/FileSystemParams";
 import { blackListSelfCheck } from "@App/pkg/utils/match";
 import { obtainBlackList } from "@App/pkg/utils/utils";
+import CustomTrans from "@App/pages/components/CustomTrans";
 
 function Setting() {
   const [syncDelete, setSyncDelete] = useState<boolean>();
@@ -29,6 +30,8 @@ function Setting() {
   const [updateDisableScript, setUpdateDisableScript] = useState(false);
   const [silenceUpdateScript, setSilenceUpdateScript] = useState(false);
   const [enableEslint, setEnableEslint] = useState(false);
+  const [editorConfig, setEditorConfig] = useState("");
+  const [editorTypeDefinition, setEditorTypeDefinition] = useState("");
   const [eslintConfig, setEslintConfig] = useState("");
   const [blacklist, setBlacklist] = useState<string>("");
   const [badgeNumberType, setBadgeNumberType] = useState<"none" | "run_count" | "script_count">("run_count");
@@ -67,6 +70,8 @@ function Setting() {
         systemConfig.getBadgeBackgroundColor(),
         systemConfig.getBadgeTextColor(),
         systemConfig.getScriptMenuDisplayType(),
+        systemConfig.getEditorConfig(),
+        systemConfig.getEditorTypeDefinition(),
       ]).then(
         ([
           cloudSync,
@@ -82,6 +87,8 @@ function Setting() {
           badgeBackgroundColor,
           badgeTextColor,
           scriptMenuDisplayType,
+          editorConfig,
+          editorTypeDefinition,
         ]) => {
           setSyncDelete(cloudSync.syncDelete);
           setSyncScriptStatus(cloudSync.syncStatus);
@@ -100,6 +107,8 @@ function Setting() {
           setBadgeBackgroundColor(badgeBackgroundColor);
           setBadgeTextColor(badgeTextColor);
           setScriptMenuDisplayType(scriptMenuDisplayType);
+          setEditorConfig(editorConfig);
+          setEditorTypeDefinition(editorTypeDefinition);
         }
       );
     };
@@ -445,14 +454,19 @@ function Setting() {
                 onChange={(v) => {
                   setEslintConfig(v);
                 }}
-                onBlur={(v) => {
+                onBlur={() => {
                   prettier
                     .format(eslintConfig, {
                       parser: "json",
                       plugins: [prettierPluginEstree, babel],
                     })
-                    .then(() => {
-                      systemConfig.setEslintConfig(v.target.value);
+                    .then((value) => {
+                      if (value === "") {
+                        Message.success(t("eslint_rules_reset"));
+                      } else {
+                        Message.success(t("eslint_rules_saved"));
+                      }
+                      systemConfig.setEslintConfig(value);
                     })
                     .catch((e) => {
                       Message.error(`${t("eslint_config_format_error")}: ${JSON.stringify(Logger.E(e))}`);
@@ -461,6 +475,74 @@ function Setting() {
               />
             </div>
           )}
+          <div>
+            <div className="flex items-start justify-between mb-3">
+              <span className="font-medium min-w-20">{t("editor_config")}</span>
+              <CustomTrans
+                className="text-xs max-w-80 text-right ml-6 flex-shrink-0"
+                i18nKey="editor_config_description"
+              />
+            </div>
+            <Input.TextArea
+              placeholder={t("editor_config")!}
+              autoSize={{
+                minRows: 4,
+                maxRows: 8,
+              }}
+              value={editorConfig}
+              onChange={(v) => {
+                setEditorConfig(v);
+              }}
+              onBlur={() => {
+                prettier
+                  .format(editorConfig, {
+                    parser: "json",
+                    plugins: [prettierPluginEstree, babel],
+                  })
+                  .then((value) => {
+                    if (value === "") {
+                      Message.success(t("editor_config_reset"));
+                    } else {
+                      Message.success(t("editor_config_saved"));
+                    }
+                    systemConfig.setEditorConfig(value);
+                  })
+                  .catch((e) => {
+                    Message.error(`${t("editor_config_format_error")}: ${JSON.stringify(Logger.E(e))}`);
+                  });
+              }}
+            />
+          </div>
+          <div>
+            <div className="flex items-start justify-between mb-3">
+              <span className="font-medium min-w-20">{t("editor_type_definition")}</span>
+              <span
+                className="text-xs max-w-100 text-right ml-6 flex-shrink-0"
+                dangerouslySetInnerHTML={{
+                  __html: t("editor_type_definition_description"),
+                }}
+              ></span>
+            </div>
+            <Input.TextArea
+              placeholder={t("editor_type_definition")!}
+              autoSize={{
+                minRows: 4,
+                maxRows: 8,
+              }}
+              value={editorTypeDefinition}
+              onChange={(v) => {
+                setEditorTypeDefinition(v);
+              }}
+              onBlur={() => {
+                if (editorTypeDefinition === "") {
+                  Message.success(t("editor_type_definition_reset"));
+                } else {
+                  Message.success(t("editor_type_definition_saved"));
+                }
+                systemConfig.setEditorTypeDefinition(editorTypeDefinition);
+              }}
+            />
+          </div>
         </Space>
       </Card>
     </Space>

src/pkg/config/config.ts

@@ -1,10 +1,11 @@
-import { Message } from "@arco-design/web-react";
 import ChromeStorage from "./chrome_storage";
 import { defaultConfig } from "../../../packages/eslint/linter-config";
+import { defaultConfig as editorDefaultConfig } from "@App/pkg/utils/monaco-editor/config";
 import type { FileSystemType } from "@Packages/filesystem/factory";
 import type { MessageQueue, TKeyValue } from "@Packages/message/message_queue";
 import { changeLanguage, matchLanguage } from "@App/locales/locales";
 import { ExtVersion } from "@App/app/const";
+import defaultTypeDefinition from "@App/template/scriptcat.d.tpl";
 
 export const SystemConfigChange = "systemConfigChange";
 
@@ -186,16 +187,37 @@ export class SystemConfig {
   setEslintConfig(v: string) {
     if (v === "") {
       this.set("eslint_config", undefined);
-      Message.success("ESLint规则已重置");
       return;
     }
-    try {
-      JSON.parse(v);
-      this.set("eslint_config", v);
-      Message.success("ESLint规则已保存");
-    } catch (err: any) {
-      Message.error(err.toString());
+    JSON.parse(v);
+    return this.set("eslint_config", v);
+  }
+
+  getEditorConfig() {
+    return this.get<string>("editor_config", editorDefaultConfig);
+  }
+
+  setEditorConfig(v: string) {
+    if (v === "") {
+      this.set("editor_config", undefined);
+      return;
+    }
+    JSON.parse(v);
+    return this.set("editor_config", v);
+  }
+
+  // 获取typescript类型定义
+  getEditorTypeDefinition() {
+    return localStorage.getItem("editor_type_definition") || defaultTypeDefinition;
+  }
+
+  // 由于内容过大，只能存储到localStorage中
+  setEditorTypeDefinition(v: string) {
+    if (v === "") {
+      delete localStorage["editor_type_definition"];
+      return;
     }
+    localStorage.setItem("editor_type_definition", v);
   }
 
   // 日志清理周期

src/pkg/utils/monaco-editor/config.ts

@@ -0,0 +1,9 @@
+import type { languages } from "monaco-editor";
+
+const config = {
+  noSemanticValidation: true,
+  noSyntaxValidation: false,
+  onlyVisible: false,
+} as languages.typescript.CompilerOptions;
+
+export const defaultConfig = JSON.stringify(config, null, 2);