feat: Add stdin support, improve error reporting and UI #207
Conversation
|
Someone 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 please review this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds stdin input support and code persistence to the online code editor. It introduces an input panel alongside the output panel, allowing users to provide program input before running their code. Additionally, code is now automatically saved to and restored from localStorage per language.
- Added stdin support with a new input text area for providing program input
- Implemented localStorage-based code persistence per language
- Enhanced output handling to show stdout, stderr, and compilation errors together
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
src/pages/EditorComponent.js
Outdated
| NAME: selectedLanguage.NAME, | ||
| }); | ||
| setCode(selectedLanguage.HELLO_WORLD); | ||
| const savedCode = localStorage.getItem(`code-${currentLanguage}`); |
There was a problem hiding this comment.
The localStorage key uses currentLanguage but should use selectedLanguage.DEFAULT_LANGUAGE instead. At this point in the useEffect, currentLanguage still holds the previous language value (the dependency that triggered the effect), not the new language being switched to. This will cause the wrong saved code to be loaded when switching languages.
src/pages/EditorComponent.js
Outdated
| if (code) { | ||
| localStorage.setItem(`code-${currentLanguage}`, code); | ||
| } |
There was a problem hiding this comment.
The useEffect saves code to localStorage on every keystroke in the editor. This could cause performance issues with frequent writes. Consider debouncing this save operation (e.g., using a debounce hook or setTimeout) to reduce the number of localStorage writes while typing.
| if (code) { | |
| localStorage.setItem(`code-${currentLanguage}`, code); | |
| } | |
| if (!code) return; | |
| const handler = setTimeout(() => { | |
| localStorage.setItem(`code-${currentLanguage}`, code); | |
| }, 500); // 500ms debounce | |
| return () => clearTimeout(handler); |
| const newOutput = []; | ||
| if (data.stdout) { | ||
| newOutput.push(...decodeFormat(data.stdout)); | ||
| } | ||
| if (data.stderr) { | ||
| newOutput.push(...decodeFormat(data.stderr)); | ||
| enqueueSnackbar("Error in code", { variant: "error" }); | ||
| } | ||
| setOutput(decodeFormat(data.stdout)); | ||
| if (data.compile_output) { | ||
| newOutput.push(...decodeFormat(data.compile_output)); | ||
| enqueueSnackbar("Compilation error", { variant: "error" }); | ||
| } | ||
| setOutput(newOutput); |
There was a problem hiding this comment.
When both stderr and compile_output are present, two separate error snackbars will be shown, which could be confusing to users. Consider combining the error messages or showing only the most relevant error snackbar to improve the user experience.
2 participants
Resolves #153
PR Fixes:
This pull request introduces several new features and improvements to the Custom Code Editor, primarily focused on adding support for
user input (stdin) and enhancing the user experience.
New Features & Improvements:
User Input (stdin) Support:
programs (e.g., using input() in Python).
Improved Error Reporting:
always see error messages, even if their program has produced some standard output, making it easier to debug code.
Enhanced Input UI:
non-interactive workflow clearer to the user.
box, improving the user experience.
Bug Fixes:
Checklist before requesting a review
mainbranchnpm run lint:fixlocally