Code editor

CodeMirror editor for SQL, JSON and YAML on the code ground.

Guidance

The code editor is CodeMirror 6 on the warm near-black code ground, in Light and Peat alike: Geist Mono at mono-editor, the mm-syn-* syntax colours, a line-number gutter and radius-md. It edits SQL, JSON (role documents) and YAML (pipeline configs), or plain text.

CodeMirror is loaded with a dynamic import in firstUpdated, so the element costs almost nothing until it is used. Until then, and during SSR, it renders a static highlighted copy of value with the same metrics, so nothing moves when the editor arrives. Set lazy="interaction" to wait for the first focus or pointer press before loading at all, for pages with many editors.

Tab indents. To leave the editor from the keyboard, press Escape and then Tab (CodeMirror's tab-focus mode), which the editor announces in its description. When a completion list is open, the first Escape closes it, so press Escape again before Tab. Code always runs left to right, even in a right-to-left page.

Diagnostics (diagnostics) draw a wavy crimson underline, a gutter mark and a message under the editor with the line and column, so an error never relies on colour alone.

The element is form-associated and submits value under name.

Properties

Property	Attribute	Type	Default	Description
language	language	CodeEditorLanguage	'text'	sql, json, yaml or text.
value	value	string	''	The text.
label	label	string	''	Accessible name of the editor ("Role document", "Pipeline config").
placeholder	placeholder	string	''	Shown when the editor is empty. Never a substitute for label.
readonly	readonly	boolean	false	Selectable and copyable but not editable.
diagnostics		EditorDiagnostic[]	[]	Inline diagnostics: [{ from, to, severity, message }] with document offsets.
resize	resize	'vertical' | 'none'	'vertical'	vertical (default) lets people drag the editor taller; none fixes the height.
lazy	lazy	'load' | 'interaction'	'load'	load (default) loads CodeMirror after first render; interaction waits for the first focus or press.
ready		boolean	false	True once CodeMirror is mounted.
view				The CodeMirror view, once loaded.
selectedText		string		The selected text, or the empty string when nothing is selected or the editor has not loaded.
name	name	string	''	Name submitted with the form.
disabled	disabled	boolean	false	Disables the control and excludes it from submission.
required	required	boolean	false	Requires a value before the form submits.
form		HTMLFormElement | null
validity		ValidityState
validationMessage		string
willValidate		boolean
isDisabled		boolean		True when disabled directly or by a disabled ancestor fieldset.

Methods

Method	Description
load()	Loads CodeMirror now. Resolves when the editor is interactive.
formResetCallback()	Restore the initial value when the owning form resets.

Events

Event	Detail	Description
input	Event
change	Event
mm-input	CustomEvent<{ value: string }>	The text changed.
mm-change	CustomEvent<{ value: string }>	The text changed and the editor lost focus.
mm-ready	CustomEvent<Record<string, never>>	CodeMirror loaded and the editor is interactive.

Slots

Slot	Description
badge	Status shown under the editor, such as a read-only note. Defaults to "Read only" with a lock when readonly.

CSS parts

Part	Description
frame	The code ground holding the editor.
fallback	The static highlighted copy shown before CodeMirror loads.
footer	The row under the editor with diagnostics and the badge.
messages	The list of diagnostic messages.

CSS custom properties

Property	Description
--mm-code-editor-height	Initial height of the editor. Defaults to 240px; people can drag it taller when resize="vertical".

Examples

Every state of mm-code-editor in Storybook, with keyboard and screen reader tests.