Migrate playground hulk hotkey bindings to alt+shift+h

Author: chownces

src/commons/editor/Editor.tsx

@@ -12,7 +12,6 @@ import { Chapter, Variant } from 'js-slang/dist/types';
 import React from 'react';
 import AceEditor, { IAceEditorProps, IEditorProps } from 'react-ace';
 import { IAceEditor } from 'react-ace/lib/types';
-import { HotKeys } from 'react-hotkeys';
 import { EditorBinding } from '../WorkspaceSettingsContext';
 import { getModeString, selectMode } from '../utils/AceHelper';
 import { objectEntries } from '../utils/TypeHelper';
@@ -327,11 +326,6 @@ const moveCursor = (editor: AceEditor['editor'], position: Position) => {
   editor.renderer.scrollCursorIntoView(position, 0.5);
 };
 
-/* Override handler, so does not trigger when focus is in editor */
-const handlers = {
-  goGreen: () => {}
-};
-
 const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
   const reactAceRef: React.MutableRefObject<AceEditor | null> = React.useRef(null);
   const [filePath, setFilePath] = React.useState<string | undefined>(undefined);
@@ -652,14 +646,11 @@ const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
   }, []);
 
   return (
-    <HotKeys
-      className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}
-      handlers={handlers}
-    >
+    <div className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}>
       <div className="row editor-react-ace" data-testid="Editor">
         <AceEditor {...aceEditorProps} ref={reactAceRef} />
       </div>
-    </HotKeys>
+    </div>
   );
 });
 

src/commons/repl/Repl.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import { parseError } from 'js-slang';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import React from 'react';
-import { HotKeys } from 'react-hotkeys';
 
 import { InterpreterOutput } from '../application/ApplicationTypes';
 import { ExternalLibraryName } from '../application/types/ExternalTypes';
@@ -52,12 +51,11 @@ const Repl: React.FC<ReplProps> = props => {
       <div className="repl-output-parent">
         {cards}
         {!props.inputHidden && (
-          <HotKeys
+          <div
             className={classNames('repl-input-parent', 'row', Classes.CARD, Classes.ELEVATION_0)}
-            handlers={handlers}
           >
             <ReplInput {...props} />
-          </HotKeys>
+          </div>
         )}
       </div>
     </div>
@@ -133,9 +131,4 @@ export const Output: React.FC<OutputProps> = props => {
   }
 };
 
-/* Override handler, so does not trigger when focus is in editor */
-const handlers = {
-  goGreen: () => {}
-};
-
 export default Repl;

src/commons/sourceRecorder/SourceRecorderEditor.tsx

@@ -8,7 +8,6 @@ import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import React from 'react';
 import AceEditor, { IAceEditorProps } from 'react-ace';
-import { HotKeys } from 'react-hotkeys';
 
 import {
   CodeDelta,
@@ -208,10 +207,7 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
 
   public render() {
     return (
-      <HotKeys
-        className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}
-        handlers={handlers}
-      >
+      <div className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}>
         <div className="row editor-react-ace">
           <AceEditor
             className="react-ace"
@@ -255,7 +251,7 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
             keyboardHandler={this.props.editorBinding}
           />
         </div>
-      </HotKeys>
+      </div>
     );
   }
 
@@ -326,9 +322,4 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
   };
 }
 
-/* Override handler, so does not trigger when focus is in editor */
-const handlers = {
-  goGreen: () => {}
-};
-
 export default SourcecastEditor;

src/pages/playground/Playground.tsx

@@ -1,13 +1,13 @@
 import { Classes } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
+import { HotkeyItem, useHotkeys } from '@mantine/hooks';
 import { Ace, Range } from 'ace-builds';
 import { FSModule } from 'browserfs/dist/node/core/FS';
 import classNames from 'classnames';
 import { Chapter, Variant } from 'js-slang/dist/types';
 import { isEqual } from 'lodash';
 import { decompressFromEncodedURIComponent } from 'lz-string';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { HotKeys } from 'react-hotkeys';
 import { useDispatch, useStore } from 'react-redux';
 import { useLocation, useNavigate } from 'react-router';
 import { AnyAction, Dispatch } from 'redux';
@@ -143,8 +143,6 @@ export type PlaygroundProps = {
   handleCloseEditor?: () => void;
 };
 
-const keyMap = { goGreen: 'h u l k' };
-
 export async function handleHash(
   hash: string,
   handlers: {
@@ -306,7 +304,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
   }
 
   const [lastEdit, setLastEdit] = useState(new Date());
-  const [isGreen, setIsGreen] = useState(false);
   const { selectedTab, setSelectedTab } = useSideContent(
     workspaceLocation,
     shouldAddDevice ? SideContentType.remoteExecution : SideContentType.introduction
@@ -320,6 +317,14 @@ const Playground: React.FC<PlaygroundProps> = props => {
     })
   );
 
+  // Playground hotkeys
+  const [isGreen, setIsGreen] = useState(false);
+  const playgroundHotkeyBindings: HotkeyItem[] = useMemo(
+    () => [['alt+shift+h', () => setIsGreen(!isGreen)]],
+    [isGreen, setIsGreen]
+  );
+  useHotkeys(playgroundHotkeyBindings);
+
   const remoteExecutionTab: SideContentTab = useMemo(
     () => makeRemoteExecutionTabFrom(deviceSecret, setDeviceSecret),
     [deviceSecret]
@@ -395,13 +400,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
     }
   }, [isMobileBreakpoint, selectedTab, setSelectedTab]);
 
-  const handlers = useMemo(
-    () => ({
-      goGreen: () => setIsGreen(!isGreen)
-    }),
-    [isGreen]
-  );
-
   const onEditorValueChange = React.useCallback(
     (editorTabIndex: number, newEditorValue: string) => {
       setLastEdit(new Date());
@@ -1051,13 +1049,9 @@ const Playground: React.FC<PlaygroundProps> = props => {
       <MobileWorkspace {...mobileWorkspaceProps} />
     </div>
   ) : (
-    <HotKeys
-      className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}
-      keyMap={keyMap}
-      handlers={handlers}
-    >
+    <div className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}>
       <Workspace {...workspaceProps} />
-    </HotKeys>
+    </div>
   );
 };