Skip to content

Commit b70fa5f

Browse files
chownceschownces
committed
Migrate playground hulk hotkey bindings to alt+shift+h
1 parent c0384ee commit b70fa5f

File tree

7 files changed

+19
-70
lines changed

7 files changed

+19
-70
lines changed

‎src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
220220
>
221221
<div
222222
class="Editor bp5-card bp5-elevation-0"
223-
tabindex="-1"
224223
>
225224
<div
226225
class="row editor-react-ace"
@@ -1200,7 +1199,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
12001199
>
12011200
<div
12021201
class="repl-input-parent row bp5-card bp5-elevation-0"
1203-
tabindex="-1"
12041202
>
12051203
<div
12061204
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"
@@ -1985,7 +1983,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
19851983
>
19861984
<div
19871985
class="repl-input-parent row bp5-card bp5-elevation-0"
1988-
tabindex="-1"
19891986
>
19901987
<div
19911988
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"
@@ -2318,7 +2315,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
23182315
>
23192316
<div
23202317
class="Editor bp5-card bp5-elevation-0"
2321-
tabindex="-1"
23222318
>
23232319
<div
23242320
class="row editor-react-ace"
@@ -2805,7 +2801,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
28052801
>
28062802
<div
28072803
class="repl-input-parent row bp5-card bp5-elevation-0"
2808-
tabindex="-1"
28092804
>
28102805
<div
28112806
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"
@@ -3120,7 +3115,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
31203115
>
31213116
<div
31223117
class="Editor bp5-card bp5-elevation-0"
3123-
tabindex="-1"
31243118
>
31253119
<div
31263120
class="row editor-react-ace"
@@ -3523,7 +3517,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
35233517
>
35243518
<div
35253519
class="repl-input-parent row bp5-card bp5-elevation-0"
3526-
tabindex="-1"
35273520
>
35283521
<div
35293522
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"
@@ -3862,7 +3855,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
38623855
>
38633856
<div
38643857
class="Editor bp5-card bp5-elevation-0"
3865-
tabindex="-1"
38663858
>
38673859
<div
38683860
class="row editor-react-ace"
@@ -4567,7 +4559,6 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
45674559
>
45684560
<div
45694561
class="repl-input-parent row bp5-card bp5-elevation-0"
4570-
tabindex="-1"
45714562
>
45724563
<div
45734564
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"

‎src/commons/editor/Editor.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { Chapter, Variant } from 'js-slang/dist/types';
1212
import React from 'react';
1313
import AceEditor, { IAceEditorProps, IEditorProps } from 'react-ace';
1414
import { IAceEditor } from 'react-ace/lib/types';
15-
import { HotKeys } from 'react-hotkeys';
1615
import { EditorBinding } from '../WorkspaceSettingsContext';
1716
import { getModeString, selectMode } from '../utils/AceHelper';
1817
import { objectEntries } from '../utils/TypeHelper';
@@ -327,11 +326,6 @@ const moveCursor = (editor: AceEditor['editor'], position: Position) => {
327326
editor.renderer.scrollCursorIntoView(position, 0.5);
328327
};
329328

330-
/* Override handler, so does not trigger when focus is in editor */
331-
const handlers = {
332-
goGreen: () => {}
333-
};
334-
335329
const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
336330
const reactAceRef: React.MutableRefObject<AceEditor | null> = React.useRef(null);
337331
const [filePath, setFilePath] = React.useState<string | undefined>(undefined);
@@ -652,14 +646,11 @@ const EditorBase = React.memo((props: EditorProps & LocalStateProps) => {
652646
}, []);
653647

654648
return (
655-
<HotKeys
656-
className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}
657-
handlers={handlers}
658-
>
649+
<div className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}>
659650
<div className="row editor-react-ace" data-testid="Editor">
660651
<AceEditor {...aceEditorProps} ref={reactAceRef} />
661652
</div>
662-
</HotKeys>
653+
</div>
663654
);
664655
});
665656

