@olddevs/ui 4.5.1 → 4.6.1

package/src/editor/features/heading/headingTool.ts

@@ -0,0 +1,96 @@
+"use client";
+
+import {
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  Heading4Icon,
+  HeadingIcon,
+} from "../../../icons.js";
+import { turnIntoTypes } from "../../core/blockTypes.js";
+import type { InsertItem } from "../../core/insertItems.js";
+import { SHORTCUT_KEYS, type ShortcutCommand } from "../../core/shortcuts.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+
+const LEVELS = [1, 2, 3, 4] as const;
+
+/** Иконки «¶»: в отличие от Меню вставки (одна `HeadingIcon`), там уровень виден на самой иконке. */
+const BLOCK_TYPE_ICONS = [Heading1Icon, Heading2Icon, Heading3Icon, Heading4Icon] as const;
+
+/**
+ * Пункты заголовков: Меню вставки и «¶» — одни и те же пункты «Превратить в».
+ * H1 стоит под `heading` и есть только вместе с `heading1`: у `heading1` своего
+ * места в порядке поверхностей нет (`INSERT_ORDER`, `BLOCK_TYPE_ORDER`), поэтому
+ * его пункт живёт здесь и скрывается по `requires`.
+ */
+const HEADING_ITEMS: readonly InsertItem[] = LEVELS.map((level): InsertItem => ({
+  id: `heading${level}`,
+  section: "turnInto",
+  label: (m) => m.heading({ level }),
+  icon: HeadingIcon,
+  aliases: [`h${level}`],
+  markdown: "#".repeat(level),
+  keys: SHORTCUT_KEYS[`h${level}`],
+  requires: level === 1 ? "heading1" : undefined,
+  run: (chain) => chain.setHeading({ level }),
+}));
+
+/**
+ * Заголовки на описании Инструмента (ADR-0058, п. 10).
+ *
+ * Узел и его клавиши даёт StarterKit, поэтому в описании — доля StarterKit, а
+ * не `engine`. H1 — только с `heading1`; без него `#` и `<h1>` остаются
+ * прежними: правило ввода и разбор HTML строятся по этим уровням. Меню «¶»
+ * (`BlockTypeMenu`) — виджет кита и описания не касается.
+ */
+export const HEADING_TOOL: ToolDescriptor = {
+  name: "heading",
+  starterKit: (context) => ({
+    heading: { levels: context.has("heading1") ? [1, 2, 3, 4] : [2, 3, 4] },
+  }),
+  insertItems: HEADING_ITEMS,
+  blockTypes: turnIntoTypes("heading", HEADING_ITEMS).map((item, index) => ({
+    ...item,
+    icon: BLOCK_TYPE_ICONS[index]!,
+    alsoTool: item.requires,
+  })),
+  // Клавиши вешает расширение Tiptap; строки справочника — подписи к ним.
+  // Подпись — как у пункта «¶» («Текст»), а не «Абзац» Меню вставки: справочник
+  // называет команду тем словом, которым её выбирают на Панели.
+  shortcuts: [
+    {
+      id: "paragraph",
+      group: "blockType",
+      tool: "heading",
+      keys: SHORTCUT_KEYS.paragraph,
+      label: (m) => m.textBlock,
+    },
+    ...([2, 3, 4] as const).map((level): ShortcutCommand => ({
+      id: `h${level}`,
+      group: "blockType",
+      tool: "heading",
+      keys: SHORTCUT_KEYS[`h${level}`],
+      label: (m) => m.heading({ level }),
+    })),
+  ],
+};
+
+/**
+ * `heading1` — надстройка над `heading`: своего узла у неё нет, она добавляет
+ * только H1 (уровни заголовка спрашивают `has("heading1")`, пункты H1 лежат в
+ * описании `heading`). В описании — строка справочника `⌘⌥1`, которая есть
+ * лишь вместе с `heading`.
+ */
+export const HEADING1_TOOL: ToolDescriptor = {
+  name: "heading1",
+  shortcuts: [
+    {
+      id: "h1",
+      group: "blockType",
+      tool: "heading1",
+      requires: "heading",
+      keys: SHORTCUT_KEYS.h1,
+      label: (m) => m.heading({ level: 1 }),
+    },
+  ],
+};

