Fixes the virtual lab code editor to support all 4 available programming languages instead of just Python.

[Ananya44444]

Related issues

Fixes #931

Checklist

• Did you run the pre-commit? (If not, your PR will most likely not pass — please ensure it passes pre-commit)
• Did you test the change? (Ensure you didn’t just prompt the AI and blindly commit — test the code and confirm it works)
• Added screenshots to the PR description (if applicable)

Changes Made

• Language Switching: Added proper language selector functionality
• Ace Editor Integration: Dynamic mode switching based on selected language
• Sample Code: Clean "Hello, World!" examples for each language

Technical Details

• Updated code_editor.js with language configuration object
• Added event listener for language selector dropdown
• Implemented dynamic Ace editor mode switching
• Simplified sample code to basic Hello World programs

Screen.Recording.2026-02-22.185038.mp4

Summary by CodeRabbit

• New Features

  • Added support for multiple languages with syntax highlighting and language-specific sample templates
  • Language selector to switch editor language and load corresponding sample content
  • Editor now initializes with the Python sample by default

• Usability

  • Detects unsaved edits and prompts before replacing user content when switching languages; preserves current code when no unsaved changes
  • Enabled text wrapping in the editor UI

[coderabbitai]

Walkthrough

Adds a language configuration map and UI-driven mode switching to the Ace-based editor, sample "Hello, World!" snippets per language, unsaved-change detection with discard confirmation, wrap/font options, and removes hardcoded initial editor content from the template.

Changes

Cohort / File(s)	Summary
Language Configuration & Switching web/virtual_lab/static/virtual_lab/js/code_editor.js	Added languageConfig for Python, JavaScript, C, and C++; wrapped initialization in DOMContentLoaded; enabled wrap option; added currentLanguage, hasUnsavedChanges(), and updateEditorLanguage() to change Ace mode, load samples, and confirm discard of unsaved edits; added language selector handler and initialized editor to Python sample.
Editor Template Update web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html	Removed hardcoded initial editor content (<div id="editor">...</div>) so JS injects samples; changed extends quoting style.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant User as User
participant UI as Language Selector (DOM)
participant JS as code_editor.js
participant Editor as Ace Editor Instance
User->>UI: selects language
UI->>JS: change event (language)
JS->>Editor: call hasUnsavedChanges()
alt unsaved changes true
JS->>User: prompt "Discard unsaved changes?"
User->>JS: confirms or cancels
opt cancels
JS->>UI: revert selection to previous language
return
end
end
JS->>Editor: setMode(languageConfig[lang].mode)
JS->>Editor: setValue(languageConfig[lang].sample)
JS->>Editor: apply options (wrap, fontSize, showPrintMargin)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Python Editor #649 — Modifies web/virtual_lab/static/virtual_lab/js/code_editor.js with related editor initialization and language/run logic.

Suggested reviewers

• A1L13N

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: enabling all 4 programming languages in the code editor instead of just Python.
Linked Issues check	✅ Passed	All coding requirements from issue #931 are met: language selector triggers editor mode switching, appropriate syntax highlighting for all 4 languages is implemented, and sample code is loaded for each language.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing language switching functionality. Quote style change in template is a minor formatting adjustment within scope.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This pull request fixes the code editor to support all 4 available programming languages (Python, JavaScript, C, C++) by implementing dynamic language switching functionality. Previously, only Python was functional despite the dropdown showing all 4 language options.

Changes:

• Added language configuration object mapping each language to its Ace Editor mode and sample Hello World code
• Implemented dynamic editor mode switching when users select a different language from the dropdown
• Removed hardcoded Python sample code from HTML template in favor of JavaScript initialization
• Enhanced editor options with text wrapping and autocomplete features

Reviewed changes

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

File	Description
web/virtual_lab/templates/virtual_lab/code_editor/code_editor.html	Removed hardcoded Python sample code from editor div to allow JavaScript initialization
web/virtual_lab/static/virtual_lab/js/code_editor.js	Added language configuration, language selector event handler, and dynamic mode switching functionality

Comments suppressed due to low confidence (1)

