FIX ISSUE #204 : Add Essential Keyboard Shortcuts for Better User Experience #205

Stonebanks-js · 2025-10-15T19:32:12Z

⌨️ Add Keyboard Shortcuts Feature

ISSUE FIXED : #204

Changes:

Added global keydown listener in Editor.jsx to support:
- Ctrl+S → Save / Download current code
- Ctrl+O → Open/import code from file
- Ctrl+L → Clear output panel
- Ctrl+C → Copy output text
- Ctrl+/ → Toggle line numbers
- Ctrl+Shift+W → Toggle word wrap
Integrated with existing clearOutput and copyOutput props
Prevent default browser behaviors (like Save dialog)

Tests / Manual Verification:

Open editor, press Ctrl+S → code downloads
Ctrl+O opens file dialog → loads content
Ctrl+L clears output
Ctrl+C copies output
Ctrl+/ toggles line numbers
Ctrl+Shift+W toggles wrap

Please review and test if it causes any conflicts with Monaco internal keybindings.

Closes issue #204

@DhanushNehru I request you to run checks and merge the pull request into main.

vercel · 2025-10-15T19:32:15Z

@Stonebanks-js is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel.

A member of the Team first needs to authorize it.

Stonebanks-js · 2025-10-15T19:50:15Z

@DhanushNehru The Liniting check is fixed and passed successfully, I hereby request you to check the deployment status.

Stonebanks-js · 2025-10-17T04:17:57Z

@DhanushNehru Kindly review this PR and add hacktoberfest labels please

vercel · 2025-10-17T10:12:56Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
custom-code-editor	Ready	Preview	Comment	Oct 17, 2025 10:13am

Copilot

Pull Request Overview

Adds keyboard/UX enhancements and refactors the editor page, with improved Judge0 submission handling and import/export utilities. However, the advertised global keyboard shortcuts are not implemented in the diff, and there appear to be regressions in the sidebar controls.

Adds submit/polling improvements and safer theme definition.
Implements import/export helpers, output copy/clear, and state cleanup on unmount.
Wires a global keydown handler for Ctrl+Enter only.

Reviewed Changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.

File	Description
src/pages/EditorComponent.js	Refactors editor logic, adds import/export and output utilities, adds Ctrl+Enter global handler, adjusts state handling and UI blocks.
package.json	Bumps eslint to ^8.57.1.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/pages/EditorComponent.js

Stonebanks-js · 2025-10-17T16:59:56Z

@DhanushNehru Sir please merge this PR, all the checks have passed successfully, Kindly assign it with hacktoberfest labels 2025. Thank you.

Copilot

Pull Request Overview

Copilot reviewed 2 out of 3 changed files in this pull request and generated 6 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-22T17:10:22Z

src/pages/EditorComponent.js

+  const isImportingRef = useRef(false);
+  const fileInputRef = useRef(null);
+  const timeoutRef = useRef(null);
+  const [isDownloading, setDownloading] = useState(false);


The isDownloading state is declared but never set to true anywhere in the code. The setDownloading(true) call was removed from the exportFile function, making this state variable unused. Consider removing this state if it's not needed, or ensure it's properly managed if the downloading indicator is still required.

Suggested change

const [isDownloading, setDownloading] = useState(false);

Copilot · 2025-10-22T17:10:22Z

src/pages/EditorComponent.js

+            const decoded = atob(result.stdout);
+            setOutput(decoded.split("\n"));
+          } else if (result && result.compile_output) {
+            const decoded = atob(result.compile_output);
+            setOutput(decoded.split("\n"));
+            enqueueSnackbar("Compilation error. See output.", { variant: "error" });
+          } else if (result && result.stderr) {
+            const decoded = atob(result.stderr);
+            setOutput(decoded.split("\n"));


The decodeFormat function is defined earlier in the file but is no longer being used. The base64 decoding and splitting logic has been duplicated inline here and in multiple other places (lines 236, 240). Consider using the existing decodeFormat function to maintain consistency and reduce code duplication.

Suggested change

const decoded = atob(result.stdout);

setOutput(decoded.split("\n"));

} else if (result && result.compile_output) {

const decoded = atob(result.compile_output);

setOutput(decoded.split("\n"));

enqueueSnackbar("Compilation error. See output.", { variant: "error" });

} else if (result && result.stderr) {

const decoded = atob(result.stderr);

setOutput(decoded.split("\n"));

setOutput(decodeFormat(result.stdout));

} else if (result && result.compile_output) {

setOutput(decodeFormat(result.compile_output));

enqueueSnackbar("Compilation error. See output.", { variant: "error" });

} else if (result && result.stderr) {

setOutput(decodeFormat(result.stderr));

Copilot · 2025-10-22T17:10:22Z

src/pages/EditorComponent.js

-      java: "Java",
-    };
-
+    const languageMap = { js: "Javascript", jsx: "Javascript", ts: "Typescript", py: "Python3", cpp: "C++", c: "C", java: "Java" };


