🐛 修复N个问题 (#710)

* ✨ 新增在编辑器对比页面自动隐藏未改变的代码

* 🐛 修复 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

* 🐛 修复 Warning: validateDOMNesting(...): <div> cannot appear as a child of <table>.

* 🐛 fix: 修复 Error: Could not find source file: 'inmemory://model/1'.

* ✨ feat: 新增部分metadata的悬停提示

* Update src/pkg/utils/monaco-editor/index.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: wangyizhi <i@xloli.top>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

src/pages/components/CodeEditor/index.tsx

@@ -45,6 +45,9 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.IStandaloneCod
     // @ts-ignore
     if (diffCode) {
       edit = editor.createDiffEditor(inlineDiv, {
+        hideUnchangedRegions: {
+          enabled: true,
+        },
         enableSplitViewResizing: false,
         renderSideBySide: false,
         folding: true,
@@ -77,9 +80,9 @@ const CodeEditor: React.ForwardRefRenderFunction<{ editor: editor.IStandaloneCod
       setEditor(edit);
     }
     return () => {
-      if (edit) {
-        edit.dispose();
-      }
+      // 目前会出现：Uncaught (in promise) Canceled: Canceled
+      // 问题追踪：https://github.com/microsoft/monaco-editor/issues/4702
+      edit?.dispose();
     };
   }, [div, code, diffCode, editable, id]);
 

src/pages/install/main.tsx

@@ -11,6 +11,9 @@ import "@arco-design/web-react/dist/css/arco.css";
 import "@App/locales/locales";
 import "@App/index.css";
 import "./index.css";
+import registerEditor from "@App/pkg/utils/monaco-editor";
+
+registerEditor();
 
 // 初始化日志组件
 const loggerCore = new LoggerCore({

src/pages/options/routes/ScriptList.tsx

@@ -162,7 +162,7 @@ const DragHandle = () => {
   );
 };
 
-const DraggableContainer = (props: any) => {
+const DraggableContainer = React.forwardRef((props: any, ref: any) => {
   const context = useContext(DraggableContext);
   if (!context) return <></>;
   const { sensors, dispatch, scriptList } = context;
@@ -171,6 +171,7 @@ const DraggableContainer = (props: any) => {
       sensors={sensors}
       collisionDetection={closestCenter}
       modifiers={[restrictToVerticalAxis]}
+      accessibility={{ container: document.body }}
       onDragEnd={(event: DragEndEvent) => {
         const { active, over } = event;
         if (!over) {
@@ -182,11 +183,12 @@ const DraggableContainer = (props: any) => {
       }}
     >
       <SortableContext items={scriptList.map((s) => ({ ...s, id: s.uuid }))} strategy={verticalListSortingStrategy}>
-        <tbody {...props} />
+        <tbody {...props} ref={ref} />
       </SortableContext>
     </DndContext>
   );
-};
+});
+DraggableContainer.displayName = "DraggableContainer";
 
 const EnableSwitch = React.memo(
   ({

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

@@ -4,6 +4,10 @@ const config = {
   noSemanticValidation: true,
   noSyntaxValidation: false,
   onlyVisible: false,
+  // 该配置用于修复 Error: Could not find source file: 'inmemory://model/1'.
+  // https://github.com/microsoft/monaco-editor/issues/1842
+  // https://github.com/suren-atoyan/monaco-react/issues/75#issuecomment-1890761086
+  allowNonTsExtensions: true,
 } as languages.typescript.CompilerOptions;
 
 export const defaultConfig = JSON.stringify(config, null, 2);

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

@@ -18,11 +18,37 @@ export default function registerEditor() {
   // 悬停提示
   const prompt: { [key: string]: any } = {
     name: "脚本名称",
-    description: "脚本描述",
-    namespace: "脚本命名空间",
+    copyright: "脚本的版权信息",
+    license: "脚本的开源协议",
     version: "脚本版本",
+    description: "脚本描述",
+    icon: "脚本图标",
+    iconURL: "脚本图标",
+    defaulticon: "脚本图标",
+    icon64: "64x64 大小的脚本图标",
+    icon64URL: "64x64 大小的脚本图标",
+    grant: "脚本特殊Api权限申请",
     author: "脚本作者",
+    "run-at":
+      "脚本的运行时间<br>`document-start`：在前端匹配到网址后,以最快的速度注入脚本到页面中<br>`document-end`：DOM 加载完成后注入脚本,此时页面脚本和图像等资源可能仍在加载<br>`document-idle`：所有内容加载完成后注入脚本<br>`document-body`：脚本只会在页面中有 body 元素时才会注入",
+    "run-in": "脚本注入的环境",
+    homepage: "脚本主页",
+    homepageURL: "脚本主页",
+    website: "脚本主页",
     background: "后台脚本",
+    include: "脚本匹配url运行的页面",
+    match: "脚本匹配url运行的页面",
+    exclude: "脚本匹配url不运行的页面",
+    connect: "获取网站的访问权限",
+    resource: "引入资源文件",
+    require: "引入外部 js 文件",
+    noframes: "表示脚本不运行在`<frame>`中",
+    definition: "ScriptCat特有功能：一个`.d.ts`文件的引用地址,能够自动补全编辑器的自动提示",
+    antifeature: "这是与脚本市场有关的，不受欢迎的功能需要加上此描述值",
+    updateURL: "脚本检查更新的url",
+    downloadURL: "脚本更新的下载地址",
+    supportURL: "支持站点，bug 反馈页面",
+    source: "脚本源码页",
     crontab: `定时脚本 crontab 参考（不适用于云端脚本）
     * * * * * * 每秒运行一次
     * * * * * 每分钟运行一次
@@ -41,7 +67,7 @@ export default function registerEditor() {
     provideHover: (model, position) => {
       return new Promise((resolve) => {
         const line = model.getLineContent(position.lineNumber);
-        const flag = /^\/\/\s*@(\w+?)(\s+(.*?)|)$/.exec(line);
+        const flag = /^\/\/\s*@([\w-]+?)(\s+(.*?)|)$/.exec(line);
         if (flag) {
           resolve({
             contents: [{ value: prompt[flag[1]], supportHtml: true }],
@@ -167,9 +193,11 @@ export default function registerEditor() {
   Promise.all([systemConfig.getEditorConfig(), systemConfig.getEditorTypeDefinition()]).then(
     ([editorConfig, typeDefinition]) => {
       // 设置编辑器设置
-      languages.typescript.javascriptDefaults.setCompilerOptions(
-        JSON.parse(editorConfig) as languages.typescript.CompilerOptions
-      );
+      const options = JSON.parse(editorConfig) as languages.typescript.CompilerOptions;
+      languages.typescript.javascriptDefaults.setCompilerOptions({
+        allowNonTsExtensions: true,
+        ...options,
+      });
       // 注册类型定义
       languages.typescript.javascriptDefaults.addExtraLib(typeDefinition, "scriptcat.d.ts");
     }