Module Monaco Editor

A collaborative code editor module for Edrys-Lite classrooms, built on Monaco Editor with real-time CRDT sync.

Usage

Add this URL to your Edrys-Lite classroom:

https://edrys-labs.github.io/module-monaco-editor/

Configuration

All fields are optional unless noted.

{
  "value": "// initial code shown in the editor",
  "runCommand": "execute",
  "language": "cpp",
  "theme": "vs-dark",
  "synchronize": true,
  "readOnly": false,
  "showLanguageSelector": true,
  "editorId": "editor1"
}

Field	Type	Default	Description
value	string	""	Initial code pre-loaded into the editor. Also used as the reset target.
runCommand	string	"execute"	Message subject sent to other modules when Execute is clicked.
language	string	"cpp"	Editor language. Any Monaco-supported language is valid (e.g. python, javascript, rust).
theme	string	system preference	Editor color theme: vs-dark or vs-light. Defaults to the OS dark/light preference.
synchronize	boolean	true	Sync editor content in real time across all peers in the room via CRDT.
readOnly	boolean	false	Make the editor read-only for all roles.
showLanguageSelector	boolean	true	Show the language dropdown in the toolbar (teachers and stations only).
editorId	string	"default"	Unique namespace for shared state. Required when using multiple editors in the same room — set a different value on each instance (e.g. "editor1", "editor2").

Role behavior

Feature	Student	Teacher	Station
Edit code	yes	yes	yes
Execute button	yes	yes	yes
Reset button	no	yes (requires value)	yes (requires value)
Language selector	no	yes	yes

Setting readOnly: true hides Execute and disables editing for all roles.

Connecting to other modules

runCommand defines the message subject published when Execute is clicked. The message body is the current editor content (or the selected text if a selection exists).

Modules like pyxtermjs can be configured to listen on this subject and execute the received code.

Multiple editors in the same room

When placing more than one Monaco Editor module in the same room, set a unique editorId on each instance. Without it, all instances share the same CRDT state and will mirror each other.

{ "editorId": "editor1", "language": "cpp" }
{ "editorId": "editor2", "language": "python" }

Development

nvm use 24
npm install
npm run watch   # dev server on port 3001
npm run build   # production build → docs/