code

Sometimes, it's nice to be able to just toss a code-editor in a web-page.

<tosi-code>'s value is the code it contains. Its mode attribute sets the language (javascript, typescript, tjs, css, html, markdown).

<tosi-code style="width: 100%; height: 100%" mode="css">
body {
  box-sizing: border-box;
}
</tosi-code>

Properties & events

member	what it does
`value`	the code in the editor (get/set)
`mode`	`javascript`, `typescript`, `tjs`, `ajs`, `css`, `html`, `markdown`
`disabled`	makes the editor read-only
`original` + `showDiff(on)`	diff the current `value` against a baseline, as an overlay
`editor`	the underlying CodeMirror `EditorView` (`undefined` until loaded)
`undo()` / `redo()` / `canUndo()` / `canRedo()`	history control
`tjsAutocomplete`	runtime-value autocomplete hooks (tjs mode) — see below
`change` event	fires when the text changes; `event.detail.value` is the new text

In tjs/ajs mode the editor loads tjs-lang's CodeMirror language and completion source (if tjs-lang is installed — it's an optional peer). Set tjsAutocomplete to a TjsAutocompleteConfig and completion will suggest the real members of live runtime values — including proxy members no static analysis can see:

codeEl.tjsAutocomplete = { getLiveBindings: () => ({ app, elements }) }

Bundling

CodeMirror is a lazy chunk: with a bundler (ESM), a page that never uses <tosi-code> doesn't load it. This is not true of the IIFE (dist/iife.js) — bun's IIFE format cannot code-split, so CodeMirror is inlined there. That is a deliberate trade: the doc-system's editor (and its save-to-source flow) is the point of the IIFE, so it carries the editor. It costs ~376KB gzipped, up from ~118KB in 1.6.x.

Migrating from the ACE editor (pre-1.7)

1.7 replaced ACE with CodeMirror 6. value, original/showDiff(), mode and disabled are unchanged. Removed (each warns once, then no-ops):

removed	replacement
`theme`	style with `--code-bg` / `--text-color`
`options` (ACE-shaped)	configure via `editor` (an `EditorView`)
`ace`	there is no ACE global; use `editor`
`editor.session.getUndoManager()`	`undo()` / `redo()` / `canUndo()` / `canRedo()`

editor changed type in place — it was an ACE Editor, it is now a CodeMirror EditorView. Code that reached into it needs revisiting; a grep for removed names won't catch this one.