web/virtual_lab/static/virtual_lab/js/code_editor.js:38

• The enableBasicAutocompletion and enableLiveAutocompletion options require the Ace Editor language tools extension to be loaded. Currently, only the base ace.js is loaded from the CDN (line 11 in code_editor.html). These options will have no effect without loading the ext-language_tools.js extension. Either remove these options or add the required script tag.

  enableBasicAutocompletion: true,
  enableLiveAutocompletion: true

[coderabbitai]

Actionable comments posted: 4

🤖 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/static/virtual_lab/js/code_editor.js`:
- Line 51: The inline comment on editor.setValue(config.sample, -1) is wrong:
update the comment to correctly state that -1 moves the cursor to the start and
1 moves it to the end; if the intent was to place the cursor at the end, change
the second argument from -1 to 1 and update the comment accordingly (locate the
call to editor.setValue and the config.sample usage to make the fix).
- Line 32: Remove the redundant explicit mode set by deleting the
editor.session.setMode("ace/mode/python") call; rely on the existing
updateEditorLanguage("python") function to set the Ace mode centrally (ensure
updateEditorLanguage and any callers remain responsible for setting
editor.session.setMode to avoid duplicate calls).
- Around line 56-59: The language selector's change handler calls
updateEditorLanguage blindly, which overwrites user code; modify the
langSel.addEventListener callback to first check the current editor state (e.g.,
editor.getValue() or a tracked "isModified" flag) and only call
updateEditorLanguage immediately if the editor is empty or still matches the
original sample for the current language; otherwise prompt the user with a
confirmation dialog (or automatically persist per-language content in a map
keyed by language and restore instead of replacing) and only replace content
when the user confirms or when no custom content exists; use
updateEditorLanguage and any existing sample-provider function (or add
getSampleForLanguage) and store per-language content in a simple object to
implement the preservation behavior.
- Around line 33-39: The autocompletion options in editor.setOptions
(enableBasicAutocompletion, enableLiveAutocompletion) require the Ace language
tools extension; load the extension script (ext-language_tools.js) in the page
and, in code_editor.js, call ace.require("ace/ext/language_tools") before
calling editor.setOptions so the extension is initialized and the options take
effect.

[coderabbitai]

Actionable comments posted: 1

🤖 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/static/virtual_lab/js/code_editor.js`:
- Around line 65-94: The language switch applies editor.session.setMode too
early causing langSel.value to drift from the actual editor contents; modify
updateEditorLanguage to check hasUnsavedChanges() before calling
editor.session.setMode, and if the user cancels the confirm, revert
langSel.value back to the previous language (tracked in a new currentLanguage
variable) and return; on successful switch, call
editor.session.setMode(config.mode), then editor.setValue(config.sample, -1) and
set currentLanguage = language so the run handler (which reads langSel.value)
stays in sync with the editor contents; also initialize currentLanguage during
startup so it reflects the initially loaded language.

[coderabbitai]

Actionable comments posted: 1

🤖 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/static/virtual_lab/js/code_editor.js`:
- Around line 99-100: The editor is being initialized with a hardcoded string
("python") which can desync from the restored <select> value; instead seed the
editor with the select's current value by calling
updateEditorLanguage(langSel.value) (use the existing langSel variable) at
initialization time and ensure this call happens after langSel is defined so the
editor and dropdown stay in sync even when the browser restores form state.

[Shubhashish-Chakraborty]

Hey @Ananya44444
#875
There's already a PR opened related to this ..
You may check for that

[Shubhashish-Chakraborty]

Issue - #874
PR - #875

[ghanshyam2005singh]

@Ananya44444 everything is good, could you please provide the screen recording of running the code in different language to see if it's working or not.

[Shubhashish-Chakraborty]

Hii @ghanshyam2005singh
Actually another PR was opened for the similar issue #875 (PR), #874 (issue) .
I’ve also been working on this and have an open PR addressing it, I’m happy to update my implementation if any changes are preferred,
Please let me know how you’d like me to proceed.
Thanks!

[Ananya44444]

@ghanshyam2005singh Yes, it is working.

Screen.Recording.2026-02-25.201557.mp4