Edrys Editor Module

A lightweight code editor module for Edrys classrooms, built on Monaco Editor. It connects to other modules via the Edrys pub-sub messaging system and supports real-time synchronization across all peers in a room.

Usage

Add the module to your class using this URL:

https://edrys-labs.github.io/module-editor/index.html

Configuration

Option	Type	Default	Description
editorId	string	"default"	Unique ID to namespace shared state — set different values when using multiple editors in the same room
editorText	string	—	Initial code shown in the editor
runCommand	string	—	Message subject sent when Execute is clicked (e.g. "execute")
language	string	"cpp"	Syntax highlighting language: cpp, python, javascript, etc.
theme	string	"vs-light"	Editor theme: vs-light or vs-dark (defaults to system preference)
synchronize	boolean	true	Sync editor content across all peers in the room
readOnly	boolean	false	Make the editor read-only
showLanguageSelector	boolean	true	Show language selector in the toolbar (teachers and station only)

Single-file example

{
    "editorId": "main",
    "editorText": "// Type code here...",
    "runCommand": "execute",
    "language": "cpp",
    "theme": "vs-dark",
    "synchronize": true,
    "readOnly": false,
    "showLanguageSelector": true
}

Multi-file example

{
    "editorId": "main",
    "runCommand": "execute",
    "language": "cpp",
    "synchronize": true,
    "file": {
        "main.cpp": "#include <iostream>\nint main() {}",
        "main.h": "// header file"
    }
}

How it works

• The station holds the authoritative editor state and persists it to localStorage across refreshes.
• When a peer joins, it sends a request-state message; the station replies directly with the current content.
• While editing, changes are debounced (150ms) and broadcast to all peers in the room.
• Multiple editor instances in the same room are isolated via editorId — messages are namespaced so they never cross.
• runCommand defines the pub-sub subject published when Execute is clicked. Other modules (e.g. a terminal) can subscribe to this subject to receive and run the code.

UI

• Execute — sends the current editor content under runCommand
• Reset — restores the editor to the initial editorText value (visible to teachers and station only when editorText is set)
• Language selector — change syntax highlighting on the fly (teachers and station only)
• Sync dot — flashes orange when content is being synced, green when idle
• Right-click menu — includes save/upload and theme toggle options
• Ctrl/Cmd+S — save & upload
• Ctrl/Cmd+Enter — execute