跟隨 MV3 的 scripteditor hotkey

Author: cyfung1031

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

@@ -1,6 +1,7 @@
+/* eslint-disable no-shadow */
 import { Script, ScriptDAO } from "@App/app/repo/scripts";
 import CodeEditor from "@App/pages/components/CodeEditor";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { editor, KeyCode, KeyMod } from "monaco-editor";
 import {
@@ -34,10 +35,9 @@ import { lazyScriptName } from "@App/pkg/config/config";
 const { Row } = Grid;
 const { Col } = Grid;
 
-// 声明一个Map存储Script
-const ScriptMap = new Map();
-
 type HotKey = {
+  id: string;
+  title: string;
   hotKey: number;
   action: (script: Script, codeEditor: editor.IStandaloneCodeEditor) => void;
 };
@@ -49,49 +49,67 @@ const Editor: React.FC<{
   callbackEditor: (e: editor.IStandaloneCodeEditor) => void;
   onChange: (code: string) => void;
 }> = ({ id, script, hotKeys, callbackEditor, onChange }) => {
-  const [init, setInit] = useState(false);
-  const codeEditor = useRef<{ editor: editor.IStandaloneCodeEditor }>(null);
-  // Script.uuid为key，Script为value，储存Script
-  ScriptMap.has(script.uuid) || ScriptMap.set(script.uuid, script);
+  const [node, setNode] = useState<{ editor: editor.IStandaloneCodeEditor }>();
+  const ref = useCallback<(node: { editor: editor.IStandaloneCodeEditor }) => void>(
+    (inlineNode) => {
+      if (inlineNode && inlineNode.editor && !node) {
+        setNode(inlineNode);
+      }
+    },
+    [node]
+  );
+
   useEffect(() => {
-    if (!codeEditor.current || !codeEditor.current.editor) {
-      setTimeout(() => {
-        setInit(true);
-      }, 200);
-      return () => {};
+    if (!node || !node.editor) {
+      return;
     }
-    // 初始化editor时将Script的uuid绑定到editor上
     // @ts-ignore
-    if (!codeEditor.current.editor.uuid) {
+    if (!node.editor.uuid) {
       // @ts-ignore
-      codeEditor.current.editor.uuid = script.uuid;
+      node.editor.uuid = script.uuid;
     }
     hotKeys.forEach((item) => {
-      codeEditor.current?.editor.addCommand(item.hotKey, () => {
-        // 获取当前激活的editor（通过editor._focusTracker._hasFocus判断editor激活状态 可能有更好的方法）
-        const activeEditor = editor
-          .getEditors()
-          // @ts-ignore
-          // eslint-disable-next-line no-underscore-dangle
-          .find((i) => i._focusTracker._hasFocus);
+      /*
+
+
+        hotKeys.forEach((item) => {
+          codeEditor.current?.editor.addCommand(item.hotKey, () => {
+            // 获取当前激活的editor（通过editor._focusTracker._hasFocus判断editor激活状态 可能有更好的方法）
+            const activeEditor = editor
+              .getEditors()
+              // @ts-ignore
+              // eslint-disable-next-line no-underscore-dangle
+              .find((i) => i._focusTracker._hasFocus);
 
-        // 仅在获取到激活的editor时，通过editor上绑定的uuid获取Script，并指定激活的editor执行快捷键action
-        activeEditor &&
+            // 仅在获取到激活的editor时，通过editor上绑定的uuid获取Script，并指定激活的editor执行快捷键action
+            activeEditor &&
+              // @ts-ignore
+              item.action(ScriptMap.get(activeEditor.uuid), activeEditor);
+          });
+        });
+        */
+      node.editor.addAction({
+        id: item.id,
+        label: item.title,
+        keybindings: [item.hotKey],
+        run(editor) {
           // @ts-ignore
-          item.action(ScriptMap.get(activeEditor.uuid), activeEditor);
+          item.action(script, editor);
+        },
       });
     });
-    codeEditor.current.editor.onKeyUp(() => {
-      onChange(codeEditor.current?.editor.getValue() || "");
+    node.editor.onKeyUp(() => {
+      onChange(node.editor.getValue() || "");
     });
-    callbackEditor(codeEditor.current.editor);
-    return () => {};
-  }, [init]);
+    callbackEditor(node.editor);
+    return node.editor.dispose.bind(node.editor);
+  }, [node?.editor]);
 
   return (
     <CodeEditor
+      key={id}
       id={id}
-      ref={codeEditor}
+      ref={ref}
       code={script.code}
       diffCode=""
       editable
@@ -104,6 +122,7 @@ type EditorMenu = {
   tooltip?: string;
   action?: (script: Script, e: editor.IStandaloneCodeEditor) => void;
   items?: {
+    id: string;
     title: string;
     tooltip?: string;
     hotKey?: number;
@@ -137,7 +156,7 @@ const emptyScript = async (template: string, hotKeys: any, target?: string) => {
                   chrome.storage.local.remove(["activeTabUrl"]);
                 } else {
                   chrome.storage.local.remove(["activeTabUrl"]);
-                  const pageUrl = result?.activeTabUrl?.url;
+                  const pageUrl = (result?.activeTabUrl as any)?.url;
                   if (pageUrl) {
                     try {
                       const { protocol, pathname, hostname } = new URL(pageUrl);
@@ -321,12 +340,14 @@ function ScriptEditor() {
       title: t("file"),
       items: [
         {
+          id: "save",
           title: t("save"),
           hotKey: KeyMod.CtrlCmd | KeyCode.KeyS,
           hotKeyString: "Ctrl+S",
           action: save,
         },
         {
+          id: "saveAs",
           title: t("save_as"),
           hotKey: KeyMod.CtrlCmd | KeyMod.Shift | KeyCode.KeyS,
           hotKeyString: "Ctrl+Shift+S",
@@ -338,7 +359,8 @@ function ScriptEditor() {
       title: t("run"),
       items: [
         {
-          title: t("debug"),
+          id: "run",
+          title: t("run"),
           hotKey: KeyMod.CtrlCmd | KeyCode.F5,
           hotKeyString: "Ctrl+F5",
           tooltip: t("only_background_scheduled_can_run"),
@@ -375,6 +397,7 @@ function ScriptEditor() {
       title: t("tools"),
       items: [
         {
+          id: "scriptStorage",
           title: t("script_storage"),
           tooltip: t("script_storage_tooltip"),
           action(script) {
@@ -384,6 +407,7 @@ function ScriptEditor() {
           },
         },
         {
+          id: "scriptResource",
           title: t("script_resource"),
           tooltip: t("script_resource_tooltip"),
           action(script) {
@@ -417,6 +441,8 @@ function ScriptEditor() {
       item.items.forEach((menuItem) => {
         if (menuItem.hotKey) {
           hotKeys.push({
+            id: menuItem.id,
+            title: menuItem.title,
             hotKey: menuItem.hotKey,
             action: menuItem.action,
           });