CodeMirror

A CodeMirror 6 source-code editor exposed as an editor item. It provides syntax highlighting per language and follows the active SVAR theme unless a theme is forced. It is not auto-registered - register it under a comp name before use. The CodeMirror library lazy-loads from the SVAR CDN on first render.

Usage

import { CodeMirror } from "@svar-ui/react-editor";

In addition to the standard value/onChange item props:

Prop	Type	Default	Description
value	string	-	Editor content; bound to the field key when used as an item.
language	string	"javascript"	Syntax mode (e.g. "markdown", "css"); applied reactively when it changes.
theme	string	""	Explicit theme name; empty auto-detects "light"/"dark" from the SVAR theme.
readonly	boolean	false	Maps to CodeMirror's readOnly option.
focus	boolean	false	Focuses the editor when value changes.
onChange	({ value }: { value: string }) => void	-	Fires on every edit; value is the full current text.

Filling the available height

By default editor has a fixed height, use fill: true to stretch the editor to the max available height. See item config and input controls for details.

Example

import { Editor, Willow, registerEditorItem, CodeMirror } from "@svar-ui/react-editor";

registerEditorItem("code-mirror", CodeMirror);

const items = [
  { comp: "code-mirror", key: "source", language: "javascript" }
];
const values = { source: "const x = 1;" };

function App() {
  return (
    <Willow>
      <Editor items={items} values={values} placement="sidebar" autoSave={false} />
    </Willow>
  );
}

Related articles

• Input controls
• registerEditorItem