Редактор MDC-компонентов: отчёт о состоянии и план перестройки

Что проверялось: app/components/ContentEditor.vue, весь каталог app/components/editor/mdc/, компоненты app/components/content/*, разметка content/2.activity/2.news/example-mdc.md. Окружение: Nuxt 4.2 · Nuxt UI 4.3 (UEditor) · TipTap 3.17 · @nuxtjs/mdc 0.20 · remark-mdc 3.10 · @nuxt/content 3.10. Статус: план выполнен целиком, этапы 1–7. Разметку читает и пишет мост через MDC AST, блок стал контейнерным узлом ProseMirror, текст правится основным редактором, параметры — типизированной панелью, вид редактора совпадает со страницей, дубли компонентов убраны.

Коротко

Редактор рисует MDC-блоки настоящим рендерером страницы — это правильно и это работает. Но тело блока хранится в узле TipTap строкой markdown, а не документом. Из одного этого решения вырастает всё остальное: вложенные редакторы внутри блока, служебные заглушки ::mdc-seg, ручная ловля каретки, два разных вида одного и того же блока, панель «ключ = значение» вместо нормальных элементов управления и — что серьёзнее всего — пять воспроизводимых случаев, когда редактор молча портит разметку. Для двух из них достаточно кликнуть в блок, ничего не набирая.

Лечится это не заплатками, а сменой схемы: блок должен стать обычным контейнерным узлом ProseMirror с содержимым, а перевод markdown ⇄ документ — идти через MDC AST (parseMarkdown / stringifyMarkdown), а не через самописные регулярные выражения.

1. Как устроено сейчас

Путь материала от файла до файла проходит через четыре преобразования, и ни одно из них не является обратным другому:

Правка текста внутри блока устроена отдельным механизмом: на время редактирования тело пересобирается, куски текста подменяются служебным ::mdc-seg{i="N"}, а рендерер ставит на их место MdcSegment.vue — ещё один полноценный экземпляр UEditor (editor/mdc/segments.ts, MdcSegment.vue).

2. Что ломается: воспроизведённые случаи

У редактора два независимых пути, и портят они материал по-разному.

2.1. Порча при сохранении материала

Открыли материал, ничего не набрали, сохранили.

Кавычки внутри значения атрибута обрезают его

Было:  ::alert{title="Он сказал: \"да\""}
Стало: ::alert{title="Он сказал: \"}

Регулярка \{[^}]*\} не знает про экранирование. Кусок заголовка исчезает без предупреждения.

Фигурная скобка в значении уничтожает блок целиком

Было:  ::alert{title="{вот так}"}
Стало: :"}

Открывающая строка перестаёт распознаваться как блочная, обработчик строчных элементов принимает её за :alert{…} — и от врезки в материале не остаётся ничего, кроме огрызка. Текст внутри неё выживает, оформление пропадает.

Строчные элементы стираются

Было:  Текст :icon{name="i-lucide-star"} дальше.
Стало: Текст  дальше.

Это оба строчных элемента, которые редактор предлагает в своём же меню, — :icon и :kbd. Причина: MdcInline объявляет сериализатор через addStorage().markdown — приём @tiptap/markdown второй версии. Третья читает renderMarkdown из конфигурации расширения, как это и сделано у MdcBlock. Обработчик просто не зовётся, узел выпадает из документа.

2.2. Порча от одного клика в блок

Здесь достаточно открыть врезку посмотреть: тело блока пересобирается с заглушками, куски уезжают во вложенный редактор и возвращаются уже другими. Ни одного символа набирать не нужно.

YAML-параметры блока превращаются в заголовок

Было:  ---            Стало:  ---
       defaultValue:           ## defaultValue:
         - '1'                   - '1'
       ---

Разборщик кусков не отличает YAML-врезку от абзаца и отдаёт её вложенному редактору как обычный текст. Тот видит --- под строкой и читает это как заголовок в стиле setext. После сохранения параметры блока — уже не параметры, а текст. Именно так устроен ::accordion в example-mdc.md.

Разметка переписывается сама

_курсив_ становится *курсив*; список, стоявший сразу под строкой текста, отрывается от неё пустой строкой. Вид материала при этом не меняется — но файл меняется, и правка попадает в историю изменений как чужая.

Отдельно стоит buildBody() в ContentEditor.vue: если сериализатор потерял блоки, последний резерв дописывает их в конец документа. Порядок материала при этом меняется молча.

2.3. Что оказалось цело

Проверено тем же прогоном, фиксируется сторожами, чтобы не сломалось при перестройке: весь example-mdc.md проходит круг посимвольно; переживают сохранение все тринадцать блочных шаблонов из меню, пустое значение атрибута (title=""), сокращения .класс и #якорь, вложенные карточки в группе, YAML-параметры блока — если в него не заходить.

Расхождение двух реализаций attrsToInline (в parser.ts и в serialize.ts) при этом никуда не делось: одна пишет title="", другая выбрасывает атрибут. На основном пути работает первая, вторая ждёт своего часа на резервном.

3. Что неудобно в правке

• Вложенные редакторы. Каждый кусок текста в блоке — отдельный экземпляр UEditor со своей историей. Ctrl+Z снаружи не отменяет то, что набрано внутри блока. На странице вроде example-mdc.md таких экземпляров создаётся несколько десятков.
• Выделение не пересекает границу блока. Узел объявлен atom: true — протянуть выделение от абзаца над блоком к тексту внутри него нельзя, скопировать «кусок статьи вместе с врезкой» — тоже.
• Вложенные блоки не существуют как объекты. ::card внутри ::card-group, ::tab внутри ::tabs, ::accordion-item — всё это строки в теле родителя. Добавить вкладку, поменять их местами, удалить карточку мышью невозможно: только набрать markdown руками в панели «Параметры».
• Параметры вводятся как «ключ = значение». Чтобы поменять тип уведомления, нужно открыть панель, найти строку type, вписать warning. Иконка — вписать i-lucide-… по памяти. Ровно то, чего быть не должно. Закрыто этапом 4.
• Задержки и ловля каретки. Вход в правку ждёт асинхронного разбора, потом ждёт, пока вложенный редактор сообщит, как в него встать (waitForSegments, до 3 секунд), потом угадывает нужный кусок по высоте клика. Запись в узел идёт с задержкой 400 мс.
• Разметка на время правки показывается символами. Кликнув в текст, редактор видит **жирный** вместо жирного — обратно из DOM markdown не собрать.

4. Почему в редакторе и на странице разный вид

Причины независимы друг от друга и лечатся по отдельности.

Нет обёртки .content-body. Тело редактора — это .tiptap без неё. А вся типографика материала висит ровно на этом хуке (app/assets/css/main.css): мера строки 75ch у заголовков, отступ между абзацами 1.5em, text-wrap: pretty, выключка, переносы, масштаб текста из панели «Как читать». В редакторе не применяется ничего из этого.

Три разных представления одного материала. Внутри блока — ContentRenderer без .content-body; вокруг блока — типографика UEditor из темы Nuxt UI; кнопка «Предпросмотр» — третий вид, уже с .content-body, но по сохранённым данным коллекции.

Дублирующиеся наборы компонентов. Nuxt UI 4 регистрирует свою карту соответствий (mdc.components.map в модуле): card → ProseCard, card-group → ProseCardGroup, tabs → ProseTabs, callout/note/tip/warning/caution, accordion, steps, collapsible, badge, kbd, icon. Карта применяется при отрисовке и имеет приоритет над одноимёнными компонентами проекта. Отсюда:

То есть в меню редактора соседствуют два набора с пересекающимися задачами, а часть кода в app/components/content/ мертва.

5. Целевая схема

Всё описанное снимается одним решением: тело MDC-блока должно быть содержимым узла, а не строкой атрибута. Это штатный способ TipTap для контейнеров, а не изобретение.

Блок — контейнерный узел с NodeViewContent

mdcBlock объявляется с content: 'block+', его вид рисует оболочку компонента и ставит внутрь <NodeViewContent>. Текст правится тем же самым внешним редактором: общая история отмен, общее выделение, те же панели и слэш-меню, никаких вложенных экземпляров, никаких ::mdc-seg, никакой ловли каретки и задержек. Вложенные элементы (::card в группе, ::tab, ::accordion-item) — обычные дочерние узлы mdcItem, поэтому перетаскивание, Enter, Backspace и удаление работают из коробки.

Перевод разметки — через MDC AST, а не регулярками

• markdown → MDC AST — parseMarkdown из @nuxtjs/mdc/runtime (тот же парсер, что у страницы);
• MDC AST ⇄ документ TipTap — один собственный мост, единственное место с логикой соответствия;
• MDC AST → markdown — stringifyMarkdown из @nuxtjs/mdc/runtime/stringify (проверено: модуль есть в установленной версии). Синтаксис ::name{…} пишет remark-mdc, который его и читает — круг замыкается по определению.

UEditor при этом переводится на content-type="json", markdown остаётся только на границах загрузки и сохранения. Уходят: parser.ts, serialize.ts, оба attrsToInline, три резервных пути в buildBody() и зависимость горячего пути от @tiptap/markdown.

Один реестр компонентов

shared/utils/mdc-registry.ts — единственный источник правды: имя, подпись, иконка, типизированная схема атрибутов (перечисление / иконка / строка / ссылка / флаг), какой компонент рисует, какие дети допустимы, шаблон вставки. Из него собираются слэш-меню, схема узлов, панель параметров и тесты. Сейчас эти сведения размазаны по templates.ts, MDC_META, обработчикам в ContentEditor.vue и карте Nuxt UI.

Параметры — панелью у блока, без окон и без «ключ = значение»

Курсор внутри блока — над блоком всплывает его панель (штатный UEditorToolbar с layout="bubble" и своим should-show, как уже сделано для таблиц): переключатель типа врезки, выбор иконки списком с поиском, «заголовок вкл/выкл», дублировать, удалить. Заголовок блока правится как текст — отдельным дочерним узлом внутри содержимого. Панель «Параметры» с текстовым полем исходника и парами ключ/значение убирается совсем.

Один вид

Тело редактора оборачивается в .content-body, оболочки блоков берутся у тех же Prose-компонентов, что рисуют страницу. Настройки панели «Как читать» (кегль, выключка, переносы) начинают действовать и в редакторе — для сайта слабовидящих это не мелочь: редактор тоже рабочее место, и оно тоже должно масштабироваться.

6. План работ

7. Принятые решения

Развилки закрыты 25 августа 2026 года.

1. Врезка — своя, ::alert

Alert.vue остаётся основной врезкой: он доведён по контрасту до всех 14 схем оформления, ProseCallout такой проверки не проходил. Контент на ::callout не переводится.

При этом ::callout, ::note, ::tip, ::warning и ::caution из Nuxt UI продолжают рисоваться — в материалах уже 11 таких блоков, ломать их нельзя. Разница только в меню: врезку редактор предлагает одну, свою; остальные пять живут в реестре как поддерживаемые, но не предлагаемые к вставке.

2. Вкладки — на компоненты Nuxt UI

::tab → ::tabs-item, дочерний элемент рисует ProseTabsItem. Проектные Tab.vue и Tabs.vue удаляются. Разовая правка двух файлов входит в этап 6, объём — три вхождения.

3. Кнопку «Предпросмотр» не трогаем

Остаётся как есть до конца перестройки. Вернуться к вопросу имеет смысл после этапа 5, когда редактор и страница станут выглядеть одинаково — тогда и будет видно, нужна ли она.

4. Существующие материалы не трогаем

Массовый прогон content/**/*.md через мост и поиск уже испорченных мест — отдельная задача на потом, в этот план не входит. Сторожа из этапа 1 гарантируют, что новых повреждений не появится.

Оценка

Этапы 1–3 имеют смысл только вместе: они закрывают порчу разметки и снимают вложенные редакторы. Этапы 4–7 после них делаются независимо и в любом порядке.