package/src/editor/features/history/historyTool.ts

@@ -0,0 +1,42 @@
+"use client";
+
+import { RedoIcon, UndoIcon } from "../../../icons.js";
+import { SHORTCUT_KEYS } from "../../core/shortcuts.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+
+/**
+ * Отмена и повтор на описании Инструмента.
+ *
+ * Расширение — доля StarterKit (`undoRedo`): `{}` включает его умолчание так же,
+ * как прежний `undefined`. Клавиши `Mod+Z` и `Mod+Shift+Z` вешает оно, а не
+ * кнопки: поэтому у кнопок `keys` (подпись для подсказки, `aria-keyshortcuts` и
+ * справочника), а не `shortcut` — тот привязал бы клавишу второй раз. Строки
+ * справочника — те же кнопки с группой «История» (`shortcutGroup`), отдельных
+ * `shortcuts` у Инструмента нет: иначе строка встала бы дважды.
+ *
+ * Место кнопок — последняя группа Панели (`slot("history")`, `EditorToolbar.tsx`).
+ */
+export const HISTORY_TOOL: ToolDescriptor = {
+  name: "history",
+  starterKit: () => ({ undoRedo: {} }),
+  buttons: [
+    {
+      id: "undo",
+      label: ({ messages }) => messages.undo,
+      icon: UndoIcon,
+      keys: SHORTCUT_KEYS.undo,
+      shortcutGroup: "history",
+      run: (editor) => void editor.chain().focus().undo().run(),
+      can: (editor) => editor.can().undo(),
+    },
+    {
+      id: "redo",
+      label: ({ messages }) => messages.redo,
+      icon: RedoIcon,
+      keys: SHORTCUT_KEYS.redo,
+      shortcutGroup: "history",
+      run: (editor) => void editor.chain().focus().redo().run(),
+      can: (editor) => editor.can().redo(),
+    },
+  ],
+};

package/src/editor/features/image/imageTool.ts

@@ -0,0 +1,49 @@
+"use client";
+
+import { ImageIcon } from "../../../icons.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+import { RichImage } from "./image.js";
+
+/**
+ * Картинка на описании Инструмента (ADR-0058, п. 10).
+ *
+ * Картинка — `figure` с подписью (`image.ts`). Без Инструмента `<img>` из
+ * вставки и `value` отбрасывается, а файлы из буфера не перехватываются:
+ * расширения нет в списке, пока нет моста `image` (его даёт `RichTextEditor`
+ * только с Инструментом).
+ *
+ * Картинке нужен адрес, и ни кнопка, ни пункт его не знают: оба готовят пустой
+ * абзац и открывают поповер картинки (`ImagePopover`), команда `openImageEditor`
+ * — из `image.ts`. Картинка из поповера встаёт на место этого абзаца. Закрытый
+ * без адреса поповер оставляет пустой абзац — как Блок, который передумали
+ * писать. Сам поповер и панель выделенной картинки (`ImageToolbar`) — виджеты
+ * кита, у описания их нет. Форма Блока для Скелета не нужна: его Схеме мост
+ * картинки подставлен заглушкой (`skeleton.ts`), и расширение то же.
+ */
+export const IMAGE_TOOL: ToolDescriptor = {
+  name: "image",
+  engine: (context) => (context.image ? [RichImage.configure(context.image)] : []),
+  buttons: [
+    {
+      id: "image",
+      label: ({ messages }) => messages.image,
+      icon: ImageIcon,
+      // Как у ссылки: кнопка открывает поповер, а не вставляет сама.
+      run: (editor) => editor.commands.openImageEditor(),
+      can: (editor) => editor.can().openImageEditor(),
+      // `aria-pressed` — выделена картинка или каретка в её подписи: поповер
+      // тогда правит её, а не вставляет новую.
+      isActive: (editor) => editor.isActive("image"),
+    },
+  ],
+  insertItems: [
+    {
+      id: "image",
+      section: "insert",
+      label: (m) => m.image,
+      icon: ImageIcon,
+      aliases: ["img", "picture", "photo", "![]()"],
+      run: (chain) => chain.openImageEditor(),
+    },
+  ],
+};

