GrCodeEditor

A code editor in a form that cannot be left from the keyboard is a trap: the user will not reach the “Save” button, and not everyone will manage to get around it with a mouse.

Indentation with Tab is switched on with the tabIndents prop. The standard CodeMirror device then works — Esc returns to Tab the role of moving on — and a hint about that stands under the field: changing the behaviour of a key silently is not allowed.

In CodeMirror every language is a separate npm package. A built-in set would either drag into the bundle languages you do not need, or turn into an optional peer with a dynamic import that breaks the build for anyone who has not installed the package.

<script setup>
import { json } from '@codemirror/lang-json'
</script>

<GrCodeEditor v-model="config" :language="json()" />

The tick is a working mode rather than an ornament: the editor is drawn as text at once and gets highlighted when the language has arrived.

<GrCodeEditor :language="() => import('@codemirror/lang-yaml').then(m => m.yaml())" />

If there is no grammar, the built-in parsing works: language="json" is coloured by the same tokeniser as GrCodeBlock, through a bridge into CodeMirror decorations (docs/highlight.md). A config in a form therefore looks the same before mounting and after, and a block standing next to it does not turn out to be the only coloured thing on the page.

For any other language the string in language is only a name: there is no built-in parsing behind it, and the text stays one colour until a grammar arrives.

The colour in both cases comes from the same --gr-code-block-* tokens: the themes of CodeMirror are not taken in any form, otherwise the editor would become the only element of the page that does not obey the theme of the application. There are ten roles, and the correspondence with the Lezer tags is in docs/highlight.md.

@codemirror/lint is not connected: it brings a tooltip and a panel of its own that will not match the design system. Instead of a dependency there is a prop:

<GrCodeEditor v-model="config" :validate="checkJson" />

function checkJson(value: string) {
  try {
    JSON.parse(value)
    return []
  }
  catch (error) {
    return [{ from: 0, to: value.length, severity: 'error' as const, message: String(error) }]
  }
}

The prop works more broadly than a linter: the same contract gives away a YAML schema or the answer of server-side validation — a scenario a ready linter does not have at all. The remarks are linked to the field through aria-describedby, so an error stays available without sight rather than only as a coloured wave under the text.

Each remark is visible in three places, and all three agree:

• a wavy underline over the range [from, to) in the tone of its severity (error, warning, info); a point remark (from === to) is widened to one character — otherwise there is nothing to underline;
• a mark in the gutter on the line of the remark, with the text of the line’s remarks in title. The column of marks stands while validate is set and keeps its width even without remarks: otherwise the text would jump sideways at every change of verdict;
• a list item under the field starts with the line and the column — “Line 3, column 11 — Error: …” — so that the list and the underline can be matched up.

The answer of an asynchronous validate reaches both the underline and the gutter: the remarks go into the live editor as an effect, without re-creating it — the cursor and the history stay intact.

A naive wrapper over CodeMirror replaces the document as a whole and thereby resets the cursor, the selection and the undo history — on every round trip of v-model, that is, on every letter if the parent puts the value into a ref and returns it back.

Here an incoming change is applied as a transaction with a minimal replacement: the common prefix and suffix are computed, and only the middle is changed. A change born in the editor itself is not applied back — the transaction is marked, and no echo loop arises.

CodeMirror hangs the textbox role and contenteditable not on the node the component mounts but on the .cm-content inside it. A name left on the wrapper does not reach the accessibility tree — the widget reads as nameless, and axe reports aria-input-field-name.

The component therefore puts aria-label, aria-labelledby, aria-describedby, aria-invalid and aria-required onto the editable node through EditorView.contentAttributes and updates them by reconfiguration, without recreating the state. From the outside that is invisible: the label is still taken from GrFormField, and ariaLabel overrides it outside a field.

The practical conclusion for the consumer: hanging ARIA attributes of your own on the root of the component is pointless — they will not reach the widget. Everything that has to be heard is passed with props.

A package taken for the sake of GrCodeBlock or GrDiff is not obliged to install CodeMirror. The editor without it will say so honestly in dev mode and will show the code as text rather than bring the application down.

If the editor is needed, four packages are installed:

yarn add @codemirror/state @codemirror/view @codemirror/language @codemirror/commands

@codemirror/commands is not optional: it holds history, and an editor without undo is broken. @codemirror/search is not in the set — a search over a config of forty lines is not needed, and the search panel brings markup of its own; whoever needs it adds it through extensions.

Not an IDE: no LSP, no multiple cursors, no file tree, no tabs. Everything the props do not cover is available through getView() — a live EditorView, declared an escape hatch with no contract.