‎src/commons/repl/Repl.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import classNames from 'classnames';
44
import { parseError } from 'js-slang';
55
import { Chapter, Variant } from 'js-slang/dist/types';
66
import React from 'react';
7-
import { HotKeys } from 'react-hotkeys';
87

98
import { InterpreterOutput } from '../application/ApplicationTypes';
109
import { ExternalLibraryName } from '../application/types/ExternalTypes';
@@ -52,12 +51,11 @@ const Repl: React.FC<ReplProps> = props => {
5251
<div className="repl-output-parent">
5352
{cards}
5453
{!props.inputHidden && (
55-
<HotKeys
54+
<div
5655
className={classNames('repl-input-parent', 'row', Classes.CARD, Classes.ELEVATION_0)}
57-
handlers={handlers}
5856
>
5957
<ReplInput {...props} />
60-
</HotKeys>
58+
</div>
6159
)}
6260
</div>
6361
</div>
@@ -133,9 +131,4 @@ export const Output: React.FC<OutputProps> = props => {
133131
}
134132
};
135133

136-
/* Override handler, so does not trigger when focus is in editor */
137-
const handlers = {
138-
goGreen: () => {}
139-
};
140-
141134
export default Repl;

‎src/commons/repl/__tests__/__snapshots__/Repl.tsx.snap

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -135,13 +135,8 @@ exports[`Repl renders correctly 1`] = `
135135
}
136136
usingSubst={false}
137137
/>
138-
<HotKeysEnabled
138+
<div
139139
className="repl-input-parent row bp5-card bp5-elevation-0"
140-
handlers={
141-
Object {
142-
"goGreen": [Function],
143-
}
144-
}
145140
>
146141
<ReplInput
147142
externalLibrary="NONE"
@@ -201,7 +196,7 @@ exports[`Repl renders correctly 1`] = `
201196
sourceChapter={1}
202197
sourceVariant="default"
203198
/>
204-
</HotKeysEnabled>
199+
</div>
205200
</div>
206201
</div>
207202
`;

‎src/commons/sourceRecorder/SourceRecorderEditor.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import classNames from 'classnames';
88
import { isEqual } from 'lodash';
99
import React from 'react';
1010
import AceEditor, { IAceEditorProps } from 'react-ace';
11-
import { HotKeys } from 'react-hotkeys';
1211

1312
import {
1413
CodeDelta,
@@ -208,10 +207,7 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
208207

209208
public render() {
210209
return (
211-
<HotKeys
212-
className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}
213-
handlers={handlers}
214-
>
210+
<div className={classNames('Editor', Classes.CARD, Classes.ELEVATION_0)}>
215211
<div className="row editor-react-ace">
216212
<AceEditor
217213
className="react-ace"
@@ -255,7 +251,7 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
255251
keyboardHandler={this.props.editorBinding}
256252
/>
257253
</div>
258-
</HotKeys>
254+
</div>
259255
);
260256
}
261257

@@ -326,9 +322,4 @@ class SourcecastEditor extends React.PureComponent<SourceRecorderEditorProps, {}
326322
};
327323
}
328324

329-
/* Override handler, so does not trigger when focus is in editor */
330-
const handlers = {
331-
goGreen: () => {}
332-
};
333-
334325
export default SourcecastEditor;

‎src/pages/playground/Playground.tsx

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Classes } from '@blueprintjs/core';
22
import { IconNames } from '@blueprintjs/icons';
3+
import { HotkeyItem, useHotkeys } from '@mantine/hooks';
34
import { Ace, Range } from 'ace-builds';
45
import { FSModule } from 'browserfs/dist/node/core/FS';
56
import classNames from 'classnames';
67
import { Chapter, Variant } from 'js-slang/dist/types';
78
import { isEqual } from 'lodash';
89
import { decompressFromEncodedURIComponent } from 'lz-string';
910
import React, { useCallback, useEffect, useMemo, useState } from 'react';
10-
import { HotKeys } from 'react-hotkeys';
1111
import { useDispatch, useStore } from 'react-redux';
1212
import { useLocation, useNavigate } from 'react-router';
1313
import { AnyAction, Dispatch } from 'redux';
@@ -143,8 +143,6 @@ export type PlaygroundProps = {
143143
handleCloseEditor?: () => void;
144144
};
145145

146-
const keyMap = { goGreen: 'h u l k' };
147-
148146
export async function handleHash(
149147
hash: string,
150148
handlers: {
@@ -306,7 +304,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
306304
}
307305

308306
const [lastEdit, setLastEdit] = useState(new Date());
309-
const [isGreen, setIsGreen] = useState(false);
310307
const { selectedTab, setSelectedTab } = useSideContent(
311308
workspaceLocation,
312309
shouldAddDevice ? SideContentType.remoteExecution : SideContentType.introduction
@@ -320,6 +317,14 @@ const Playground: React.FC<PlaygroundProps> = props => {
320317
})
321318
);
322319

320+
// Playground hotkeys
321+
const [isGreen, setIsGreen] = useState(false);
322+
const playgroundHotkeyBindings: HotkeyItem[] = useMemo(
323+
() => [['alt+shift+h', () => setIsGreen(!isGreen)]],
324+
[isGreen, setIsGreen]
325+
);
326+
useHotkeys(playgroundHotkeyBindings);
327+
323328
const remoteExecutionTab: SideContentTab = useMemo(
324329
() => makeRemoteExecutionTabFrom(deviceSecret, setDeviceSecret),
325330
[deviceSecret]
@@ -395,13 +400,6 @@ const Playground: React.FC<PlaygroundProps> = props => {
395400
}
396401
}, [isMobileBreakpoint, selectedTab, setSelectedTab]);
397402

398-
const handlers = useMemo(
399-
() => ({
400-
goGreen: () => setIsGreen(!isGreen)
401-
}),
402-
[isGreen]
403-
);
404-
405403
const onEditorValueChange = React.useCallback(
406404
(editorTabIndex: number, newEditorValue: string) => {
407405
setLastEdit(new Date());
@@ -1051,13 +1049,9 @@ const Playground: React.FC<PlaygroundProps> = props => {
10511049
<MobileWorkspace {...mobileWorkspaceProps} />
10521050
</div>
10531051
) : (
1054-
<HotKeys
1055-
className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}
1056-
keyMap={keyMap}
1057-
handlers={handlers}
1058-
>
1052+
<div className={classNames('Playground', Classes.DARK, isGreen && 'GreenScreen')}>
10591053
<Workspace {...workspaceProps} />
1060-
</HotKeys>
1054+
</div>
10611055
);
10621056
};
10631057

‎src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ exports[`Playground tests Playground renders correctly 1`] = `
44
<div>
55
<div
66
class="Playground bp5-dark"
7-
tabindex="-1"
87
>
98
<div
109
class="workspace"
@@ -395,7 +394,6 @@ exports[`Playground tests Playground renders correctly 1`] = `
395394
>
396395
<div
397396
class="Editor bp5-card bp5-elevation-0"
398-
tabindex="-1"
399397
>
400398
<div
401399
class="row editor-react-ace"
@@ -1391,7 +1389,6 @@ and also the
13911389
>
13921390
<div
13931391
class="repl-input-parent row bp5-card bp5-elevation-0"
1394-
tabindex="-1"
13951392
>
13961393
<div
13971394
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"
@@ -1563,7 +1560,6 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
15631560
<div>
15641561
<div
15651562
class="Playground bp5-dark"
1566-
tabindex="-1"
15671563
>
15681564
<div
15691565
class="workspace"
@@ -1954,7 +1950,6 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
19541950
>
19551951
<div
19561952
class="Editor bp5-card bp5-elevation-0"
1957-
tabindex="-1"
19581953
>
19591954
<div
19601955
class="row editor-react-ace"
@@ -2705,7 +2700,6 @@ and also the
27052700
>
27062701
<div
27072702
class="repl-input-parent row bp5-card bp5-elevation-0"
2708-
tabindex="-1"
27092703
>
27102704
<div
27112705
class=" ace_editor ace_hidpi ace-source ace_dark repl-react-ace react-ace"

0 commit comments

Comments
 (0)