package/src/editor/features/layout/layoutTool.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { ColumnLayoutIcon } from "../../../icons.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+import { DEFAULT_LAYOUT } from "./columnLayouts.js";
+import { LAYOUT_NODE, layoutExtensions } from "./layout.js";
+
+/**
+ * Раскладка на описании Инструмента: узлы колонок и их клавиатура
+ * (`layout.ts`), пункт Меню вставки и место в модели содержимого Документа.
+ *
+ * Варианты раскладки («Добавить › Раскладка ›», «Формат ›», «Раскладка ›» колонки)
+ * — меню-виджеты Ручки Блока: своего Инструмента у них нет, и они остаются в
+ * `BlockHandle.tsx`, показ — по `has("layout")`.
+ */
+export const LAYOUT_TOOL: ToolDescriptor = {
+  name: "layout",
+  // Без инструмента `div[data-block]` из вставки и `value` не разбирается, и Блоки
+  // колонок встают в Документ подряд. Обёртка в колонке — только при `wrapper`.
+  engine: (context) => layoutExtensions({ wrapper: context.has("wrapper") }),
+  // Раскладка не в группе `block`: принять её может только Документ, назвав поимённо.
+  documentContent: [LAYOUT_NODE],
+  /*
+    Раскладка — пунктом без подменю: Меню вставки — плоский список
+    с фильтром по `/`, и подменю в нём не живут. Вариант по умолчанию — две
+    колонки, остальные — в «Добавить › Раскладка ›» и «Формат ›» ручки Блока.
+    Встаёт она только на верхний уровень: из колонки — под своей Раскладкой
+    (`insertLayout`).
+  */
+  insertItems: [
+    {
+      id: "layout",
+      section: "insert",
+      label: (m) => m.layout,
+      icon: ColumnLayoutIcon,
+      aliases: ["columns", "cols"],
+      run: (chain) => chain.insertLayout(DEFAULT_LAYOUT),
+    },
+  ],
+};

package/src/editor/features/lists/listTools.ts