This language mapping is now defined inline within the handleFileImport function, but a similar mapping exists in the exportFile function at line 335. Consider extracting this to a constant at the module level to maintain consistency and avoid duplication.

Copilot · 2025-10-22T17:10:23Z

src/pages/EditorComponent.js

+    <Box sx={{ flexGrow: 1 }}>
+      {currentUser ? renderAuthenticatedContent() : (
+        <div>
+          <GithubSignIn />
+          <GoogleSignIn />
        </div>
-      </Box>
-      {currentUser
-        ? renderAuthenticatedContent()
-        : renderUnauthenticatedContent()}
-      <div className="footer">
-        <Footer />
-      </div>
-    </div>
+      )}
+      <Footer />
+    </Box>


The entire header section with logo, theme toggle, stars component, and user profile has been removed from the render. This removes critical UI elements including the logout button and user information display, which breaks the user experience. The handleSignOut function is still defined but no longer accessible from the UI.

Copilot · 2025-10-22T17:10:23Z

src/pages/EditorComponent.js

+          {/* Run, Copy, Clear */}
+          <div style={{ display: "flex", gap: "0.5rem", marginTop: "1rem" }}>
+            <StyledButton onClick={submitCode}><FaPlay /> Run</StyledButton>
+            <StyledButton onClick={copyOutput}><FaCopy /> Copy Output</StyledButton>
+            <StyledButton onClick={clearOutput}><FaTrash /> Clear Output</StyledButton>
          </div>
-          <StyledButton
-            sx={(theme) => ({
-              marginTop: "1rem",
-              padding: "10px 20px",
-              bgcolor: theme.palette.text.primary,
-              color: theme.palette.background.default,
-              border: "none",
-              borderRadius: "15px",
-              fontSize: "0.8em",
-              cursor: "pointer",
-              boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
-              width: "50%",
-              "@media (min-width: 1024px)": {
-                width: "100%",
-              },
-            })}
-            onClick={submitCode}
-            variant="contained"
-            color="primary"
-            disabled={loading}
-          >
-            <span>
-              {loading ? <CircularProgress size={13} /> : <FaPlay size="13" />}
-            </span>
-            Run {languageDetails.LANGUAGE_NAME}
-          </StyledButton>
+          {/* Output */}
+          <OutputLayout>
+            <pre>{output && output.length ? output.join("\n") : "Output will appear here..."}</pre>
+          </OutputLayout>


The language selector, theme selector, and editor settings (line numbers toggle, word wrap toggle, font size slider) have been completely removed from the UI. While these state variables and handlers still exist in the code, users can no longer access these controls. This breaks functionality that was previously available.

Copilot · 2025-10-22T17:10:23Z

src/pages/EditorComponent.js

-                  Export
-                </>
-              )}
+            <input type="file" ref={fileInputRef} style={{ display: "none" }} accept=".java,.js,.jsx,.ts,.py,.cpp,.c" onChange={handleFileImport} />


The PR description mentions adding keyboard shortcuts including Ctrl+O for opening/importing files, but there is no keyboard event listener implemented for this functionality. The file input only works via button click, not via the Ctrl+O shortcut as described.

DhanushNehru · 2025-10-22T17:10:54Z

The landing page is not proper @Stonebanks-js

Stonebanks-js added 2 commits October 16, 2025 00:36

Resolved the linting errors second time

465fb19

Added Keyboard Shortcuts

a4dad82

Linting check fix attempt 1

d28fae4

Stonebanks-js force-pushed the main branch from 9c7498e to d28fae4 Compare October 15, 2025 19:47

Merge branch 'main' into main

57a0f07

DhanushNehru requested a review from Copilot October 17, 2025 10:12

vercel bot deployed to Preview October 17, 2025 10:13 View deployment

Copilot AI reviewed Oct 17, 2025

View reviewed changes

src/pages/EditorComponent.js Show resolved Hide resolved

src/pages/EditorComponent.js Show resolved Hide resolved

src/pages/EditorComponent.js Show resolved Hide resolved

src/pages/EditorComponent.js Show resolved Hide resolved

DhanushNehru requested a review from Copilot October 22, 2025 17:08

Copilot AI reviewed Oct 22, 2025

View reviewed changes

Uh oh!

FIX ISSUE #204 : Add Essential Keyboard Shortcuts for Better User Experience #205

Are you sure you want to change the base?

FIX ISSUE #204 : Add Essential Keyboard Shortcuts for Better User Experience #205

Conversation

Stonebanks-js commented Oct 15, 2025

⌨️ Add Keyboard Shortcuts Feature

Changes:

Tests / Manual Verification:

Uh oh!

vercel bot commented Oct 15, 2025

Uh oh!

Stonebanks-js commented Oct 15, 2025

Uh oh!

Stonebanks-js commented Oct 17, 2025

Uh oh!

vercel bot commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Stonebanks-js commented Oct 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 22, 2025

Choose a reason for hiding this comment

Uh oh!

DhanushNehru commented Oct 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Oct 17, 2025 •

edited

Loading

Stonebanks-js commented Oct 17, 2025 •

edited

Loading