Feat: Add language specific boilerplate templates to Virtual Lab Code Editor#875
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughAdds language-specific boilerplates (Python, JavaScript, C, C++), updates Ace editor mode on language selection, injects selected boilerplate into the editor (with replace confirmation), persists last-selected language, and updates editor/select styling in the template. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User/UI
participant Editor as Ace Editor
participant Storage as LocalStorage
User->>User: change language in selector
User->>Editor: show "replace current code?" prompt
alt User confirms
User->>Editor: call updateEditorMode(language)
Editor->>Editor: editor.session.setMode(...) (ace mode)
User->>Editor: call setBoilerplate(language)
Editor->>Editor: replace content with BOILERPLATES[language], focus, clear selection
Editor->>Storage: store last-selected language
else User cancels
Editor->>Storage: store last-selected language
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html (3)
12-29:⚠️ Potential issue | 🟡 MinorCustom CSS classes and inline styles violate coding guidelines.
Several issues here:
.language-info(Lines 20-24) is a custom CSS class that is never used in the template — dead code.select { background-color: white; }(Lines 26-28) is a custom CSS rule; use Tailwind'sbg-whiteon the<select>element instead.#editorstyles (Lines 13-18) use raw CSS properties (border,border-radius) — prefer Tailwind classes likeborder border-gray-300 roundedon the element.The
height: 400pxfor#editoris acceptable since Ace needs a fixed height, but the rest should be Tailwind classes.As per coding guidelines,
**/*.{html,htm,css}: "Never use custom CSS classes".Proposed fix
<style> `#editor` { height: 400px; width: 100%; - border: 1px solid `#ccc`; - border-radius: 4px; } - - .language-info { - color: `#666`; - font-size: 0.9em; - margin-top: 4px; - } - - select { - background-color: white; - } </style>Then on the editor div:
- <div id="editor"></div> + <div id="editor" class="border border-gray-300 dark:border-gray-600 rounded w-full"></div>And on the select element, add
bg-white:- <select id="language-select" class="border px-2 py-1 rounded"> + <select id="language-select" class="border px-2 py-1 rounded bg-white dark:bg-gray-700 dark:text-gray-300">
49-55:⚠️ Potential issue | 🟡 MinorCustom Input label and textarea missing dark mode support.
The label (Line 50) and textarea (Lines 51-54) have no dark mode classes. The label should follow the guideline pattern, and the textarea needs
dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600.As per coding guidelines, "Always include dark mode alternatives using dark: prefix for elements".
Proposed fix
- <label for="stdin-input" class="block mb-1">Custom Input:</label> + <label for="stdin-input" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Custom Input:</label> <textarea id="stdin-input" rows="4" - class="w-full border rounded p-2 font-mono" + class="w-full border border-gray-300 dark:border-gray-600 rounded p-2 font-mono bg-white dark:bg-gray-700 dark:text-gray-300" placeholder="Enter input here…"></textarea>
70-73:⚠️ Potential issue | 🟡 MinorRemove
console.logbefore merging.Line 72 has a debug log statement (
console.log('▶️ Piston endpoint:', ...)) that should not ship to production.Proposed fix
<script> window.EVALUATE_CODE_URL = "{% url 'virtual_lab:evaluate_code' %}"; - console.log('▶️ Piston endpoint:', window.EVALUATE_CODE_URL); </script>
🤖 Fix all issues with AI agents
In `@web/virtual_lab/static/virtual_lab/js/code_editor.js`:
- Around line 61-65: The setBoilerplate function currently falls back to
BOILERPLATES.python for unknown languages, causing a mode/code mismatch; update
setBoilerplate to use an empty string fallback instead of BOILERPLATES.python by
changing the value passed to editor.setValue to BOILERPLATES[language] || ''
(referencing setBoilerplate, editor.setValue and BOILERPLATES) so unknown
languages leave the editor empty rather than loading Python boilerplate.
- Around line 67-76: The language-change handler (langSel change listener)
currently calls updateEditorMode(language) and unconditionally
setBoilerplate(language), discarding user code and writing dataset.lastValue
which is never read; change the handler in code_editor.js to first detect
whether the editor content differs from the current boilerplate (or a dirty
flag), and if it does, show a confirmation prompt to the user before calling
setBoilerplate(language); only overwrite when the user confirms or when the
content already matches the existing boilerplate; remove the dead assignment to
e.target.dataset.lastValue (or alternatively use it to track previous selection
consistently) and ensure updateEditorMode(language) still runs regardless of the
user’s confirm decision.
In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html`:
- Around line 58-59: The Run Code button (id="run-btn") uses the wrong Tailwind
classes (bg-blue-600 hover:bg-blue-700); update its class list to match the
project's primary button style by replacing those classes with "bg-teal-300
hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200" so
the element with id run-btn follows the established design system and includes
the transition and spacing changes.
- Around line 64-65: The <pre id="output"> element uses only bg-gray-100 and
needs dark-mode counterparts: update the class list on the pre with dark:
variants (for example add dark:bg-gray-800 and dark:text-gray-100) and ensure
other utilities (e.g., dark:whitespace-pre-wrap if needed) follow the project's
dark-mode conventions so the output block displays correctly in dark theme;
locate the <pre id="output"> element and modify its class attribute accordingly.
- Around line 37-47: The label and select for the language dropdown lack the
required styling and dark-mode classes; update the <label for="language-select">
element to include the class "block text-sm font-medium text-gray-700
dark:text-gray-300" and update the <select id="language-select"> element to
include the prescribed form input classes (include standard border, px-2 py-1
rounded plus dark-mode variants such as dark:bg-gray-700 dark:border-gray-600
dark:text-gray-200) so the select matches the project's form-input styling and
supports dark mode.
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html
Outdated
Show resolved
Hide resolved
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html (2)
49-55:⚠️ Potential issue | 🟡 MinorStdin label and textarea missing dark mode and guideline-mandated classes.
The
<label>on Line 50 should usetext-sm font-medium text-gray-700 dark:text-gray-300. The<textarea>on Lines 51-54 is missing dark mode variants.Proposed fix
- <label for="stdin-input" class="block mb-1">Custom Input:</label> + <label for="stdin-input" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Custom Input:</label> <textarea id="stdin-input" rows="4" - class="w-full border rounded p-2 font-mono" + class="w-full border border-gray-300 dark:border-gray-600 rounded p-2 font-mono bg-white dark:bg-gray-700 dark:text-gray-300" placeholder="Enter input here…"></textarea>As per coding guidelines: form labels should use "block text-sm font-medium text-gray-700 dark:text-gray-300" and all elements must include dark mode alternatives.
70-73:⚠️ Potential issue | 🟡 MinorRemove debug
console.logbefore merging.Line 72 logs the Piston endpoint on every page load. This is a debug artifact that should be removed.
Proposed fix
<script> window.EVALUATE_CODE_URL = "{% url 'virtual_lab:evaluate_code' %}"; - console.log('▶️ Piston endpoint:', window.EVALUATE_CODE_URL); </script>
🤖 Fix all issues with AI agents
In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html`:
- Around line 20-28: Remove the unused .language-info CSS and the global select
rule; keep the `#editor` block (Ace needs fixed height) but move any visual border
styles out of the stylesheet and onto the DOM via Tailwind classes on the
element that has id="editor" (add classes like border, rounded, border-gray-200
or similar) so no custom CSS classes or global element overrides remain.
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html (2)
38-44:⚠️ Potential issue | 🟡 MinorLabel and textarea missing guideline-mandated classes and dark mode variants.
The
<label>on Line 39 should useblock text-sm font-medium text-gray-700 dark:text-gray-300per guidelines. The<textarea>on Line 42 is missing dark mode variants (dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300) and the full form-input border class (border-gray-300).Proposed fix
- <label for="stdin-input" class="block mb-1">Custom Input:</label> + <label for="stdin-input" class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Custom Input:</label> <textarea id="stdin-input" rows="4" - class="w-full border rounded p-2 font-mono" + class="w-full border border-gray-300 dark:border-gray-600 rounded p-2 font-mono bg-white dark:bg-gray-700 dark:text-gray-300" placeholder="Enter input here…"></textarea>As per coding guidelines, form labels should use "block text-sm font-medium text-gray-700 dark:text-gray-300" and all elements must "Always include dark mode alternatives using dark: prefix".
61-61:⚠️ Potential issue | 🟡 MinorRemove debug
console.logbefore merging.This
console.log('▶️ Piston endpoint:', ...)looks like a development-only diagnostic and shouldn't ship to production.Proposed fix
<script> window.EVALUATE_CODE_URL = "{% url 'virtual_lab:evaluate_code' %}"; - console.log('▶️ Piston endpoint:', window.EVALUATE_CODE_URL); </script>
finalCOdeEditor.mp4 |
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html (2)
65-68:⚠️ Potential issue | 🟡 MinorRun button still uses
bg-blue-600instead of the project's primary teal color.This was flagged in a previous review but remains unaddressed.
🛠️ Proposed fix
- <button id="run-btn" - class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800"> + <button id="run-btn" + class="px-6 py-2 bg-teal-300 hover:bg-teal-400 text-white rounded-lg transition duration-200">As per coding guidelines: "Use Tailwind primary button classes:
bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html` around lines 65 - 68, The Run Code button with id "run-btn" is using the old blue classes; update its class attribute on the <button id="run-btn"> element to use the project's primary teal button classes: replace "px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800" with "bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200" so it matches the coding guidelines for primary buttons.
44-54:⚠️ Potential issue | 🟡 MinorLabel missing
blockfrom the prescribed Tailwind label class.The current label class is
text-sm font-medium text-gray-700 dark:text-gray-300but the guideline requires theblockmodifier as the first token.🛠️ Proposed fix
- <label for="language-select" class="text-sm font-medium text-gray-700 dark:text-gray-300">Language:</label> + <label for="language-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Language:</label>As per coding guidelines: "Use Tailwind form label classes:
block text-sm font-medium text-gray-700 dark:text-gray-300for form labels".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html` around lines 44 - 54, The label element for the language selector (label with for="language-select") is missing the required Tailwind "block" token; update its class string to start with "block" so it becomes "block text-sm font-medium text-gray-700 dark:text-gray-300" to conform to the form label guideline.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html`:
- Around line 13-19: The `#editor` CSS block is adding raw styles that conflict
with Tailwind on the <div id="editor">; remove border-radius, border, and
background-color from the `#editor` CSS and instead apply the equivalent Tailwind
classes on the element (add rounded, appropriate border classes that handle dark
mode like border-gray-300 dark:border-gray-700, and bg-gray-100) to the <div
id="editor"> (the element referenced on Line 42) so all visual styling is done
via Tailwind and the duplicate/unused CSS rules are deleted.
---
Duplicate comments:
In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html`:
- Around line 65-68: The Run Code button with id "run-btn" is using the old blue
classes; update its class attribute on the <button id="run-btn"> element to use
the project's primary teal button classes: replace "px-4 py-2 bg-blue-600
dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800"
with "bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition
duration-200" so it matches the coding guidelines for primary buttons.
- Around line 44-54: The label element for the language selector (label with
for="language-select") is missing the required Tailwind "block" token; update
its class string to start with "block" so it becomes "block text-sm font-medium
text-gray-700 dark:text-gray-300" to conform to the form label guideline.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html (1)
65-68:⚠️ Potential issue | 🟡 MinorRun button still uses
bg-blue-600— not addressed from the previous review cycle.This deviates from the project's primary button color (
bg-teal-300 hover:bg-teal-400) and was flagged in an earlier review that was not resolved.As per coding guidelines, primary buttons should use:
bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200.🛠️ Proposed fix
- <button id="run-btn" - class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800"> + <button id="run-btn" + class="px-6 py-2 bg-teal-300 hover:bg-teal-400 text-white rounded-lg transition duration-200">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html` around lines 65 - 68, The Run button (id "run-btn") still uses the old blue classes; update its class attribute to match the project's primary button style by replacing "bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700 dark:hover:bg-blue-800" with the specified primary classes "bg-teal-300 hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200" so the element with id="run-btn" follows the design guideline.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html`:
- Around line 46-47: The <select id="language-select"> element lacks the
required keyboard focus ring classes; update its class attribute (on the element
with id "language-select") to include the prescribed focus styles (e.g., add
focus:ring-2 and focus:ring-blue-500) alongside the existing
border/spacing/theme classes so the control shows a visible focus indicator for
keyboard users.
---
Duplicate comments:
In `@web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html`:
- Around line 65-68: The Run button (id "run-btn") still uses the old blue
classes; update its class attribute to match the project's primary button style
by replacing "bg-blue-600 dark:bg-blue-700 text-white rounded hover:bg-blue-700
dark:hover:bg-blue-800" with the specified primary classes "bg-teal-300
hover:bg-teal-400 text-white px-6 py-2 rounded-lg transition duration-200" so
the element with id="run-btn" follows the design guideline.
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html
Outdated
Show resolved
Hide resolved
1 participant
Related issues
Fixes #874
Checklist
Overview
This PR improves the usability of the Virtual Lab Code Editor by introducing language-specific default boilerplate templates. Currently, the editor loads a Python Hello World snippet initially. When switching to another language, the editor content remains unchanged, which may confuse users.
Changes Made
Benefit
This improves beginner experience and prevents syntax mismatch between selected language and displayed code.
Overall it enhances UX.
Do watch the ScreenRecording and see the implementation in action:
codeeditorFix.mp4
I would appreciate any feedback or suggested improvements..
Thanks!
Summary by CodeRabbit
New Features
Style