@@ -0,0 +1,112 @@
+"use client";
+
+import { TaskItem, TaskList } from "@tiptap/extension-list";
+import { ListIcon, OrderedListIcon, TaskListIcon } from "../../../icons.js";
+import { turnIntoTypes } from "../../core/blockTypes.js";
+import type { InsertItem } from "../../core/insertItems.js";
+import { SHORTCUT_KEYS, shortcutKeys, type ShortcutCommand } from "../../core/shortcuts.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+
+/**
+ * Три вида списка на описаниях Инструментов: маркированный, нумерованный и
+ * чек-лист.
+ *
+ * Пункт один на три поверхности: Меню вставки, «Формат ›» ручки Блока и меню
+ * «Списки ▾» читают те же слова, иконку и сочетание (`turnIntoTypes`). Виджет
+ * «Списки ▾» (`ListMenu`) и кнопки отступа остаются у кита, показ — по
+ * `has(name)`; строки отступа `indentListItem` и `outdentListItem` — общие для
+ * трёх списков и лежат в `SHORTCUTS`. Пункт списка (`ListItem`) и клавиши
+ * `ListKeymap` — в ядре, они есть в любом наборе.
+ *
+ */
+
+/** Строка справочника: клавишу вешает расширение Tiptap, строка — подпись к ней. */
+function shortcutOf(id: "bulletList" | "orderedList" | "taskList"): ShortcutCommand {
+  return {
+    id,
+    group: "lists",
+    tool: id,
+    keys: SHORTCUT_KEYS[id],
+    label: (m) => m[id],
+  };
+}
+
+const BULLET_LIST_ITEMS: readonly InsertItem[] = [
+  {
+    id: "bulletList",
+    section: "turnInto",
+    label: (m) => m.bulletList,
+    icon: ListIcon,
+    aliases: ["ul", "-"],
+    markdown: "-",
+    keys: shortcutKeys("bulletList"),
+    run: (chain) => chain.toggleBulletList(),
+  },
+];
+
+const ORDERED_LIST_ITEMS: readonly InsertItem[] = [
+  {
+    id: "orderedList",
+    section: "turnInto",
+    label: (m) => m.orderedList,
+    icon: OrderedListIcon,
+    aliases: ["ol", "1."],
+    markdown: "1.",
+    keys: shortcutKeys("orderedList"),
+    run: (chain) => chain.toggleOrderedList(),
+  },
+];
+
+const TASK_LIST_ITEMS: readonly InsertItem[] = [
+  {
+    id: "taskList",
+    section: "turnInto",
+    label: (m) => m.taskList,
+    icon: TaskListIcon,
+    aliases: ["todo", "[]"],
+    markdown: "[ ]",
+    keys: shortcutKeys("taskList"),
+    run: (chain) => chain.toggleTaskList(),
+  },
+];
+
+/**
+ * Маркированный список. Расширение — доля StarterKit: `{}` включает его
+ * умолчание так же, как прежний `undefined`.
+ */
+export const BULLET_LIST_TOOL: ToolDescriptor = {
+  name: "bulletList",
+  starterKit: () => ({ bulletList: {} }),
+  insertItems: BULLET_LIST_ITEMS,
+  blockTypes: turnIntoTypes("bulletList", BULLET_LIST_ITEMS),
+  shortcuts: [shortcutOf("bulletList")],
+};
+
+/** Нумерованный список: `start` и `1.` в Markdown — умолчания StarterKit. */
+export const ORDERED_LIST_TOOL: ToolDescriptor = {
+  name: "orderedList",
+  starterKit: () => ({ orderedList: {} }),
+  insertItems: ORDERED_LIST_ITEMS,
+  blockTypes: turnIntoTypes("orderedList", ORDERED_LIST_ITEMS),
+  shortcuts: [shortcutOf("orderedList")],
+};
+
+/**
+ * Чек-лист. Подпись флажка пункта — из каталога, читается при каждой
+ * перерисовке пункта (`context.taskCheckbox`), поэтому смена локали не
+ * пересоздаёт движок.
+ */
+export const TASK_LIST_TOOL: ToolDescriptor = {
+  name: "taskList",
+  engine: (context) => [
+    TaskList,
+    TaskItem.configure({
+      // Вложенные чек-листы — как вложенные обычные списки: Tab и Shift+Tab.
+      nested: true,
+      a11y: { checkboxLabel: (node) => context.taskCheckbox(node.textContent) },
+    }),
+  ],
+  insertItems: TASK_LIST_ITEMS,
+  blockTypes: turnIntoTypes("taskList", TASK_LIST_ITEMS),
+  shortcuts: [shortcutOf("taskList")],
+};

