Skip to content

Commit 073c762

Browse files
javizqhjavizqh
committed
Test keybind popup
1 parent ec8d601 commit 073c762

File tree

7 files changed

+128
-45
lines changed

7 files changed

+128
-45
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "jderobot-ide-interface",
3-
"version": "0.2.32",
3+
"version": "0.2.33",
44
"main": "dist/main.js",
55
"typings": "dist/index.d.ts",
66
"files": [

‎src/components/FileEditor/FileEditor.tsx‎

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React from "react";
22
import { useEffect, useRef, useState } from "react";
33

44
import { SaveIcon, MinusIcon, PlusIcon } from "Assets";
@@ -7,6 +7,7 @@ import { CommsManager } from "jderobot-commsmanager";
77
import { Entry, EditorsEntry, Options } from "Types";
88
import TextEditor from "./TextEditor";
99
import {
10+
EditorKeybindModal,
1011
MenuButton,
1112
MenuButtonStroke,
1213
StyledButtonsContainer,
@@ -65,6 +66,7 @@ const FileEditor = ({
6566
const [language, setLanguage] = useState("python");
6667
const [projectToSave, setProjectToSave] = useState(currentProjectname);
6768
const contentRef = useRef<string>(""); // In case some editors cannot update states
69+
const showKeybindsRef = useRef<boolean>(false);
6870

6971
// Autosave data
7072
const fileToSaveRef = useRef<Entry | undefined>(undefined);
@@ -261,6 +263,24 @@ const FileEditor = ({
261263

262264
return (
263265
<>
266+
<EditorKeybindModal
267+
isOpen={showKeybindsRef.current}
268+
onClose={function (): void {
269+
showKeybindsRef.current = false;
270+
}}
271+
keybinds={[
272+
{
273+
id: "format-code",
274+
description: "Format Code",
275+
keybind: ["Ctrl", "Shift", "I"],
276+
},
277+
{
278+
id: "lint-code",
279+
description: "Lint Code",
280+
keybind: ["Ctrl", "Shift", "L"],
281+
},
282+
]}
283+
/>
264284
<StyledEditorMenu bgColor={theme.palette?.primary}>
265285
<StyledButtonsContainer color={theme.palette?.secondary}>
266286
{!options?.editor?.notShowSave && (
@@ -310,7 +330,15 @@ const FileEditor = ({
310330
return <>{list}</>;
311331
}
312332
}
313-
return <></>;
333+
return (
334+
<MenuButtonStroke
335+
id="keybinds-button"
336+
title="Keybinds Info"
337+
onClick={handleZoomOut}
338+
>
339+
<MinusIcon viewBox="0 0 20 20" />
340+
</MenuButtonStroke>
341+
);
314342
})()}
315343
</StyledButtonsContainer>
316344
</StyledEditorMenu>

‎src/components/FileEditor/TextEditor.tsx‎

Lines changed: 32 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const FileEditor = ({
7171
if (monacoRef.current === null) return;
7272
return {
7373
startLineNumber: pylint.line,
74-
startColumn: pylint.column,
74+
startColumn: pylint.column + 1,
7575
endLineNumber:
7676
pylint.endLine === null ? pylint.column : pylint.endLine,
7777
endColumn:
@@ -169,37 +169,37 @@ const FileEditor = ({
169169

170170
monacoEditorSnippet(monaco, commsManager);
171171

172-
editor.addCommand(
173-
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyI,
174-
function () {
175-
if (language !== "python")
176-
//TODO: only format for python. We could add more later
177-
return;
178-
179-
if (commsManager && fileContent) {
180-
commsManager.code_format(fileContent);
181-
}
182-
}
183-
);
184-
185-
editor.addCommand(
186-
monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyL,
187-
function () {
188-
if (language !== "python")
189-
//TODO: only format for python. We could add more later
190-
return;
191-
192-
if (commsManager && fileContent) {
193-
commsManager.code_analysis(fileContent, [
194-
...pylint_error,
195-
...pylint_warning,
196-
...pylint_convention,
197-
...pylint_refactor,
198-
...pylint_fatal,
199-
]);
200-
}
201-
}
202-
);
172+
// editor.addCommand(
173+
// monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyI,
174+
// function () {
175+
// if (language !== "python")
176+
// //TODO: only format for python. We could add more later
177+
// return;
178+
179+
// if (commsManager && fileContent) {
180+
// commsManager.code_format(fileContent);
181+
// }
182+
// }
183+
// );
184+
185+
// editor.addCommand(
186+
// monaco.KeyMod.CtrlCmd | monaco.KeyMod.Shift | monaco.KeyCode.KeyL,
187+
// function () {
188+
// if (language !== "python")
189+
// //TODO: only format for python. We could add more later
190+
// return;
191+
192+
// if (commsManager && fileContent) {
193+
// commsManager.code_analysis(fileContent, [
194+
// ...pylint_error,
195+
// ...pylint_warning,
196+
// ...pylint_convention,
197+
// ...pylint_refactor,
198+
// ...pylint_fatal,
199+
// ]);
200+
// }
201+
// }
202+
// );
203203

204204
return () => {
205205
editorRef.current
@@ -303,16 +303,6 @@ const FileEditor = ({
303303
}
304304
}
305305
);
306-
307-
// if (language !== "python") return;
308-
309-
// commsManager.code_analysis(fileContent, [
310-
// ...pylint_error,
311-
// ...pylint_warning,
312-
// ...pylint_convention,
313-
// ...pylint_refactor,
314-
// ...pylint_fatal,
315-
// ]);
316306
}, [fileContent]);
317307

318308
return (

‎src/components/Modals/EditorKeybindModal.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from "react";
2+
import Modal, { ModalRow, ModalTitlebar } from "./Modal";
3+
import { EditorKeybind } from "Types";
4+
5+
const NewFolderModal = ({
6+
isOpen,
7+
onClose,
8+
keybinds,
9+
}: {
10+
isOpen: boolean;
11+
onClose: () => void;
12+
keybinds: EditorKeybind[];
13+
}) => {
14+
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
15+
event.preventDefault();
16+
onClose();
17+
};
18+
19+
const handleCancel = (event: React.FormEvent<HTMLFormElement> | null) => {
20+
if (event) {
21+
event.preventDefault();
22+
}
23+
onClose();
24+
};
25+
26+
return (
27+
<Modal
28+
id="editor-keybinds-modal"
29+
isOpen={isOpen}
30+
onClose={onClose}
31+
onSubmit={handleSubmit}
32+
onReset={handleCancel}
33+
>
34+
<ModalTitlebar
35+
title="Editor Keybord Shortcuts"
36+
htmlFor="editor-keyboard-shortcuts"
37+
hasClose
38+
handleClose={() => {
39+
handleCancel(null);
40+
}}
41+
/>
42+
{keybinds.map((keybind: EditorKeybind) => (
43+
<ModalRow key={keybind.id}>
44+
<div>
45+
<div> {keybind.description}</div>
46+
<div>
47+
{keybind.keybind.map((key: string) => (
48+
<span key={key}>{key}</span>
49+
))}
50+
</div>
51+
</div>
52+
</ModalRow>
53+
))}
54+
</Modal>
55+
);
56+
};
57+
58+
export default NewFolderModal;

‎src/components/Modals/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ export { default as NewFolderModal } from "./NewFolderModal";
1616
export { default as RenameModal } from "./RenameModal";
1717
export { default as UploadModal } from "./UploadModal";
1818
export { default as ErrorModal } from "./ErrorModal";
19+
export { default as EditorKeybindModal } from "./EditorKeybindModal";

‎src/types/editor.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export interface EditorKeybind {
2+
description: string;
3+
id: string;
4+
keybind: string[];
5+
}

‎src/types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@ export { ErrorType } from "./error";
1616
export type { Options } from "./options";
1717
export type { Theme } from "./theme";
1818
export type { ModelRowTypes, ModalInputSelectIconEntry } from "./modal";
19+
export type {EditorKeybind} from "./editor";

0 commit comments

Comments
 (0)