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/vue-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

<script setup>
import { Editor, Willow, registerEditorItem, CodeMirror } from "@svar-ui/vue-editor";

registerEditorItem("code-mirror", CodeMirror);

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

<template>
  <Willow>
    <Editor :items="items" :values="values" placement="sidebar" :autoSave="false" />
  </Willow>
</template>

Related articles

• Input controls
• registerEditorItem