package/src/editor/features/marks/markTools.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { Subscript } from "@tiptap/extension-subscript";
+import { Superscript } from "@tiptap/extension-superscript";
+import { SHORTCUT_KEYS, type ShortcutCommand } from "../../core/shortcuts.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+
+/**
+ * Инлайн-Метки на описаниях Инструментов: жирный, курсив, подчёркнутый,
+ * зачёркнутый, код, верхний и нижний индекс.
+ *
+ * Клавишу и markdown-шорткат вешает само расширение Tiptap, а строка справочника
+ * — подпись к ней (`SHORTCUT_KEYS`). Виджеты остаются у кита, показ по
+ * `has(name)`: ряд Меток B·I·U (`rowMarks.ts`), «…» (`MORE_MARKS` в
+ * `FormatMenus.tsx`) и места Меток в Меню выделения.
+ *
+ * ПОРЯДОК МЕТОК в сохранённом HTML решает StarterKit: ранг и вложенность Меток
+ * зависят от порядка его расширений, а не от порядка доль. Поэтому пять Меток
+ * из StarterKit — его доли (`starterKit`), которые сливаются в один
+ * `StarterKit.configure` (`extensions.ts`); индексы подключаются отдельными
+ * расширениями на местах `ENGINE_ORDER`.
+ */
+
+/** Строка справочника Метки: подпись из каталога под тем же id. */
+function shortcutOf(
+  id: "bold" | "italic" | "strike" | "underline" | "code" | "superscript" | "subscript"
+): ShortcutCommand {
+  return { id, group: "marks", tool: id, keys: SHORTCUT_KEYS[id], label: (m) => m[id] };
+}
+
+/** Жирный: доля StarterKit, `{}` включает его умолчание. */
+export const BOLD_TOOL: ToolDescriptor = {
+  name: "bold",
+  starterKit: () => ({ bold: {} }),
+  shortcuts: [shortcutOf("bold")],
+};
+
+/** Курсив: доля StarterKit. */
+export const ITALIC_TOOL: ToolDescriptor = {
+  name: "italic",
+  starterKit: () => ({ italic: {} }),
+  shortcuts: [shortcutOf("italic")],
+};
+
+/** Подчёркнутый: доля StarterKit. */
+export const UNDERLINE_TOOL: ToolDescriptor = {
+  name: "underline",
+  starterKit: () => ({ underline: {} }),
+  shortcuts: [shortcutOf("underline")],
+};
+
+/** Зачёркнутый: доля StarterKit. */
+export const STRIKE_TOOL: ToolDescriptor = {
+  name: "strike",
+  starterKit: () => ({ strike: {} }),
+  shortcuts: [shortcutOf("strike")],
+};
+
+/** Код в строке: доля StarterKit. */
+export const CODE_TOOL: ToolDescriptor = {
+  name: "code",
+  starterKit: () => ({ code: {} }),
+  shortcuts: [shortcutOf("code")],
+};
+
+/** Верхний индекс: отдельное расширение Tiptap, место в `ENGINE_ORDER` — первое. */
+export const SUPERSCRIPT_TOOL: ToolDescriptor = {
+  name: "superscript",
+  engine: () => [Superscript],
+  shortcuts: [shortcutOf("superscript")],
+};
+
+/** Нижний индекс: отдельное расширение Tiptap. */
+export const SUBSCRIPT_TOOL: ToolDescriptor = {
+  name: "subscript",
+  engine: () => [Subscript],
+  shortcuts: [shortcutOf("subscript")],
+};

package/src/editor/features/search/searchTool.ts

@@ -7,7 +7,7 @@ import type { SearchToolOptions } from "../../core/toolOptions.js";
 import { SearchExtension } from "./searchPlugin.js";
 
 /**
- * Поиск и замена на описании Инструмента. Часть для движка —
+ * Поиск и замена на описании Инструмента. Extensions —
  * плагин состояния и подсветки с сочетаниями `Mod+F` и `Mod+Alt+F`; панель
  * держит `RichTextEditor` и открывает её мостом `openSearch`. Кнопка «Поиск» —
  * виджет фиксированной Панели у правого края (`EditorToolbar.tsx`), как

package/src/editor/features/table/tableTool.ts

@@ -55,11 +55,11 @@ const TABLE_SHAPE = [
 
 /**
  * Таблица на описании Инструмента (ADR-0058, п. 11.1): её нет в
- * `basic`, а Часть для движка с `prosemirror-tables` тяжелее 10 кБ, поэтому она
- * грузится тем же загрузчиком, что у своего Инструмента. В том же чанке — меню
+ * `basic`, а Extensions с `prosemirror-tables` тяжелее 10 кБ, поэтому они
+ * грузятся тем же загрузчиком, что у своего Инструмента. В том же чанке — меню
  * «Таблица» и окно «Вставить таблицу»: код кита меряется и статическим графом.
  *
- * Переехали Часть для движка и пункт Меню вставки. Меню «Таблица» — виджет
+ * Переехали Extensions и пункт Меню вставки. Меню «Таблица» — виджет
  * Панели и остаётся её местом (`EditorToolbar.tsx`), только компонент берёт из
  * чанка.
  */

package/src/editor/features/toc/tocTool.ts

