FIX ISSUE #204 : Add Essential Keyboard Shortcuts for Better User Experience#205
FIX ISSUE #204 : Add Essential Keyboard Shortcuts for Better User Experience#205Stonebanks-js wants to merge 6 commits into
Conversation
|
@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. |
|
@DhanushNehru The Liniting check is fixed and passed successfully, I hereby request you to check the deployment status. |
|
@DhanushNehru Kindly review this PR and add hacktoberfest labels please |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
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.
|
@DhanushNehru Sir please merge this PR, all the checks have passed successfully, Kindly assign it with hacktoberfest labels 2025. Thank you. |
There was a problem hiding this comment.
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.
| <Box sx={{ flexGrow: 1 }}> | ||
| {currentUser ? renderAuthenticatedContent() : ( | ||
| <div> | ||
| <GithubSignIn /> | ||
| <GoogleSignIn /> | ||
| </div> | ||
| </Box> | ||
| {currentUser | ||
| ? renderAuthenticatedContent() | ||
| : renderUnauthenticatedContent()} | ||
| <div className="footer"> | ||
| <Footer /> | ||
| </div> | ||
| </div> | ||
| )} | ||
| <Footer /> | ||
| </Box> |
There was a problem hiding this comment.
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.
| {/* 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> |
There was a problem hiding this comment.
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.
| Export | ||
| </> | ||
| )} | ||
| <input type="file" ref={fileInputRef} style={{ display: "none" }} accept=".java,.js,.jsx,.ts,.py,.cpp,.c" onChange={handleFileImport} /> |
There was a problem hiding this comment.
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.
|
The landing page is not proper @Stonebanks-js 
|
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
⌨️ Add Keyboard Shortcuts Feature
ISSUE FIXED : #204
Changes:
Editor.jsxto support:clearOutputandcopyOutputpropsTests / Manual Verification:
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.