GrCodeEditor

Редактор кода в форме, из которого нельзя выйти клавиатурой, — ловушка: до кнопки «Сохранить» пользователь не доберётся, а обойти её мышью получится не у всех.

Отступ по Tab включается пропом tabIndents. Тогда работает штатный приём CodeMirror — Esc возвращает Tab роль перехода, — и подсказка об этом стоит под полем: молча менять поведение клавиши нельзя.

У CodeMirror каждый язык — отдельный npm-пакет. Встроенный набор либо тащил бы в бандл языки, которых вам не нужно, либо превращался в optional peer с динамическим импортом, ломающим сборку у того, кто пакет не поставил.

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

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

Тик — рабочий режим, а не украшение: редактор рисуется сразу как текст и подсвечивается, когда язык приехал.

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

Грамматики нет — работает встроенный разбор: language="json" красится тем же токенизатором, что и GrCodeBlock, через мост в декорации CodeMirror (docs/highlight.md). Поэтому конфиг в форме выглядит одинаково до монтирования и после, а рядом стоящий блок не оказывается единственным цветным на странице.

Для любого другого языка строка в language — только имя: встроенного разбора за ней нет, и текст остаётся одноцветным, пока не приедет грамматика.

Цвет в обоих случаях приходит из одних токенов --gr-code-block-*: темы CodeMirror не берутся ни в каком виде, иначе редактор стал бы единственным элементом страницы, не слушающимся темы приложения. Ролей десять, соответствие тегам Lezer — в docs/highlight.md.

@codemirror/lint не подключается: он приносит свои тултип и панель, которые не совпадут с дизайн-системой. Вместо зависимости — проп:

<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) }]
  }
}

Проп работает шире линтера: тем же контрактом отдаётся схема YAML или ответ серверной валидации — сценарий, которого у готового линтера нет вовсе. Замечания связываются с полем через aria-describedby, поэтому ошибка остаётся доступной без зрения, а не только цветной волной под текстом.

Каждое замечание видно в трёх местах, и все три совпадают:

• волнистое подчёркивание на диапазоне [from, to) в тоне важности (error, warning, info); точечное замечание (from === to) расширяется до одного символа — иначе подчёркивать нечего;
• метка в жёлобе на строке замечания, с текстом замечаний строки в title. Колонка меток стоит, пока задан validate, и держит ширину и без замечаний: иначе текст прыгал бы вбок на каждой смене вердикта;
• пункт списка под полем начинается со строки и столбца — «Line 3, column 11 — Error: …», — чтобы список и подчёркивание сопоставлялись.

Ответ асинхронного validate доезжает и до подчёркивания, и до жёлоба: замечания уходят в живой редактор эффектом, без пересоздания — курсор и история целы.

Наивная обёртка над CodeMirror заменяет документ целиком и сбрасывает этим курсор, выделение и историю undo — на каждом раунд-трипе v-model, то есть на каждой букве, если родитель кладёт значение в ref и возвращает обратно.

Здесь входящее изменение применяется транзакцией с минимальной заменой: считается общий префикс и суффикс, меняется только середина. Изменение, рождённое самим редактором, обратно не применяется — транзакция помечена, и эхо-петли не возникает.

Роль textbox и contenteditable CodeMirror вешает не на тот узел, который монтирует компонент, а на .cm-content внутри него. Имя, оставленное на обёртке, до доступного дерева не доходит — виджет читается безымянным, и axe сообщает aria-input-field-name.

Поэтому aria-label, aria-labelledby, aria-describedby, aria-invalid и aria-required компонент кладёт на редактируемый узел через EditorView.contentAttributes и обновляет их реконфигурацией, без пересоздания состояния. Снаружи это незаметно: подпись по-прежнему берётся из GrFormField, а ariaLabel перекрывает её вне поля.

Практический вывод для потребителя: собственные ARIA-атрибуты вешать на корень компонента бессмысленно — они не доедут до виджета. Всё, что должно быть услышано, передаётся пропами.

Пакет, взятый ради GrCodeBlock или GrDiff, ставить CodeMirror не обязан. Редактор без него честно скажет об этом в dev-режиме и покажет код текстом, а не уронит приложение.

Нужен редактор — ставится четыре пакета:

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

@codemirror/commands не факультативен: в нём history, а редактор без undo сломан. @codemirror/search в набор не входит — поиск по конфигу на сорок строк не нужен, а панель поиска приносит свою вёрстку; кому нужен, добавляет через extensions.

Не IDE: без LSP, без множественных курсоров, без файлового дерева, без вкладок. Всё, чего не покрывают пропы, доступно через getView() — живой EditorView, объявленный escape hatch’ем без контракта.