@@ -5,7 +5,7 @@ import type { TocToolCommands } from "../../core/toolCommands.js";
 import type { TocLevel, TocToolOptions } from "../../core/toolOptions.js";
 
 /**
- * Оглавление на описании Инструмента (ADR-0068). Части для движка и UI-записей
+ * Оглавление на описании Инструмента (ADR-0068). Extensions и UI-записей
  * у него нет: полосу и список рисует `RichTextEditor` в левом поле рамки
  * (`TocCore`, ленивым чанком), а описание несёт Опции — умолчания и проверки,
  * из которых `expandTools` собирает Опции Редактора.

package/src/editor/features/wrapper/wrapperTool.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { UnwrapIcon, WrapperIcon } from "../../../icons.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+import { unwrapWrapperAt, WRAPPER_EXTENSIONS, WRAPPER_NODE } from "./wrapper.js";
+
+/**
+ * Обёртка на описании Инструмента: узел и выход из неё по Enter (`wrapper.ts`),
+ * пункт Меню вставки, Действие «Снять обёртку» и место в модели содержимого
+ * Документа.
+ *
+ * «Тон ›» — меню-виджет Ручки Блока: своего Инструмента у него нет, и он
+ * остаётся в `BlockHandle.tsx`, показ — по `has("wrapper")`.
+ */
+export const WRAPPER_TOOL: ToolDescriptor = {
+  name: "wrapper",
+  // Без инструмента `div[data-block="wrapper"]` из вставки и `value` не
+  // разбирается, и её Блоки встают на её место подряд.
+  engine: () => WRAPPER_EXTENSIONS,
+  // Обёртка не в группе `block`: принять её может только Документ, назвав поимённо.
+  documentContent: [WRAPPER_NODE],
+  /*
+    Обёртка — пустая, с одним абзацем, каретка внутри. Место —
+    Документ или колонка: из Обёртки, списка, цитаты и ячейки она встаёт под
+    их Блоком (`insertWrapper`).
+  */
+  insertItems: [
+    {
+      id: "wrapper",
+      section: "insert",
+      label: (m) => m.wrapper,
+      icon: WrapperIcon,
+      aliases: ["group", "container", "div"],
+      run: (chain) => chain.insertWrapper(),
+    },
+  ],
+  blockActions: [
+    {
+      id: "unwrap",
+      label: (messages) => messages.unwrap,
+      icon: UnwrapIcon,
+      blocks: [WRAPPER_NODE],
+      // Одна правка: Блоки встают на место Обёртки, отмена — одна.
+      run: (editor, pos) =>
+        void editor
+          .chain()
+          .focus()
+          .command(({ tr }) => unwrapWrapperAt(tr, pos))
+          .run(),
+    },
+  ],
+};

package/src/editor/index.ts

