@olddevs/ui 0.0.0-stage → 4.0.0

package/docs/components/content/rich-text-view.md

@@ -0,0 +1,324 @@
+---
+component: RichTextView
+exports:
+  [
+    RichTextView,
+    RichTextViewProps,
+    sanitizeRichText,
+    RichTextPurifier,
+    RichTextAttributeHookEvent,
+    richTextSanitizeConfig,
+    RichTextSanitizeConfig,
+    richTextSchema,
+    RichTextSchema,
+    RichTextCustomBlockRules,
+    RichTextCustomMarkRules,
+    highlightCodeBlocks,
+  ]
+category: content
+status: stable
+source: src/editor/RichTextView.tsx
+story: src/editor/RichTextView.stories.tsx
+---
+
+# RichTextView
+
+## Кратко для AI
+
+`RichTextView` — показ сохранённого HTML `RichTextEditor` с той же типографикой, что внутри Редактора. **Движка нет**: в графе модулей ни Tiptap, ни lowlight — компонент рендерится в серверном компоненте и сам не содержит `"use client"`; клиентских частей в графе две, обе — Острова: кнопка «Копировать» у блоков кода и (только при пропе `tools` и своём Блоке в Документе) Остров своего Блока (раздел «Остров своего Блока»). **Он не санитизирует HTML**: `html` должен прийти от сервера уже очищенным по белому списку Схемы — `sanitizeRichText(html, DOMPurify)` из `@olddevs/ui/editor/schema` (раздел «Санитизация»). Живёт во входе `@olddevs/ui/editor`, не в barrel. **Подсветку блоков кода не делает сам**: HTML подсвечивает на сервере `highlightCodeBlocks(html)` из `@olddevs/ui/editor/highlight` после очистки, а `RichTextView` красит готовые токены темой GitHub Light/Dark. У каждого блока кода есть шапка с языком слева и кнопкой «Копировать» справа (раздел «Кнопка „Копировать“ и шапка»).
+
+```tsx
+import { RichTextView } from "@olddevs/ui/editor";
+```
+
+## Когда использовать
+
+- Страница показывает Документ, который сохранил `RichTextEditor`: статью, описание, регламент.
+- Компонент нужен в серверном компоненте или там, где тащить Tiptap ради чтения нельзя.
+
+## Когда не использовать
+
+- HTML пришёл от пользователя и сервер его не очищал — сначала очистка (раздел «Санитизация»), потом показ. Компонент положит в страницу всё, что получит.
+- Нужна правка — `RichTextEditor`. Его `readOnly` держит движок живым ради текста, который не меняется; для страницы, которая только показывает Документ, берите `RichTextView`.
+- Произвольный HTML вне Схемы (`style` вне цвета автора, `thead`, `caption`, картинки без `figure`): типографика рассчитана на теги Схемы, остальное будет выглядеть как у браузера по умолчанию.
+- Короткий однострочный текст — `Text`.
+
+## Минимальный пример
+
+В Next.js вход `@olddevs/ui/editor` должен стоять в `optimizePackageImports` своей строкой ([getting-started.md](../../getting-started.md#пакет-в-серверных-компонентах)): иначе вместе с Просмотром в браузер уедет весь Редактор с движком — 435 кБ `First Load JS` вместо 137 кБ.
+
+```tsx
+// Серверный компонент: директива не нужна.
+import { RichTextView } from "@olddevs/ui/editor";
+
+export default async function ArticlePage({ id }: { id: string }) {
+  const article = await loadArticle(id); // article.html очищен при сохранении
+  return <RichTextView html={article.html} className="max-w-prose" />;
+}
+```
+
+## Public API
+
+- `html` — сохранённый Документ, HTML-строка. **Не санитизируется**: кладётся в разметку через `dangerouslySetInnerHTML`, как есть. Пустая строка даёт пустой контейнер.
+- `className` — добавляется **после** классов типографики и может их переопределять.
+- `surface` — `"theme"` (по умолчанию) или `"paper"`: светлый Лист в любой теме, см. «Поверхность». Тип — `RichTextSurface`.
+- `tools` — свои Инструменты Документа, тот же массив, что у `RichTextEditor` и `sanitizeRichText`. Просмотр читает из него только Острова своих Блоков (`blocks[имя].island`, тип `CustomIslandProps`); без `tools` Просмотр прежний (раздел «Остров своего Блока»).
+- Остальное — обычные пропсы `div`: `id`, `aria-*`, `data-*`, `ref`. `children` и `dangerouslySetInnerHTML` не принимаются.
+- `highlightCodeBlocks(html)` — серверная подсветка блоков кода, вход `@olddevs/ui/editor/highlight` (раздел «Подсветка блоков кода»). Пропа для этого у `RichTextView` нет намеренно.
+- `sanitizeRichText(html, purify, tools?)` — очистка HTML по Схеме экземпляром DOMPurify, который передаёт потребитель; ставит хуки Схемы на время вызова. Тип экземпляра — структурный `RichTextPurifier` (событие хука — `RichTextAttributeHookEvent`). Третий аргумент — тот же массив `tools`, что у Редактора: с ним проходят свои Блоки и Метки по их правилам (раздел «Свои Инструменты: третий аргумент»); без него очистка прежняя. Безопасный путь по умолчанию (раздел «Санитизация»).
+- `richTextSchema(tools?)` — Схема данными для набора `tools`: поля `RICH_TEXT_SCHEMA` плюс `customBlocks` и `customMarks` — правила своих Блоков и Меток (`RichTextCustomBlockRules`, `RichTextCustomMarkRules`). Тип — `RichTextSchema`. Сама константа `RICH_TEXT_SCHEMA` — по-прежнему Схема кита.
+- `richTextSanitizeConfig()` — закрытый конфиг очистки для DOMPurify без хуков: безопасен сам по себе, но часть разметки Редактора теряет. Тип — `RichTextSanitizeConfig`.
+- `sanitizeRichText`, `richTextSchema` и `richTextSanitizeConfig` — только данные и функции, без зависимостей; в серверном модуле безопасны. Лёгкий вход — `@olddevs/ui/editor/schema`, из `@olddevs/ui/editor` доступны тоже.
+
+Типографика — тот же модуль `src/editor/styles/prose.ts`, что вешает классы на содержимое Редактора: текст в Редакторе и на странице выглядит одинаково. Классы лежат на контейнере и находят теги по имени, поэтому в HTML Документа классов и `style` нет. Цвета берутся из токенов кита, и темы `dark`, `light`, `dim` переключаются сами. Отдельный `@source` для Tailwind не нужен: строка из [getting-started.md](../../getting-started.md) покрывает классы.
+
+## Лист: `surface`
+
+`surface="paper"` — светлый Лист в любой теме приложения, как у [`RichTextEditor`](../inputs/rich-text-editor.md#лист-surface): текст, ссылки, палитры, маркеры, таблицы, подписи и блоки кода (GitHub Light) выглядят как в светлой теме, а Лист отделён от страницы рамкой и тенью темы приложения. По умолчанию (`"theme"`) Документ следует теме приложения и фона не красит.
+
+```tsx
+<RichTextView html={cleanHtml} surface="paper" />
+```
+
+**Когда брать Лист:** предпросмотр печати и PDF, показ письма или документа, который уйдёт из приложения светлым. Документ, который читают только в приложении, остаётся на `"theme"`. Всё вокруг Листа — заголовки страницы, кнопки, меню — в теме приложения: Лист покрывает только контейнер `RichTextView`.
+
+Компонент остаётся серверным: Лист — это классы и атрибуты контейнера (`data-theme="light"`, `data-surface="paper"`), без `style` и без клиентского кода. Один и тот же Документ на Листе выглядит одинаково в Редакторе и здесь — это сверяет тест.
+
+## Схема и безопасность
+
+Схема — единственный источник допустимой разметки Редактора: всё, чего в ней нет, он отбрасывает и при загрузке, и при вставке. `RichTextView` Схему **не проверяет**: показ идёт без разбора HTML.
+
+Белый список тегов и атрибутов (таблица повторяет `src/editor/core/schema.ts` и проверяется тестом; список растёт вместе с набором Блоков и Меток):
+
+<!-- allow-list -->
+
+| Что      | Разрешено                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Блоки    | `p`, `h1`, `h2`, `h3`, `h4`, `ul`, `ol`, `li`, `blockquote`, `hr`, `pre`, `table`, `tbody`, `tr`, `th`, `td`; `label`, `input`, `span` — только внутри пункта чек-листа; `div` — там же, а ещё Раскладка и её колонки (Раскладка — только на верхнем уровне, колонка — только прямо в ней) и Обёртка (на верхнем уровне и прямо в колонке, не в другой Обёртке); `figure` — картинка, внутри неё `img` и необязательная `figcaption` (вне `figure` их нет)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| Метки    | `strong`, `em`, `u`, `s`, `code`, `sup`, `sub`, `mark` (только с цветом), `br`, `a`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| Атрибуты | `ol[start]` — только когда нумерация не с 1; `ul[data-type]`, `li[data-type]`, `li[data-checked]` — чек-лист; `input[type]`, `input[checked]` — его флажок; `code[class]` — язык блока кода, только «language-python», «language-typescript», «language-javascript», «language-go», «language-html», «language-json», «language-yaml» или «language-markdown» (без языка класса нет); `span[data-color]`, `mark[data-color]` — цвет текста и маркер, только имена палитры этого тега: на `span` цвета текста, на `mark` маркера; `span[style]`, `mark[style]` — произвольный цвет автора, только «color:#rrggbb» и «background-color:#rrggbb», и не вместе с «data-color»; `p[data-align]`, `h1[data-align]`, `h2[data-align]`, `h3[data-align]`, `h4[data-align]` — выравнивание Блока, по центру или справа; `th[colspan]`, `td[colspan]` — слияние по горизонтали, целое от 2 до 20; `th[rowspan]`, `td[rowspan]` — по вертикали, от 2 до 50; `th[data-align]`, `td[data-align]` — выравнивание столбца, по центру или справа, на каждой его ячейке; `a[href]` — только «http», «https» или «mailto»; `a[rel]` — всегда «noopener noreferrer»; `img[src]` — только абсолютный «http» или «https», без «data:» и «blob:»; `img[alt]` — всегда, пустой у картинки без описания; `img[data-width]` — 50, 75 или 100; `div[data-block]` — Раскладка («layout»), её колонка («column») и Обёртка («wrapper»); `div[data-layout]` — вариант Раскладки, доли колонок в процентах: «100», «50-50», «33-33-33», «25-25-25-25», «60-40» или «40-60»; `div[data-tone]` — тон Обёртки, только на ней: «neutral», «accent», «success», «warning» или «danger» (без тона атрибута нет) |
+
+Пункт чек-листа Tiptap пишет так: `<li data-type="taskItem" data-checked="true"><label><input type="checkbox" checked><span></span></label><div><p>…</p></div></li>`. `sanitizeRichText` пускает `input`, `label`, `span` и `div` только внутри такого пункта, а `input` — только с `type="checkbox"`.
+
+Таблицу Редактор пишет так: `<table><tbody><tr><th><p>…</p></th></tr><tr><td colspan="2" data-align="center"><p>…</p></td></tr></tbody></table>`. Строка-заголовок — первая строка из `th`, а у ячейки бывают только три атрибута: `colspan` и `rowspan` (слияние, целое от 2 до `RICH_TEXT_SCHEMA.tableSpans`: 20 по горизонтали и 50 по вертикали; 1 не пишется) и `data-align` (выравнивание столбца, `center` или `right`, на каждой ячейке столбца). Строка, целиком накрытая слиянием сверху, остаётся пустой `<tr></tr>`. `thead`, `tfoot`, `colgroup`, `caption` в Схеме нет, и **DOMPurify по умолчанию вместе с `thead` и `colgroup` убирает и их содержимое**: заголовок таблицы, пришедшей не из Редактора, записанный в `thead`, пропадёт. Редактор `thead` не пишет, так что для его HTML это не потеря. `tbody`, `tr`, `th` и `td` вне таблицы парсер HTML выбрасывает до очистки (текст остаётся), `style` и `colwidth` не проходят, а `colspan` и `rowspan` пропускает только хук `sanitizeRichText`: на `th` и `td` и только цифрами в пределах Схемы; голый конфиг их не знает вовсе. Без такой проверки `colspan="10000"` из HTML не от Редактора развернётся в 10 тыс. пустых ячеек у каждого, кто откроет Документ.
+
+Других классов, `style` (кроме произвольного цвета, см. ниже), `aria-*` и `data-*` (кроме восьми имён Схемы: `data-type` и `data-checked` чек-листа, `data-color` цвета, `data-align` выравнивания, `data-width` ширины картинки, `data-block` и `data-layout` Раскладки и `data-tone` Обёртки) в отдаваемом HTML нет. `h1` в Документе бывает только у Редактора с Инструментом `heading1` (по умолчанию в `full`); экран, у которого H1 стоит над Редактором, этот Инструмент выключает.
+
+**Картинку** Редактор пишет так: `<figure><img src="https://…" alt="…" data-width="50"><figcaption>…</figcaption></figure>`. `figcaption` есть, только когда подпись не пуста, `data-width` есть только у картинки с заданной шириной (`50`, `75` или `100` процентов ширины Документа, `RICH_TEXT_SCHEMA.imageWidths`; без него размер у картинки свой, не шире Документа), `alt` есть всегда и пуст у картинки без описания. Адрес может быть только абсолютным `http` или `https` (`RICH_TEXT_SCHEMA.imageProtocols`): `data:` (base64) и `blob:` Редактор не пишет никогда, а `style`, `width`, `height` и `class` у картинки не бывает ни у `img`, ни у `figure`. Голый `<img>` вне `figure` Редактор не отдаёт; `sanitizeRichText` его удаляет.
+
+**Цвет и выравнивание — имена, а не значения CSS.** `data-color` принимает только имена палитры Редактора, и палитр две, по одной на тег. На `span` (цвет текста) допустимы `accent`, `success`, `warning`, `danger`, `lime`, `muted` (`RICH_TEXT_SCHEMA.textColors`), на `mark` (маркер) — `gray`, `brown`, `orange`, `yellow`, `green`, `blue`, `purple`, `pink`, `red` (`RICH_TEXT_SCHEMA.markerColors`): яркие `yellow`, `green`, `pink` предлагает меню Редактора, остальные шесть остаются читаемыми и красятся прежними значениями; имя из палитры другого тега на теге не проходит. Документы, сохранённые до палитры маркера, содержат на `mark` шесть старых имён; они переводятся (`RICH_TEXT_SCHEMA.legacyMarkerColors`, таблица в [документации Редактора](../inputs/rich-text-editor.md#цвет-маркер-и-выравнивание)): `sanitizeRichText` делает это хуком, а сам `RichTextView` красит старое имя тем же цветом, в который оно переводится. `data-align` — `center` или `right` (`left` Редактор не пишет, а читает как отсутствие атрибута; `RICH_TEXT_SCHEMA.alignments`). Конкретные цвета подставляет тема, поэтому один и тот же сохранённый текст читается в `dark`, `light` и `dim`: `RichTextView` и Редактор красят `data-color` теми же классами (`prose.ts`). DOMPurify значений атрибутов не проверяет — это делают хуки `sanitizeRichText`.
+
+**Порядок Меток у маркера.** Редактор пишет маркер самой внешней Меткой после цвета текста (`<span data-color><mark><sup>…`), и полоса не смещается на индексах и не рвётся на ссылке. `RichTextView` HTML не перестраивает: Документ, сохранённый раньше как `<sup><mark>…</mark></sup>`, показывается в старом порядке, и часть маркера на индексе поднимается вместе с ним. Порядок выправляется, когда Документ один раз открывают и сохраняют в Редакторе.
+
+**Произвольный цвет — единственное исключение из «`style` нет».** Кроме цветов палитры автор может выбрать любой в `ColorPicker` («Свой цвет…» в меню цвета Редактора). У такого цвета нет имени, а значение в HTML хранит `style`, поэтому в Документ он пишется строго так: `<span style="color:#ff0000">` для текста и `<mark style="background-color:#ffee00">` для маркера. Правило узкое и записано в Схеме (`RICH_TEXT_SCHEMA.customColor.styles`, регулярные выражения строкой): строчные буквы, ровно шесть цифр, без пробелов и `;`, одно объявление на тег, и никогда вместе с `data-color` на одном элементе. Любой другой `style` (`#f00`, `rgb(…)`, `red`, второе объявление рядом, `style` на другом теге) Редактор отбрасывает при загрузке и вставке, и `sanitizeRichText` снимает его так же: хук сверяет тег и значение с теми же выражениями. В голом `richTextSanitizeConfig()` `style` нет вовсе: `ALLOWED_ATTR` у DOMPurify общий на все теги, и без хука он пропустил бы любой CSS.
+
+**Цвет автора не меняется вместе с темой.** Цвета палитры — токены, и один сохранённый текст читается в `dark`, `light` и `dim`. `#ff0000` — значение: в каждой теме он одинаков, и пара «цвет — фон» может не держать контраст там, где автор её не видел. Редактор предупреждает об этом при выборе (контраст 4,5:1 с фоном текущей темы; для маркера проверяется основной текст на нём), но не запрещает и не пересчитывает цвет при смене темы. Если Документ показывается в нескольких темах, пользуйтесь палитрой.
+
+Ссылку Редактор пишет так: `<a href="https://…" rel="noopener noreferrer">…</a>`. Адрес может быть только абсолютным, с протоколом `http`, `https` или `mailto`: относительные адреса и прочие протоколы (`javascript:`, `data:`, `ftp:`) Редактор не принимает ни из `value`, ни из вставки. `target` он не пишет: открывать ли ссылки в новой вкладке, решает страница показа, а не Документ.
+
+### Санитизация — на сервере потребителя
+
+Клиентская очистка от XSS не защищает: запрос в обход интерфейса принесёт что угодно. Очищайте HTML **на сервере при сохранении** (а лучше и при выдаче, если в базе лежат старые записи). DOMPurify в зависимости кита не входит — ставите сами, а политику Схемы приносит кит хелпером `sanitizeRichText`:
+
+```bash
+npm install dompurify jsdom   # или isomorphic-dompurify
+```
+
+```ts
+import { JSDOM } from "jsdom";
+import createDOMPurify from "dompurify";
+import { sanitizeRichText } from "@olddevs/ui/editor/schema";
+
+const DOMPurify = createDOMPurify(new JSDOM("").window);
+
+export function sanitizeDocument(html: string): string {
+  return sanitizeRichText(html, DOMPurify);
+}
+```
+
+`sanitizeRichText(html, purify)` берёт экземпляр DOMPurify аргументом — кит его не импортирует, тип экземпляра структурный (`RichTextPurifier`), и `dompurify` с jsdom или `isomorphic-dompurify` подходят без приведений. На время одного вызова хелпер ставит на экземпляр хуки Схемы и снимает их после вызова: экземпляр у вас общий (комментарии, письма), и правила Редактора не срабатывают в очистке другого кода на этом экземпляре, а ваши хуки остаются на месте. Разметка Редактора проходит **байт в байт**; всё остальное хуки снимают: текст из снятого тега остаётся, как и в Редакторе. Что они проверяют:
+
+- `label`, `input`, `span` и `div` — только разметка пункта чек-листа; `input` — только `type="checkbox"`; `ul[data-type]`, `li[data-type]`, `li[data-checked]` — только значения чек-листа;
+- `ol[start]` — только на `ol`;
+- `code[class]` — только канонический `language-<имя>` из `RICH_TEXT_SCHEMA.codeLanguages`: псевдоним (`language-py`), неизвестный язык, второй класс и класс на другом теге снимаются, токены `hljs-*` — тоже;
+- `span[data-color]` и `mark[data-color]` — только имена палитры этого тега; старые имена маркера переводятся (`legacyMarkerColors`); `mark` без цвета снимается;
+- `style` — только `color:#rrggbb` на `span` и `background-color:#rrggbb` на `mark` (`RICH_TEXT_SCHEMA.customColor.styles`) и никогда вместе с `data-color`;
+- `data-align` — `center` или `right` на `p`, `h1`–`h4`, `th`, `td`;
+- `colspan` и `rowspan` — только на `th` и `td`, целое не больше `RICH_TEXT_SCHEMA.tableSpans`;
+- ссылка — `href` только `http`, `https` или `mailto`, `rel` всегда `noopener noreferrer`, посторонний `target` снимается, ссылка без годного адреса становится текстом;
+- картинка — `img` с абсолютным `http`/`https` прямо внутри `figure` (без `data:` и `blob:`), `data-width` — пресет, `alt` есть всегда; `img` вне `figure` удаляется, `figcaption` вне `figure` теряет свой тег.
+
+Проверено настоящим DOMPurify 3.4.16 на jsdom в `tests/editor-sanitize.test.tsx`: Документ со всеми Блоками и Метками Редактора проходит без изменений, а подделки — классы Tailwind (`class="fixed inset-0"`), `style` на `p`, картинка `data:`, ссылка `javascript:`, имя из другой палитры, `label` вне пункта, `colspan="10000"` и другие — снимаются.
+
+#### Свои Инструменты: третий аргумент
+
+Если Редактор работает со своими Инструментами ([RichTextEditor, «Свой Инструмент»](../inputs/rich-text-editor.md#свой-инструмент)), сервер передаёт очистке **тот же массив `tools`**. Описание своего Инструмента — данные, и модуль с ним импортируется на сервере: очистка читает только правила Схемы (`blocks`, `marks`), Часть для движка не трогает. Чтобы в графе сервера не оказался и Tiptap, держите описание в модуле без импорта расширений — Часть для движка тогда подаётся Загрузчиком ([RichTextEditor, «Загрузчик Части для движка»](../inputs/rich-text-editor.md#загрузчик-части-для-движка)) или собирается рядом с Редактором.
+
+```ts
+import { sanitizeRichText } from "@olddevs/ui/editor/schema";
+import { EDITOR_TOOLS } from "./editor-tools"; // тот же массив, что в `tools` Редактора
+
+export function sanitizeDocument(html: string): string {
+  return sanitizeRichText(html, DOMPurify, EDITOR_TOOLS);
+}
+```
+
+- **Свой Блок** проходит как `div[data-block="<имя>"]`, строчный Атом — как `span[data-block="<имя>"]`, своя Метка — как `span[data-mark="<имя>"]`. Блок другого вида (Атом в `div`, блочный Блок в `span`) и неизвестное имя теряют свой тег, текст остаётся.
+- **Свои атрибуты** `data-<имя>` — только на своём элементе и только со значением по правилу: из списка, по шаблону или адрес по политике ссылки (абсолютный `http`, `https`, `mailto`). Значение с разметкой (`<`) не проходит никогда. Недопустимое значение снимается вместе с атрибутом, сам элемент остаётся — так же поступает Редактор.
+- **Лишнее на элементе своего Блока** — `class`, `style`, `data-color`, обработчики, атрибут другого Блока — снимается.
+- **Место `top`** — только верхний уровень Документа: вложенный Блок (в цитату, Обёртку, другой Блок) теряет свой тег, как Раскладка.
+- **Имена Инструментов кита белый список не сужают.** `["bold", acmeCard]` очищает так же, как `[...RICH_TEXT_PRESETS.full, acmeCard]`: экраны с разными наборами пишут один Документ, и сервер не вправе срезать таблицу, которую записал экран с `full`. Правила с именем без Префикса потребителя сервер не читает: такой набор Редактор отвергает ошибкой поля, а на сервере он не должен открыть обход правил кита.
+- **Без третьего аргумента** очистка та же, что была до своих Инструментов: свои Блоки снимаются, как любой HTML не из Редактора.
+
+`richTextSchema(tools)` отдаёт те же правила данными — для своего санитайзера или проверки на стороне базы: `customBlocks` (вид, место, атрибуты — с заполненными умолчаниями) и `customMarks`. Признаков Блока (`container`, `turnInto`, `plainAtom`) там нет: это поведение Редактора, а не то, что приходит в HTML. Проверено в `tests/editor-sanitize-tools.test.tsx`: Документ Редактора со своими Блоками, Атомом и Меткой проходит очистку байт в байт, а подделки снимаются так же, как их снимает Редактор.
+
+**`richTextSanitizeConfig()` — закрытый по умолчанию.** Это конфиг для того, кто передаёт его DOMPurify напрямую, без хуков. В общий `ALLOWED_ATTR` у DOMPurify (один список на все теги, значений он не проверяет) попадает только безвредное на любом теге и с любым значением: `data-type`, `data-checked`, `data-color`, `data-align`, `data-width`, `data-block`, `data-layout`, `data-tone`, `start`, `alt`, `rel` и `href`. `style`, `class`, `src`, `colspan`, `rowspan`, `type`, `checked` и теги `input` и `img` разрешает только `sanitizeRichText`, сверив тег и значение: без проверки они пропустили бы любой CSS и класс, base64-картинку и 10 тыс. пустых ячеек. Голый конфиг поэтому безопасен, но теряет часть разметки Редактора — цвет автора, язык блока кода, слияние ячеек, флажки и картинки. `ALLOW_DATA_ATTR` и `ALLOW_ARIA_ATTR` выключены: по умолчанию DOMPurify пропускает любые `data-*` и `aria-*`. Каждый вызов отдаёт новые массивы.
+
+Адрес ссылки конфиг проверяет сам: `ALLOWED_URI_REGEXP` пускает только `http:`, `https:` и `mailto:` — ту же политику, что Редактор. DOMPurify сверяет с этим выражением каждый разрешённый атрибут, кроме «безопасных для URI», и строгое выражение срезало бы `start="3"` или `data-color="danger"`; поэтому все атрибуты, кроме адресов, конфиг объявляет безопасными (`ADD_URI_SAFE_ATTR`). Адрес картинки выражением не закрыть: `data:` в `src` у `<img>` DOMPurify пропускает в обход `ALLOWED_URI_REGEXP` — поэтому `src` разрешает только хук.
+
+Хелперы очистки и Схема берутся из отдельного лёгкого входа `@olddevs/ui/editor/schema`: в нём Схема данными (`RICH_TEXT_SCHEMA`, `richTextSchema`), `sanitizeRichText`, `richTextSanitizeConfig()`, их типы и помощник Карточки у текста `markRange` для описания своего Инструмента. React и Tiptap в нём нет, поэтому серверу, у которого Редактора нет, движок ставить не нужно. Те же имена по-прежнему отдаёт `@olddevs/ui/editor`, но этот вход на сервере без сборщика загрузит весь Редактор вместе с движком.
+
+## Подсветка блоков кода
+
+В Документе у блока кода только язык — `<pre><code class="language-python">…</code></pre>`; токенов подсветки в нём нет (ADR-0051). Подсвечивает сохранённый HTML серверный хелпер:
+
+```tsx
+// Серверный компонент.
+import { RichTextView } from "@olddevs/ui/editor";
+import { highlightCodeBlocks } from "@olddevs/ui/editor/highlight";
+
+export default async function ArticlePage({ id }: { id: string }) {
+  const article = await loadArticle(id); // article.html очищен при сохранении
+  return <RichTextView html={highlightCodeBlocks(article.html)} />;
+}
+```
+
+- **Что делает.** В каждом `<pre><code class="language-…">` на языке Редактора (`RICH_TEXT_SCHEMA.codeLanguages`, псевдонимы тоже) текст заменяется токенами `<span class="hljs-…">`, разобранными lowlight той же грамматикой, что в Редакторе, а класс Блока пишется каноническим именем Схемы: `language-py` и `language-PY` выходят `language-python`, `language-js` — `language-javascript`. Остальной HTML не меняется ни на байт. Блок без языка, на неизвестном языке и Блок, внутри которого уже есть разметка, остаются как были — поэтому повторный вызов ничего не меняет.
+- **Экранирование.** Хелпер не разбирает HTML, а ищет Блоки выражением: внутри Блока Схема допускает только текст. Текст раскрывается из сущностей (`&lt;`, `&amp;`, `&quot;`, `&#39;`, `&nbsp;`, числовые) и после подсветки снова экранируется: `<script>` в коде остаётся текстом `&lt;script&gt;`. Блок с другой именованной сущностью (`&copy;`) не подсвечивается — лучше без цвета, чем с другим текстом. На выходе только `span` с `class="hljs-…"`, без `style`.
+- **Порядок — очистка, потом подсветка.** Хелпер рассчитан на разметку Схемы, которую отдаёт санитайзер, а токенов `hljs-*` в Схеме нет — `sanitizeRichText` их снимает. Подсвечивайте после очистки: при выдаче страницы или сразу после очистки при сохранении. Если в базе лежит подсвеченный HTML, повторная очистка при выдаче вернёт Блок к голому тексту, а `highlightCodeBlocks` подсветит его заново; Редактор, получив такой HTML в `value`, токены отбросит сам.
+- **Тема.** Цвета токенов — GitHub Light в теме `light`, GitHub Dark в `dark` и `dim`, как в Редакторе: правила `.hljs-*` — классы на контейнере `RichTextView` (`src/editor/styles/codeTheme.ts`), цвета — переменные в `styles.css` на элементах с `data-theme`. Блок кода берёт тему ближайшего предка с `data-theme`, поэтому `RichTextView` во вложенном `data-theme="light"` внутри тёмного приложения показывает GitHub Light. Ни `style`, ни отдельный CSS не нужны.
+- **Цена.** Вход `@olddevs/ui/editor/highlight` — хелпер, lowlight, ядро highlight.js и восемь грамматик, 22,6 кБ gzip; Tiptap в его графе нет, и Node без сборщика его загружает. Из peer-зависимостей кита в графе только `react`: он нужен второму хелперу входа, `highlightCodeNodes` для [`CodeView`](code-view.md#подсветка-кита) (ADR-0052). `RichTextView` его не импортирует и остаётся на 12,0 кБ gzip (с Островом «Копировать»), поэтому подсветка не проп компонента: флаг не убрал бы подсветчик из графа, а платил бы за него каждый показ. Для входа ставьте только `lowlight` и `highlight.js` (пакеты движка Редактора, в манифесте кита их нет).
+
+## Кнопка «Копировать» и шапка
+
+У **каждого** Блока `pre > code` над кодом стоит шапка: слева название языка, справа кнопка «Копировать» — `CopyButton` кита с подсказкой «Copy code» → «Copied». Кнопка есть всегда, пропа для отключения нет (решение владельца): шапка — часть вида Блока, и в Редакторе она такая же ([RichTextEditor](../inputs/rich-text-editor.md#блок-кода)). Обе части видны без наведения, на десктопе и на сенсорных экранах; код начинается под шапкой, и кнопка его не перекрывает.
+
+**Как это устроено и почему компонент остаётся серверным.** `RichTextView` не получает обработчиков и состояния — он по-прежнему строка в разметку:
+
+1. Рядом с `dangerouslySetInnerHTML` он оборачивает каждый Блок `<pre><code>` в шапку **строка в строку** (`withCodeHeaders`, `src/editor/features/code/codeHeader.ts`): в шапку входят подпись языка (из списка языков Редактора по приведённому имени; класс из Документа в разметку не попадает: `language-py` даёт «Python», `language-rust` — пустую подпись) и пустое гнездо для кнопки. Это разметка компонента, собранная **после** очистки, поэтому санитайзеру ничего разрешать не нужно.
+2. Если в Документе есть хотя бы один блок кода, рядом с контейнером он рисует Остров `CodeCopyIsland` (`src/editor/features/code/CodeCopyIsland.tsx`, свой `"use client"`). У Документа без кода Острова нет вовсе: ни разметки, ни эффекта. После монтирования Остров находит гнёзда **своего** Просмотра и порталом вставляет в каждое `CodeCopyButton`. На сервере и при гидрации Остров рисует только пустой инертный опорный `<template>`, который отмечает место Острова. Порталов ещё нет, поэтому разметка сервера и первый клиентский проход совпадают, а страница без JS читается так же: подпись языка и код на месте, кнопки нет.
+3. Связь Острова с гнёздами задаёт его место в дереве. Контейнер ссылкой не передать: у серверного компонента её нет. Поэтому Остров берёт соседа слева от своего опорного `<template>`, то есть контейнер своего Просмотра, и ищет гнёзда только в нём, а не по глобальному `document`: Просмотр в теневом корне или в `iframe` получает кнопки так же, а обход не идёт по всей странице. Гнездо дополнительно сверяется с идентификатором `useId` Просмотра (хуков у Просмотра два, `useId` и `useMemo`, и оба разрешены серверным компонентам). Короткий отпечаток HTML сообщает Острову о смене Документа, и тогда он ищет гнёзда заново. Два Просмотра на странице кнопок не путают.
+
+Граница клиента проходит по файлу Острова, а не по `RichTextView`: `tests/rich-text-view.test.tsx` требует два таких файла в графе, `CodeCopyIsland.tsx` и `ui/BlockIsland.tsx` (и то, что они тянут — кнопку и подсказку кита, `react-dom`, иконки и каталог сообщений), а `@tiptap/*`, `lowlight` и `highlight.js` по-прежнему запрещает; `tests/rsc-gate.test.ts` сверяет, что в самом `RichTextView.tsx` директивы нет. Остров в серверном компоненте Next.js работает без обёртки.
+
+**Что копируется.** `textContent` элемента `code` — исходный код строкой. И для Блока без подсветки, и для HTML после `highlightCodeBlocks` это один и тот же текст: токены `span` текста не добавляют. Это правило ADR-0039: копируется текст, а не DOM — иначе в буфер уехали бы границы токенов подсветки. Отказ буфера кнопка показывает («Could not copy»).
+
+**Подписи у Блока без языка нет.** Подписи нет, потому что строка «Обычный текст» берётся из каталога сообщений, а его у серверного компонента нет; английская подпись у потребителя с русским интерфейсом была бы ошибкой. Шапка у такого Блока — одна кнопка справа; в Редакторе в режимах `readOnly` и `disabled` то же самое.
+
+**Клавиатура.** Кнопка в обычном порядке Tab: её тут единственный путь с клавиатуры. Подсказка по фокусу и наведению, `Enter` и `Space` копируют.
+
+**Цена.** Остров тянет кнопку и подсказку кита, `react-dom` для портала и `react-aria-components` ради `useLocale` в каталоге сообщений; `@radix-ui/react-tooltip` и `lucide-react` — обязательные peer-зависимости кита, ставить новых не нужно. Замер `editorView` (`RichTextView` из `@olddevs/ui/editor`, движок в замер включён) при первом замере вырос с 1,7 до 8,4 кБ gzip: это цена Острова, а не типографики. С тех пор Просмотр и общий каталог сообщений подросли, и сейчас замер 12,0 кБ при бюджете 12,3 кБ (ADR-0030). Замер статический (граф модулей входа), поэтому то, что Документу без блоков кода Остров не рисуется, числа не меняет: файл Острова в графе остаётся. Экономия приходится на клиент: ни опорного `<template>` в разметке, ни эффекта, ни обхода контейнера. Так же и у Next.js: клиентский граф страницы строится по импортам, а не по тому, что отрисовано.
+
+## Таблицы
+
+Редактор пишет `table > tbody > tr > th|td`; у ячейки только слияние (`colspan`, `rowspan`) и выравнивание столбца (`data-align`), подробнее в разделе «Таблицы» страницы [RichTextEditor](../inputs/rich-text-editor.md#таблицы). Оформление (границы, отступы ячеек, подложка строки-заголовка, выравнивание текста в ячейке по `data-align`) компонент берёт из `prose.ts` на контейнере, поэтому в Редакторе и в `RichTextView` таблица выглядит одинаково. Слитая ячейка — обычная ячейка браузерной таблицы с `colspan`/`rowspan`, своего стиля у неё нет.
+
+**Прокрутка на узком экране — на самой `<table>`.** `display: block; max-width: 100%; overflow-x: auto`: таблица шире блока прокручивается внутри себя и не раздвигает страницу, минимальная ширина столбца — 6 rem (`min-w-24`), поэтому таблица из пяти столбцов на экране в 375 px прокручивается, а не сжимается в узкие колонки. Контейнера вокруг таблицы нет намеренно: `RichTextView` кладёт сохранённый HTML как есть, а Схема не знает ни `div` вокруг таблицы, ни `tabindex`.
+
+Цена этого выбора:
+
+- **Табличная семантика.** На `table` с `display: block` часть скринридеров теряет строки и столбцы. В Chrome и Firefox это давно исправлено, в Safari с VoiceOver зависит от версии; проверяйте в ручном прогоне на своих версиях. Альтернатива — `table-layout: fixed` без прокрутки — оставляет семантику, но делает все столбцы равными и узкими и рвёт длинные слова, на телефоне это хуже.
+- **Фокус на прокручиваемой области.** Правило axe `scrollable-region-focusable` требует, чтобы прокручиваемый блок можно было достичь с клавиатуры. В Редакторе в каждой ячейке есть каретка, а в `RichTextView` фокусируемого содержимого нет: правило срабатывает на таблице, которая шире экрана. Закрыть это можно только контейнером с `tabindex="0"`, а его в сохранённый HTML не положить. Если на вашем экране такие таблицы бывают, оберните `RichTextView` своим контейнером с `overflow-x: auto` и `tabindex="0"` или держите таблицы узкими.
+
+## Раскладка
+
+Раскладка Редактора (`div[data-block="layout"]` с вариантом в `data-layout` и колонками `div[data-block="column"]`, раздел «Раскладка» страницы [RichTextEditor](../inputs/rich-text-editor.md#раскладка)) рисуется той же сеткой, что в Редакторе: классами `prose.ts` на контейнере, без `style` в разметке. Рамок у колонок нет: пунктир — ориентир автору в Редакторе, читателю граница не нужна. Колонки стоят рядом, когда широк сам Документ (две — от 30 rem, три — от 40 rem, четыре — от 48 rem), а в более узком Документе — столбцом в порядке чтения, слева направо. Порог — контейнерный запрос по ширине Документа: корень `RichTextView` с Раскладкой становится контейнером (`container-type: inline-size`), поэтому в сжимающем контексте (элемент flex-ряда без ширины) дайте ему ширину. На Листе `surface="paper"` — та же сетка.
+
+`sanitizeRichText` держит Раскладку там, где её пишет Редактор: только на верхнем уровне, с вариантом из `RICH_TEXT_SCHEMA.layouts`, колонки — только прямо в ней; иначе обёртки снимаются, Блоки остаются подряд.
+
+## Обёртка
+
+Обёртка Редактора (`div[data-block="wrapper"]` с Блоками внутри, раздел «Обёртка» страницы [RichTextEditor](../inputs/rich-text-editor.md#обёртка)) без тона в показе не видна: рамки нет, отступы между её Блоками — те же, что между Блоками Документа, и текст читается так, будто Обёртки нет. Пунктир — ориентир автору в Редакторе. ARIA-роли у Обёртки нет.
+
+**Обёртка с тоном** (`data-tone`: `accent`, `success`, `neutral`, `warning` или `danger`) видна и читателю — **тем же видом, что в Редакторе**: мягкая подложка тона и полоса 3 px слева, текст — обычный текст Документа, внутренний отступ, как у `Alert`. Цвета — роли `--rte-tone-*` классов `prose.ts`, без `style` в разметке; на Листе `surface="paper"` — значения светлой темы. ARIA-роли и `aria-*` тон не добавляет: смысл заметки несёт слово в её тексте («Внимание: …»), а не цвет. Тон вне этих пяти имён `RichTextView` не красит — `sanitizeRichText` снимает его на сервере. Палитра, контраст и Markdown — раздел [«Обёртка», «Тон»](../inputs/rich-text-editor.md#тон).
+
+`sanitizeRichText` держит Обёртку там, где её пишет Редактор: на верхнем уровне и прямо в колонке Раскладки, не в другой Обёртке, списке, цитате и таблице; иначе Обёртка снимается, Блоки остаются подряд. Раскладка внутри Обёртки разворачивается в Блоки.
+
+## Свой Блок
+
+Свой Блок потребителя (`div[data-block="acme_card"]`, раздел «Свой Инструмент» страницы [RichTextEditor](../inputs/rich-text-editor.md#свой-инструмент)) `RichTextView` показывает очищенным HTML и даёт ему **тот же вертикальный ритм, что у абзаца, и больше ничего**: отступ до следующего Блока такой же, как у абзаца на том же месте (в Документе, цитате, ячейке, колонке). Блоки внутри своего Блока-контейнера стоят с ритмом Документа, как в Обёртке; строчное содержимое (текст, Атомы, Метки) отступов не получает. На Листе `surface="paper"` — то же.
+
+Вид — CSS потребителя по селектору `data-block` и токенам кита; полей стилей в описании Инструмента нет. Пишите стили на переменных темы — тогда Блок одинаков в Редакторе, в `RichTextView` и на Листе `paper`, который переключает токены сам:
+
+```css
+[data-block="acme_card"] {
+  border: 1px solid var(--line);
+  border-radius: var(--r-sm);
+  padding: 0.75rem;
+}
+```
+
+Вид узла из Части для движка (React-вид) в `RichTextView` не используется: движка здесь нет. Строчный Атом показывается тем, что лежит в HTML: пустой `span` без текста не виден; оживить Блок в показе можно Островом (раздел ниже). Ритм сверяет `tests/rich-text-paper-css.test.tsx` на настоящем каскаде.
+
+## Остров своего Блока
+
+Свой Блок можно оживить в `RichTextView` клиентским компонентом (кнопкой, плеером, раскрывающимся блоком); его кладёт в поле `island` Блока описание Инструмента. Остров нужен не всякому Блоку: без него Блок остаётся очищенным HTML ([«Свой Блок»](#свой-блок)).
+
+```tsx
+// acme-player.tsx — модуль с директивой: сервер получит лишь ссылку на компонент
+"use client";
+import type { CustomIslandProps } from "@olddevs/ui/editor";
+
+export function AcmePlayer({ attributes, text }: CustomIslandProps) {
+  return <audio controls src={attributes.acme_src} aria-label={text} />;
+}
+```
+
+```tsx
+// acme-tool.ts — описание Инструмента, общее у Редактора, очистки и Просмотра
+import { AcmePlayer } from "./acme-player";
+
+export const acmePlayer: CustomTool = {
+  name: "acme_player",
+  engine: [AcmePlayerNode],
+  blocks: {
+    acme_player: { kind: "block", attributes: { acme_src: { kind: "url" } }, island: AcmePlayer },
+  },
+};
+
+// страница — серверный компонент
+<RichTextView html={safeHtml} tools={[acmePlayer]} />;
+```
+
+**Что получает компонент** (`CustomIslandProps`): `block` — имя Блока, `attributes` — объявленные в `attributes` Блока атрибуты, которые есть в HTML, по именам без `data-` (`acme_src`; необъявленный атрибут компонент не видит), `text` — `textContent` Блока из серверного HTML. Значения — строки из очищенного HTML Документа: проверку по виду значения на сервере делает `sanitizeRichText(html, DOMPurify, tools)`, и без неё Остров получит то, что лежит в `html`.
+
+**Как это устроено и почему `RichTextView` остаётся серверным.** Так же, как у «Копировать» (раздел выше): сам компонент без состояния, клиентский кусок — отдельный файл со своей директивой.
+
+1. Описание Инструмента целиком (Часть для движка, функции) через границу RSC не пройдёт, поэтому `RichTextView` выбирает из `tools` только Острова, причём только тех Блоков, чей `data-block="<имя>"` есть в Документе (`islandsFor`, `src/editor/core/viewIsland.ts`), и отдаёт Острову ссылки на клиентские компоненты и имена атрибутов. Если нет `tools`, нет `island` у Блока или самого Блока в Документе, Острова нет вовсе: ни опорного `<template>` в разметке, ни эффекта, ни загрузки кода Острова потребителя (сервер сериализует ссылку на клиентский компонент, только когда Блок есть). `island` обязан быть компонентом из модуля с `"use client"`: серверный компонент или функция с динамическим импортом в клиентский Остров не передаются.
+2. Серверный HTML Блока приходит всегда. До гидрации, до загрузки Острова и без JS читатель видит его — то есть содержимое Блока как оно сохранено.
+3. После монтирования Остров (`src/editor/ui/BlockIsland.tsx` и тело `BlockIslandSlots.tsx`, свой `"use client"`) находит Блоки **своего** Просмотра так же, как «Копировать» находит гнёзда: от своего опорного `<template>` влево, а не по глобальному `document` — Просмотр в теневом корне или `iframe` работает. В каждом вхождении Блока содержимое заменяется Островом; при смене `tools` (Остров пропал) или уходе Блока содержимое возвращается. Если Блок с Островом стоит внутри другого Блока с Островом, оживает внешний: компонент получает его текст целиком, а внутренний остаётся его содержимым.
+4. Состояние Острова не сбрасывается перерисовкой родителя: Остров ищет Блоки заново только когда сменился Документ, а не `tools` (инлайновый литерал массива у родителя не перемонтирует Остров). Для этого `RichTextView` держит объект `dangerouslySetInnerHTML` стабильным (`useMemo` по Документу): новый объект на каждой перерисовке заставил бы React переписать разметку вместе со вставленными Островами и кнопками «Копировать».
+
+**Остров — отдельный компонент**, а не React-вид Части для движка; Редактор поле `island` не читает.
+
+**Цена.** Тело Острова (`BlockIslandSlots.tsx`) подключается лениво (`React.lazy`) и в первую загрузку Просмотра не входит: пока чанк идёт, виден серверный HTML Блока. В статический замер `editorView` попадает только оболочка и выбор Островов — около 0,2 кБ gzip; Tiptap в графе Просмотра по-прежнему нет, это проверяет `tests/rich-text-view.test.tsx`.
+
+## Доступность
+
+Компонент не добавляет ролей: это обычный `div` с семантическим HTML внутри — заголовки, списки, цитата. Заголовки Документа начинаются с H2, если Редактор работал без `heading1`: страница сама держит H1. Документ с `heading1` содержит собственный `h1`, и тогда страница своего второго не ставит. H1 в `RichTextView` рисуется той же типографикой, что в Редакторе. Если Документ — отдельная область страницы, дайте контейнеру имя через `aria-label` и `role="region"`.
+
+## Антипаттерны
+
+- Класть в `html` строку, не прошедшую серверную очистку;
+- очищать только в браузере перед отправкой: сервер этого не увидит;
+- брать `RichTextEditor readOnly` для страницы, которая только показывает Документ: движок на 295–339 кБ gzip ради текста ([таблица размеров](../../getting-started.md#размер-импорта));
+- добавлять `"use client"` в файл, где `RichTextView` стоит один: он не нужен и уводит соседей в клиентский граф (Остров с кнопкой «Копировать» — отдельный файл со своей директивой, он у `RichTextView` уже есть);
+- передавать в `island` серверный компонент или функцию с динамическим импортом: через границу RSC проходит только ссылка на клиентский компонент из модуля с `"use client"`;
+- заводить свою кнопку копирования поверх `RichTextView` или читать текст из DOM Блока: шапка и кнопка уже есть, а копируется `textContent` кода, не разметка.
+
+## Ссылки
+
+- Исходник: `src/editor/RichTextView.tsx`; шапка и кнопка — `src/editor/features/code/codeHeader.ts` (разметка шапки), `src/editor/features/code/CodeCopyIsland.tsx` (клиентский Остров), `src/editor/features/code/CodeCopyButton.tsx`; Остров своего Блока — `src/editor/core/viewIsland.ts` (выбор Островов по Документу), `src/editor/ui/BlockIsland.tsx` и `src/editor/ui/BlockIslandSlots.tsx` (клиентский Остров); Лист `surface="paper"` — `src/editor/styles/surface.ts` и `src/editor/styles/tokens.ts`; типографика — `src/editor/styles/prose.ts`, тема подсветки — `src/editor/styles/codeTheme.ts`; серверная подсветка — `src/editor/features/code/highlight.ts`, вход — `src/editor/highlight-entry.ts`; Схема данными, `sanitizeRichText` и конфиг очистки — `src/editor/core/schema.ts`, лёгкий вход — `src/editor/schema-entry.ts`.
+- Тесты: `tests/rich-text-view.test.tsx` (в нём же граф модулей и сверка таблицы со Схемой), `tests/rich-text-view-code-copy.test.tsx` (шапка, Остров, копирование), `tests/rich-text-view-island.test.tsx` (Остров своего Блока), `tests/rich-text-paper.test.tsx` и `tests/rich-text-paper-css.test.tsx` (Лист `surface="paper"`), `tests/editor-highlight-entry.test.ts` (хелпер подсветки, экранирование, граф входа), `tests/editor-sanitize.test.tsx` (очистка настоящим DOMPurify: разметка Редактора без изменений, подделки, голый конфиг), `tests/editor-sanitize-tools.test.tsx` (очистка и `richTextSchema` со своими Инструментами), `tests/rsc-gate.test.ts`.
+- Storybook: `Content/RichTextView`.
+- Редактор — [RichTextEditor](../inputs/rich-text-editor.md); свои Инструменты, Остров и граница semver — [API расширения Редактора](../../api/editor-extension.md); решения — ADR-0050, подсветка — ADR-0051, расширение — ADR-0058.