spaday-codemirror 0.1.1

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.

Theming

Editor chrome follows spaday's shell palette. Component tokens can be set on the editor or any ancestor; spaday_codemirror.TOKENS exposes the same names for Python css() calls.

Syntax colors remain owned by CodeMirror's light and One Dark themes. For example, CodeMirror(...).css(spa_codemirror_surface="#111", spa_codemirror_text="#ddd") changes one editor without changing the rest of the application.

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