Fix editor

Author: vtm9

apps/codebattle/assets/js/__tests__/useEditor.test.ts

@@ -0,0 +1,47 @@
+import { act, renderHook } from '@testing-library/react';
+
+import useEditor from '../widgets/utils/useEditor';
+
+vi.mock('../widgets/utils/useCursorUpdates', () => ({ default: () => {} }));
+vi.mock('../widgets/utils/useEditorCursor', () => ({ default: () => {} }));
+vi.mock('../widgets/utils/useResizeListener', () => ({ default: () => {} }));
+
+describe('useEditor', () => {
+  it('uses the latest code check callback for Ctrl+Enter', () => {
+    const actions: Array<{ id: string; run: () => void }> = [];
+    const domNode = document.createElement('div');
+    const editor = {
+      addAction: vi.fn((action) => actions.push(action)),
+      focus: vi.fn(),
+      getDomNode: () => domNode,
+      getOptions: () => ({ readOnly: false }),
+      onDidChangeModelContent: vi.fn(),
+      updateOptions: vi.fn(),
+    };
+    const monaco = {
+      editor: { defineTheme: vi.fn() },
+      KeyCode: { Enter: 3, KEY_M: 4 },
+      KeyMod: { CtrlCmd: 1 },
+    };
+    const checkResult = vi.fn();
+
+    const { result, rerender } = renderHook(
+      ({ onCheck }: { onCheck?: () => void }) =>
+        useEditor({
+          allowClipboard: true,
+          checkResult: onCheck,
+          editable: true,
+        }),
+      { initialProps: { onCheck: undefined as (() => void) | undefined } },
+    );
+
+    act(() => result.current.handleEditorDidMount(editor, monaco));
+    rerender({ onCheck: checkResult });
+
+    const checkAction = actions.find(({ id }) => id === 'codebattle-check-keys');
+    act(() => checkAction?.run());
+
+    expect(checkAction).toBeDefined();
+    expect(checkResult).toHaveBeenCalledOnce();
+  });
+});

apps/codebattle/assets/js/widgets/utils/useEditor.ts

@@ -145,6 +145,13 @@ const useEditor = (props: UseEditorProps) => {
   const [editor, setEditor] = useState();
   const [monaco, setMonaco] = useState();
 
+  // Monaco registers keybindings only when the editor mounts. Keep the callback
+  // current when the game becomes active without recreating the editor action.
+  const checkResultRef = useRef(props.checkResult);
+  useEffect(() => {
+    checkResultRef.current = props.checkResult;
+  }, [props.checkResult]);
+
   // Keep the latest onTelemetryEvent in a ref so Monaco's mount-time listener
   // closure always invokes the current callback, not a stale (no-op) snapshot
   // captured before the gating state turned on.
@@ -199,15 +206,7 @@ const useEditor = (props: UseEditorProps) => {
 
     // currentMonaco.editor.setTheme('code-theme-dark');
 
-    const {
-      editable,
-      roomMode,
-      checkResult,
-      toggleMuteSound,
-      syntax,
-      gameStartTimeMs,
-      allowClipboard,
-    } = props;
+    const { editable, roomMode, toggleMuteSound, syntax, gameStartTimeMs, allowClipboard } = props;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const emitTelemetry = (payload: Record<string, any>) => {
@@ -414,23 +413,18 @@ const useEditor = (props: UseEditorProps) => {
     }
 
     // Codebattle action: Check on Ctrl+Enter
-    if (checkResult) {
-      currentEditor.addAction({
-        id: 'codebattle-check-keys',
-        label: 'Codebattle check start',
-        keybindings: [currentMonaco.KeyMod.CtrlCmd | currentMonaco.KeyCode.Enter],
-        run: () => {
-          if (!currentEditor.getOptions().readOnly) {
-            checkResult();
-          }
-        },
-      });
-    } else {
-      currentEditor.addCommand(
-        currentMonaco.KeyMod.CtrlCmd | currentMonaco.KeyCode.Enter,
-        () => null,
-      );
-    }
+    currentEditor.addAction({
+      id: 'codebattle-check-keys',
+      label: 'Codebattle check start',
+      keybindings: [currentMonaco.KeyMod.CtrlCmd | currentMonaco.KeyCode.Enter],
+      run: () => {
+        const currentCheckResult = checkResultRef.current;
+
+        if (!currentEditor.getOptions().readOnly && currentCheckResult) {
+          currentCheckResult();
+        }
+      },
+    });
 
     // Codebattle action: toggle sound on Ctrl+M
     currentEditor.addAction({