Fix shortcuts in editor

Author: nab138

src/components/Menu/MenuBar.tsx

@@ -4,7 +4,11 @@ import ListItem from "@mui/joy/ListItem";
 import { useCallback, useEffect, useRef, useState } from "react";
 import MenuBarButton from "./MenuBarButton";
 import MenuGroup from "./MenuGroup";
-import { Shortcut, acceleratorPresssed } from "../../utilities/Shortcut";
+import {
+  Shortcut,
+  acceleratorPresssed,
+  acceleratorPresssedMonaco,
+} from "../../utilities/Shortcut";
 import CommandButton from "../CommandButton";
 import {
   Construction,
@@ -18,11 +22,13 @@ import { DeviceInfo, useIDE } from "../../utilities/IDEContext";
 import { useStore } from "../../utilities/StoreContext";
 import { useToast } from "react-toast-plus";
 import bar from "./MenuBarDefinition";
+import { IStandaloneCodeEditor } from "@codingame/monaco-vscode-api/vscode/vs/editor/standalone/browser/standaloneCodeEditor";
 
 export interface MenuBarProps {
   callbacks: Record<string, () => void>;
+  editor: IStandaloneCodeEditor | null;
 }
-export default function MenuBar({ callbacks }: MenuBarProps) {
+export default function MenuBar({ callbacks, editor }: MenuBarProps) {
   const menus = useRef<Array<HTMLButtonElement>>([]);
   const [menuIndex, setMenuIndex] = useState<null | number>(null);
 
@@ -36,7 +42,11 @@ export default function MenuBar({ callbacks }: MenuBarProps) {
   const { addToast } = useToast();
 
   useEffect(() => {
-    const items: { shortcut: Shortcut; callback: () => void }[] = [];
+    const items: {
+      shortcut: Shortcut;
+      callback: () => void;
+      ignoreShortcutInMonaco: boolean;
+    }[] = [];
 
     for (const menu of bar) {
       for (const group of menu.items) {
@@ -64,7 +74,6 @@ export default function MenuBar({ callbacks }: MenuBarProps) {
                 const element = document.getElementById(
                   item.componentId as string
                 );
-                console.log(element);
                 if (element) {
                   (element as HTMLButtonElement).click();
                 }
@@ -75,6 +84,7 @@ export default function MenuBar({ callbacks }: MenuBarProps) {
             items.push({
               shortcut,
               callback,
+              ignoreShortcutInMonaco: item.ignoreShortcutInMonaco ?? false,
             });
           }
         }
@@ -94,10 +104,23 @@ export default function MenuBar({ callbacks }: MenuBarProps) {
 
     document.addEventListener("keydown", handleGlobalKeyDown);
 
+    const monacoItems = items.filter((item) => !item.ignoreShortcutInMonaco);
+    let dispose = editor?.onKeyDown((event) => {
+      if (!acceleratorPresssedMonaco(event)) return;
+
+      for (const item of monacoItems) {
+        if (item.shortcut.pressedMonaco(event)) {
+          event.preventDefault();
+          item.callback();
+        }
+      }
+    });
+
     return () => {
       document.removeEventListener("keydown", handleGlobalKeyDown);
+      dispose?.dispose();
     };
-  }, [bar, callbacks]);
+  }, [bar, callbacks, editor]);
 
   const openNextMenu = () => {
     if (typeof menuIndex === "number") {

src/components/Menu/MenuBarDefinition.tsx

@@ -72,13 +72,15 @@ export default [
           {
             name: "Undo",
             shortcut: "Ctrl+Z",
+            ignoreShortcutInMonaco: true,
             callback: () => {
               alert("Not implemented yet :(");
             },
           },
           {
             name: "Redo",
             shortcut: "Ctrl+Shift+Z",
+            ignoreShortcutInMonaco: true,
             callback: () => {
               alert("Not implemented yet :(");
             },

src/components/Menu/MenuGroup.tsx

@@ -6,6 +6,7 @@ import { DeviceInfo } from "../../utilities/IDEContext";
 type BaseMenuItem = {
   name: string;
   shortcut?: string;
+  ignoreShortcutInMonaco?: boolean;
 };
 
 export type MenuItem = BaseMenuItem &

src/components/Tiles/Editor.tsx

@@ -50,6 +50,9 @@ export interface EditorProps {
   focusedFile: string | null;
   setSaveFile: (save: () => void) => void;
   openNewFile: (file: string) => void;
+  setEditorUpper: Dispatch<
+    SetStateAction<monaco.editor.IStandaloneCodeEditor | null>
+  >;
 }
 
 export default ({
@@ -58,6 +61,7 @@ export default ({
   setSaveFile,
   setOpenFiles,
   openNewFile,
+  setEditorUpper,
 }: EditorProps) => {
   const [tabs, setTabs] = useState<
     {
@@ -90,6 +94,7 @@ export default ({
 
   useEffect(() => {
     editorRef.current = editor;
+    setEditorUpper(editor);
   }, [editor]);
 
   useEffect(() => {

src/pages/IDE.tsx

@@ -24,6 +24,7 @@ import SwiftMenu from "../components/SwiftMenu";
 import { restartServer } from "../utilities/lsp-client";
 import BottomBar from "../components/Tiles/BottomBar";
 import { open as openFileDialog } from "@tauri-apps/plugin-dialog";
+import { IStandaloneCodeEditor } from "@codingame/monaco-vscode-api/vscode/vs/editor/standalone/browser/standaloneCodeEditor";
 
 export interface IDEProps {}
 
@@ -60,6 +61,7 @@ export default () => {
   const navigate = useNavigate();
   const [projectValidation, setProjectValidation] =
     useState<ProjectValidation | null>(null);
+  const [editor, setEditor] = useState<IStandaloneCodeEditor | null>(null);
 
   useEffect(() => {
     if (
@@ -163,7 +165,7 @@ export default () => {
 
   return (
     <div className="ide-container">
-      <MenuBar callbacks={callbacks} />
+      <MenuBar callbacks={callbacks} editor={editor} />
       <Splitter
         gutterTheme={theme === "dark" ? GutterTheme.Dark : GutterTheme.Light}
         direction={SplitDirection.Horizontal}
@@ -183,6 +185,7 @@ export default () => {
             setSaveFile={setSaveFile}
             setOpenFiles={setOpenFiles}
             openNewFile={openNewFile}
+            setEditorUpper={setEditor}
           />
           <BottomBar />
         </Splitter>

src/utilities/Shortcut.tsx

@@ -1,8 +1,11 @@
+import { IKeyboardEvent, KeyCode } from "monaco-editor";
+
 export type Accelerator = "ctrl" | "alt" | "shift" | "super";
 
 export class Shortcut {
   accelerators: Accelerator[];
   key: string;
+  monacoKey: KeyCode;
 
   ctrl = false;
   alt = false;
@@ -18,6 +21,9 @@ export class Shortcut {
       if (acc === "super") this.super = true;
     }
     this.key = key;
+    this.monacoKey =
+      KeyCode[`Key${key.toUpperCase()}` as keyof typeof KeyCode] ||
+      KeyCode[key.toUpperCase() as keyof typeof KeyCode];
   }
 
   static fromString(shortcut: string): Shortcut {
@@ -42,8 +48,22 @@ export class Shortcut {
       event.key.toLowerCase() === this.key
     );
   }
+
+  pressedMonaco(event: IKeyboardEvent): boolean {
+    return (
+      this.ctrl === event.ctrlKey &&
+      this.alt === event.altKey &&
+      this.shift === event.shiftKey &&
+      this.super === event.metaKey &&
+      event.keyCode === this.monacoKey
+    );
+  }
 }
 
 export function acceleratorPresssed(event: KeyboardEvent): boolean {
   return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
 }
+
+export function acceleratorPresssedMonaco(event: IKeyboardEvent): boolean {
+  return event.ctrlKey || event.altKey || event.shiftKey || event.metaKey;
+}