spaday-codemirror

CodeMirror 6 code editor for spaday.

Usage

spaday-codemirror provides one custom element, <spaday-codemirror>, and its typed spaday binding, CodeMirror. The package registers itself as the codemirror component package, so pages load its assets with packages=["codemirror"].

from spaday.backends.starlette import serve
from spaday_codemirror import CodeMirror


def page():
    return CodeMirror(doc="print('hello')\n", language="python", theme="dark", tab_size=4)


app = serve(page, packages=["codemirror"])

To send edits to Python, bind editor-change to an action, e.g. .on("editor-change", SendPatch("editor", "doc", event_value("doc"))), and route the spaday:patch intent to your model. example.py does this over a websocket.

Without Python, load cdn/index.js and css/index.css from spaday_codemirror/extension/ (or js/dist/) and use the tag directly:

<spaday-codemirror language="json" tab_size="2"></spaday-codemirror>

Properties

Attributes share the property names.

Setting a property updates the existing EditorView in place, so focus and scroll position are kept. Property changes never emit events.

Events

Both events bubble and are composed.

Browser examples

• Hosted Pyodide example: the example page running in a Python Web Worker.
• spaday_codemirror/example.py: two editors wired to a transports-hosted model, plus a gallery covering every language and representative settings. Python computes metrics and a normalized preview on each edit, and has Normalize and Reset actions.
• js/examples/: the Pyodide page and worker.

Run the examples locally

make develop
make build
python -m spaday_codemirror.example  # http://127.0.0.1:8031/

Build and test the Pyodide example:

make test-pyodide-example
cd dist/lite && python -m http.server