@@ -48,6 +48,7 @@ export type {
 } from "./core/toolDefinition.js";
 export type {
   ConfiguredTool,
+  DetailsToolOptions,
   RichTextTools,
   SearchToolOptions,
   TocLevel,

package/src/editor/schema-entry.ts

@@ -12,7 +12,7 @@
  *
  * Свои Инструменты (ADR-0058, п. 2.3) сюда приходят массивом `tools` в
  * `sanitizeRichText` и `richTextSchema`: читаются только правила Схемы из
- * описания (`customTool.ts`, тоже без движка), Часть для движка не трогается.
+ * описания (`customTool.ts`, тоже без движка), Extensions не трогаются.
  * Описание своего Инструмента с Карточкой у текста собирается и на сервере,
  * поэтому её помощник `markRange` (функция над состоянием, Tiptap — только
  * типом) отдаётся и здесь.

package/src/editor/styles/prose.ts

@@ -270,6 +270,53 @@ const WRAPPER_CLASS =
   "[&_[data-block=wrapper][data-tone=danger]]:bg-(--rte-tone-danger-background) " +
   "[&_[data-block=wrapper][data-tone=danger]]:border-(--rte-tone-danger-border)";
 
+/**
+ * Сворачиваемый Блок (Details): в Просмотре — родной `details > summary` с
+ * `div[data-type=detailsContent]`, в Редакторе — `div[data-type=details]` с
+ * кнопкой раскрытия, заголовком `summary` и содержимым в обёртке (представление
+ * узла Tiptap). Рамка, отступы и ритм Блоков внутри — одни в обоих видах, чтобы
+ * читатель видел то, что набирал автор.
+ *
+ * ПРОСМОТР — БЕЗ JAVASCRIPT. Раскрывает и скрывает сам браузер, маркер
+ * `summary` — его, родной: он доступен скринридеру и с клавиатуры (Tab, Enter,
+ * Space) без единой строки кита. Свёрнутое содержимое прячет `details`, а не
+ * наше правило.
+ *
+ * РЕДАКТОР. Маркер `summary` снят (`list-none`): его заменяет кнопка слева,
+ * шеврон которой рисует CSS (`border-r` + `border-b`, повёрнутые на 45°), а
+ * раскрытость — класс `is-open` на `div`. Кнопка — настоящий `button` с именем
+ * из каталога и `aria-expanded`. Скрытое содержимое прячет атрибут `hidden`,
+ * который ставит само представление Tiptap.
+ */
+const DETAILS_BOX =
+  "[&_:is(details,div[data-type=details])]:rounded-(--rte-radius) " +
+  "[&_:is(details,div[data-type=details])]:border [&_:is(details,div[data-type=details])]:border-(--rte-hr) " +
+  "[&_:is(details,div[data-type=details])]:px-3 [&_:is(details,div[data-type=details])]:py-2 " +
+  "[&_summary]:font-medium [&_details>summary]:cursor-pointer " +
+  "[&_div[data-type=detailsContent]>*:not(:last-child)]:mb-3 " +
+  "[&_div[data-type=detailsContent]>:is(h1,h2,h3,h4):not(:first-child)]:mt-6 " +
+  "[&_details[open]>summary]:mb-2 ";
+
+const DETAILS_EDITOR =
+  "[&_div[data-type=details]]:flex [&_div[data-type=details]]:items-start " +
+  "[&_div[data-type=details]]:gap-1.5 " +
+  "[&_div[data-type=details]>div]:min-w-0 [&_div[data-type=details]>div]:flex-1 " +
+  "[&_div[data-type=details]_summary]:list-none " +
+  "[&_div[data-type=details].is-open>div>summary]:mb-2 " +
+  "[&_div[data-type=details]>button]:relative [&_div[data-type=details]>button]:mt-px " +
+  "[&_div[data-type=details]>button]:size-6 [&_div[data-type=details]>button]:shrink-0 " +
+  "[&_div[data-type=details]>button]:cursor-pointer [&_div[data-type=details]>button]:rounded-(--rte-radius) " +
+  "[&_div[data-type=details]>button]:text-(--rte-secondary) " +
+  "[&_div[data-type=details]>button]:before:absolute [&_div[data-type=details]>button]:before:left-1/2 " +
+  "[&_div[data-type=details]>button]:before:top-1/2 [&_div[data-type=details]>button]:before:size-1.5 " +
+  "[&_div[data-type=details]>button]:before:-translate-x-1/2 [&_div[data-type=details]>button]:before:-translate-y-1/2 " +
+  "[&_div[data-type=details]>button]:before:-rotate-45 [&_div[data-type=details]>button]:before:border-r-2 " +
+  "[&_div[data-type=details]>button]:before:border-b-2 [&_div[data-type=details]>button]:before:border-current " +
+  "[&_div[data-type=details]>button]:before:content-[''] " +
+  "[&_div[data-type=details].is-open>button]:before:rotate-45";
+
+const DETAILS_CLASS = DETAILS_BOX + DETAILS_EDITOR;
+
 /**
  * Свой Блок потребителя (ADR-0058, п. 3.2): `div[data-block]` с
  * именем, которого нет у кита. Кит даёт ему ритм абзаца и больше ничего — вид
@@ -401,6 +448,8 @@ const PROSE_RULES =
   " " +
   WRAPPER_CLASS +
   " " +
+  DETAILS_CLASS +
+  " " +
   CUSTOM_BLOCK_CLASS;
 
 /**