@olddevs/ui 4.5.1 → 4.6.0

package/src/editor/core/fieldNotice.ts

@@ -38,7 +38,7 @@ declare module "@tiptap/core" {
        * история и `onChange` не затрагиваются. `error` уходит сама со следующей
        * Правкой автора, `status` остаётся, пока его не заменят или не снимут.
        *
-       * Свой Инструмент зовёт её из Части для движка (`this.editor.commands`),
+       * Свой Инструмент зовёт её из Extensions (`this.editor.commands`),
        * экран — через `handle.editor`. Сообщение без текста — то же, что `null`.
        */
       showNotice: (notice: FieldNotice | null) => ReturnType;

package/src/editor/core/handle.ts

@@ -138,8 +138,8 @@ const TAG = /<[^>]*>/g;
 const UNSEEN = /<!--[\s\S]*?-->|<(script|style|template)\b[\s\S]*?<\/\1\s*>/gi;
 /**
  * Листья Документа — содержимое и без текста: мягкий перенос, линия, картинка,
- * свой Блок. Свой Блок до движка — всегда содержимое: атом ли он, знает только
- * его Часть для движка, а атом без текста — тоже содержимое.
+ * свой Блок. Свой Блок до движка — всегда содержимое: атом ли он, знают только
+ * его Extensions, а атом без текста — тоже содержимое.
  */
 const LEAF = /<(?:br|hr|img)\b|\sdata-block\s*=\s*["']?[A-Za-z][A-Za-z0-9]*_/i;
 /** Таблица — содержимое и с пустыми ячейками (`emptiness.ts`). */

package/src/editor/core/insertItems.ts

@@ -4,22 +4,9 @@ import type { ChainedCommands, Editor, Range } from "@tiptap/core";
 import { TextSelection, type Transaction } from "@tiptap/pm/state";
 import type { ComponentType } from "react";
 import type { UiMessages } from "../../i18n/messages.js";
-import {
-  ColumnLayoutIcon,
-  HeadingIcon,
-  ImageIcon,
-  ListIcon,
-  OrderedListIcon,
-  ParagraphIcon,
-  TableIcon,
-  TaskListIcon,
-  WrapperIcon,
-  type IconProps,
-} from "../../icons.js";
+import { TableIcon, type IconProps } from "../../icons.js";
 import { DEFAULT_LOCALE } from "../../i18n/defaults.js";
 import { handleBlock } from "./blockCommands.js";
-import { DEFAULT_LAYOUT } from "../features/layout/columnLayouts.js";
-import { shortcutKeys } from "./shortcuts.js";
 import { projectRecords, type ToolList, type ToolPopover } from "./toolDescriptor.js";
 import type { Tool } from "./tools.js";
 
@@ -63,12 +50,12 @@ export interface InsertItem {
   keys?: readonly string[];
   /**
    * Сочетание, которое вешает кит (ADR-0058, п. 5.7): единственный источник
-   * клавиши, подсказки и строки справочника. У встроенных нет — клавишу вешает
-   * их Часть для движка, а подпись — `keys`.
+   * клавиши, подсказки и строки справочника. У встроенных нет — клавишу вешают
+   * их Extensions, а подпись — `keys`.
    */
   shortcut?: readonly string[];
   /**
-   * Второй нужный инструмент сверх ключа реестра: Заголовок 1 стоит под
+   * Второй нужный инструмент сверх владельца пункта: Заголовок 1 стоит под
    * `heading`, но есть только вместе с `heading1`, как в меню «¶».
    */
   requires?: Tool;
@@ -80,136 +67,6 @@ export interface InsertItem {
   popover?: ToolPopover;
 }
 
-/**
- * Старый реестр пунктов Меню вставки по инструментам.
- *
- * Новый встроенный Инструмент сюда уже не пишется: его пункты лежат в его
- * описании (`insertItems`, `features/builtins.ts`), и меню получает их проекцией
- * списка описаний (`insertItemsFor`). Здесь — пункты Инструментов, ещё не
- * переехавших на описание (ADR-0058, п. 10), одной записью без правки меню:
- *
- *     horizontalRule: [{ id: "horizontalRule", section: "insert",
- *                        label: (m) => m.horizontalRule, icon: DividerIcon,
- *                        run: (chain) => chain.setHorizontalRule() }],
- *
- * Ключ — `Tool`: выключенный инструмент убирает свои пункты и из `/`, и из «+»
- * сам, без проверок в меню. Порядок пунктов в разделе — `INSERT_ORDER`, а не
- * порядок записей. Подпись — из каталога (`editor.*`), иконка —
- * из `@olddevs/ui/icons`. Пункт, которому нужен свой интерфейс (поповер адреса
- * картинки), открывает его из `run` — `editor` для этого и передан.
- *
- * Абзац записан под самим `insertMenu`: это не инструмент, он есть в Схеме
- * всегда, и «Превратить в абзац» нужен, пока есть само меню.
- */
-export const INSERT_ITEMS: Partial<Record<Tool, readonly InsertItem[]>> = {
-  insertMenu: [
-    {
-      id: "paragraph",
-      section: "turnInto",
-      label: (m) => m.paragraph,
-      icon: ParagraphIcon,
-      aliases: ["p", "text"],
-      keys: shortcutKeys("paragraph"),
-      run: (chain) => chain.setParagraph(),
-    },
-  ],
-  heading: ([1, 2, 3, 4] as const).map((level): InsertItem => ({
-    id: `heading${level}`,
-    section: "turnInto",
-    label: (m) => m.heading({ level }),
-    icon: HeadingIcon,
-    aliases: [`h${level}`],
-    markdown: "#".repeat(level),
-    keys: shortcutKeys(`h${level}`),
-    requires: level === 1 ? "heading1" : undefined,
-    run: (chain) => chain.setHeading({ level }),
-  })),
-  bulletList: [
-    {
-      id: "bulletList",
-      section: "turnInto",
-      label: (m) => m.bulletList,
-      icon: ListIcon,
-      aliases: ["ul", "-"],
-      markdown: "-",
-      keys: shortcutKeys("bulletList"),
-      run: (chain) => chain.toggleBulletList(),
-    },
-  ],
-  orderedList: [
-    {
-      id: "orderedList",
-      section: "turnInto",
-      label: (m) => m.orderedList,
-      icon: OrderedListIcon,
-      aliases: ["ol", "1."],
-      markdown: "1.",
-      keys: shortcutKeys("orderedList"),
-      run: (chain) => chain.toggleOrderedList(),
-    },
-  ],
-  taskList: [
-    {
-      id: "taskList",
-      section: "turnInto",
-      label: (m) => m.taskList,
-      icon: TaskListIcon,
-      aliases: ["todo", "[]"],
-      markdown: "[ ]",
-      keys: shortcutKeys("taskList"),
-      run: (chain) => chain.toggleTaskList(),
-    },
-  ],
-  /*
-    Картинке нужен адрес, и пункт его не знает: он готовит пустой абзац (как
-    любой пункт «Добавить») и открывает поповер картинки. Картинка из поповера
-    встаёт на место этого абзаца. Закрытый без адреса поповер оставляет
-    пустой абзац — как Блок, который передумали писать.
-  */
-  image: [
-    {
-      id: "image",
-      section: "insert",
-      label: (m) => m.image,
-      icon: ImageIcon,
-      aliases: ["img", "picture", "photo", "![]()"],
-      run: (chain) => chain.openImageEditor(),
-    },
-  ],
-  /*
-    Раскладка — пунктом без подменю: Меню вставки — плоский список
-    с фильтром по `/`, и подменю в нём не живут. Вариант по умолчанию — две
-    колонки, остальные — в «Добавить › Раскладка ›» и «Формат ›» ручки Блока.
-    Встаёт она только на верхний уровень: из колонки — под своей Раскладкой
-    (`insertLayout`).
-  */
-  layout: [
-    {
-      id: "layout",
-      section: "insert",
-      label: (m) => m.layout,
-      icon: ColumnLayoutIcon,
-      aliases: ["columns", "cols"],
-      run: (chain) => chain.insertLayout(DEFAULT_LAYOUT),
-    },
-  ],
-  /*
-    Обёртка — пустая, с одним абзацем, каретка внутри. Место —
-    Документ или колонка: из Обёртки, списка, цитаты и ячейки она встаёт под
-    их Блоком (`insertWrapper`).
-  */
-  wrapper: [
-    {
-      id: "wrapper",
-      section: "insert",
-      label: (m) => m.wrapper,
-      icon: WrapperIcon,
-      aliases: ["group", "container", "div"],
-      run: (chain) => chain.insertWrapper(),
-    },
-  ],
-};
-
 /**
  * Пункт «Таблица» заданного размера: строка-заголовок всегда есть.
  *
@@ -271,8 +128,8 @@ export function insertItemHint(
 
 /**
  * Место встроенных Инструментов в Меню вставки — порядок их пунктов внутри
- * раздела. Держится отдельно от `INSERT_ITEMS`: Инструмент, переехавший на
- * описание (`toolDescriptor.ts`), уходит из реестра, а место остаётся здесь.
+ * раздела. Пункты живут в описаниях (`insertItems`), а место на поверхности —
+ * привилегия кита, поэтому оно здесь, а не в описании.
  */
 const INSERT_ORDER: readonly Tool[] = [
   "insertMenu",
@@ -287,25 +144,22 @@ const INSERT_ORDER: readonly Tool[] = [
   "image",
   "layout",
   "wrapper",
+  "details",
 ];
 
 /** Разделы по порядку показа. */
 export const INSERT_SECTIONS = ["insert", "turnInto"] as const;
 
 /**
- * Пункты для набора инструментов — проекция списка описаний: у переехавшего
- * Инструмента — из описания, у остальных — из `INSERT_ITEMS`, в порядке
- * `INSERT_ORDER`. Меню без пункта сверх
+ * Пункты для набора инструментов — проекция списка описаний (`insertItems`) в
+ * порядке `INSERT_ORDER`. Абзац — пункт описания `insertMenu`. Меню без пункта сверх
  * абзаца бессмысленно, и тогда список пуст: ни «+», ни `/` не появляются.
  */
 export function insertItemsFor(tools: ToolList): readonly InsertItem[] {
   if (!tools.has("insertMenu")) return [];
-  const items = projectRecords(
-    tools,
-    INSERT_ORDER,
-    (tool) => INSERT_ITEMS[tool],
-    (descriptor) => descriptor.insertItems
-  ).filter((item) => item.requires === undefined || tools.has(item.requires));
+  const items = projectRecords(tools, INSERT_ORDER, (descriptor) => descriptor.insertItems).filter(
+    (item) => item.requires === undefined || tools.has(item.requires)
+  );
   return items.length > 1 ? items : [];
 }
 

package/src/editor/core/insertMenuTool.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { ParagraphIcon } from "../../icons.js";
+import { shortcutKeys } from "./shortcuts.js";
+import { SlashCommand } from "./slashCommand.js";
+import type { ToolDescriptor } from "./toolDescriptor.js";
+
+/**
+ * Меню вставки (`/` в тексте; «+» на Панели и «Добавить ›» Ручки Блока — виджеты
+ * кита, они читают `tools.has("insertMenu")`).
+ *
+ * Своего Блока у Инструмента нет: это способ добраться до чужих Блоков. Extensions
+ * Инструмента — это `/`, и они есть, только когда `RichTextEditor` дал мост: пунктов
+ * для меню нет — моста нет, и `/` остаётся обычным символом. Абзац записан здесь:
+ * это не Инструмент, он есть в Схеме всегда, и «Превратить в абзац» нужен, пока
+ * есть само меню.
+ */
+export const INSERT_MENU_TOOL: ToolDescriptor = {
+  name: "insertMenu",
+  engine: (context) => (context.slash ? [SlashCommand.configure({ bridge: context.slash })] : []),
+  insertItems: [
+    {
+      id: "paragraph",
+      section: "turnInto",
+      label: (m) => m.paragraph,
+      icon: ParagraphIcon,
+      aliases: ["p", "text"],
+      keys: shortcutKeys("paragraph"),
+      run: (chain) => chain.setParagraph(),
+    },
+  ],
+};

package/src/editor/core/jsonDocument.ts

@@ -80,7 +80,7 @@ export function documentFromJSON(editor: Editor, value: unknown): PmNode | null
       preserveWhitespace: "full",
     });
   } catch (error) {
-    // Кривой файл — обычный отказ, но бросить может и Часть для движка своего
+    // Кривой файл — обычный отказ, но бросить могут и Extensions своего
     // Инструмента: причина уходит в консоль разработки, иначе её не найти.
     devError("RichTextEditor: a JSON document could not be built from its tree", error);
     return null;

package/src/editor/core/schema.ts

@@ -63,6 +63,13 @@ export const RICH_TEXT_SCHEMA = {
    * Стоит на верхнем уровне и прямо в колонке Раскладки; внутри — Блоки, кроме
    * другой Обёртки и Раскладки.
    *
+   * `details` — сворачиваемый Блок: `details > summary` и следом
+   * `div[data-type="detailsContent"]` с Блоками; `open` — только у `details` и
+   * только пустым (`open=""`), так его пишет Редактор с Опцией `persist`.
+   * `summary` вне `details` и обёртка содержимого вне него снимаются —
+   * Блоки остаются подряд. Теги и атрибуты Блока открыты только в этой форме:
+   * `iframe` и ему подобное так не открывается.
+   *
    * Таблица — `table > tbody > tr > th|td`, без `thead`, `colgroup` и
    * `caption`: строка-заголовок — это обычная первая строка из `th`. На ячейке
    * бывают только слияние (`colspan`, `rowspan`) и выравнивание столбца
@@ -94,6 +101,8 @@ export const RICH_TEXT_SCHEMA = {
     "figure",
     "img",
     "figcaption",
+    "details",
+    "summary",
   ],
   /**
    * Метки и строчные узлы. `br` — мягкий перенос по Shift+Enter. `mark` —
@@ -112,9 +121,13 @@ export const RICH_TEXT_SCHEMA = {
      * Раскладка и её колонка: `data-block="layout"` и `data-block="column"`;
      * `data-layout` — вариант из `layouts`, только у Раскладки. Обёртка —
      * `data-block="wrapper"` и, если у неё есть тон, `data-tone` — имя из
-     * `wrapperTones`, только у Обёртки. У `div` пункта чек-листа атрибутов нет.
+     * `wrapperTones`, только у Обёртки. Обёртка содержимого сворачиваемого
+     * Блока — `data-type="detailsContent"`, только прямо в `details`. У `div`
+     * пункта чек-листа атрибутов нет.
      */
-    div: ["data-block", "data-layout", "data-tone"],
+    div: ["data-block", "data-layout", "data-tone", "data-type"],
+    /** Открытый сворачиваемый Блок: пустой `open`, только с Опцией `persist`. */
+    details: ["open"],
     /** Пункт чек-листа: `data-type="taskItem"` и `data-checked="true|false"`. */
     li: ["data-type", "data-checked"],
     /** Флажок пункта чек-листа: всегда `type="checkbox"`, `checked` — у отмеченного. */
@@ -369,8 +382,8 @@ function customAttributes(
  * набор отвергает ошибкой поля, а у сервера ошибок нет — и описание с именем
  * кита (`wrapper`, атрибут `tone`) не должно открыть обход правил кита.
  *
- * Читаются только данные описания (`blocks`, `marks`), Часть для движка не
- * трогается: модуль с описанием своего Инструмента импортируется на сервере,
+ * Читаются только данные описания (`blocks`, `marks`), Extensions не
+ * трогаются: модуль с описанием своего Инструмента импортируется на сервере,
  * и Tiptap здесь не нужен.
  */
 export function richTextSchema(tools: readonly ToolEntry[] = []): RichTextSchema {
@@ -584,6 +597,10 @@ export interface RichTextPurifier {
  *   колонке Раскладки, не в другой Обёртке, списке, цитате и таблице; иначе
  *   снимается так же, вместе с тоном; `data-tone` — имя из `wrapperTones` и
  *   только на Обёртке;
+ * - сворачиваемый Блок — `details` с `summary` прямо в нём и обёрткой содержимого
+ *   `div[data-type="detailsContent"]` тоже прямо в нём; `open` — только пустой и
+ *   только на `details`. `summary` и обёртка вне `details` теряют тег, их Блоки
+ *   остаются подряд;
  * - `colspan`, `rowspan` — на `th`/`td`, целое от 1 до `tableSpans`;
  * - ссылка — `href` по `protocols` (выражение конфига), `rel` всегда
  *   `"noopener noreferrer"`, ссылка без адреса становится текстом;
@@ -648,7 +665,14 @@ const ATTRIBUTE_RULES: Record<string, (node: Element, value: string) => boolean>
   start: (node) => node.nodeName === "OL",
   "data-type": (node, value) =>
     (node.nodeName === "UL" && value === "taskList") ||
-    (node.nodeName === "LI" && value === "taskItem"),
+    (node.nodeName === "LI" && value === "taskItem") ||
+    // Обёртка содержимого сворачиваемого Блока: только `div` прямо в `details`.
+    (node.nodeName === "DIV" &&
+      value === DETAILS_CONTENT &&
+      node.parentElement?.nodeName === "DETAILS"),
+  // Открытый Блок: `open=""`, как его пишет Редактор; значение `open="open"` из
+  // чужого HTML атрибут теряет, Блок остаётся закрытым.
+  open: (node, value) => node.nodeName === "DETAILS" && value === "",
   "data-checked": (node, value) =>
     node.nodeName === "LI" &&
     node.getAttribute("data-type") === "taskItem" &&
@@ -787,6 +811,9 @@ const PARENT_OF: Record<string, string> = {
   SPAN: `${TASK_ITEM} > label`,
 };
 
+/** Значение `div[data-type]` обёртки содержимого сворачиваемого Блока (`details.ts`). */
+const DETAILS_CONTENT = "detailsContent";
+
 /** Значения `div[data-block]`: Раскладка, её колонка и Обёртка. */
 const LAYOUT_BLOCK = "layout";
 const COLUMN_BLOCK = "column";
@@ -794,10 +821,10 @@ const WRAPPER_BLOCK = "wrapper";
 
 /**
  * Где Раскладки быть не может: в другой Раскладке (её колонке), в Обёртке, в
- * списке, цитате и ячейке. Редактор такую не отдаёт — у колонки и прочих контейнеров
+ * списке, цитате, ячейке и сворачиваемом Блоке. Редактор такую не отдаёт — у колонки и прочих контейнеров
  * в Схеме движка её нет, — и при загрузке разворачивает в Блоки подряд.
  */
-const NOT_A_LAYOUT_PLACE = "div[data-block], li, blockquote, th, td";
+const NOT_A_LAYOUT_PLACE = "div[data-block], li, blockquote, th, td, details";
 
 /**
  * Раскладка, колонка и Обёртка: `true` — элемент обработан (оставлен или
@@ -868,6 +895,14 @@ function checkStructure(node: Element, schema: RichTextSchema): void {
     return;
   }
   if (node.nodeName === "SPAN" && coloured) return;
+  // Сворачиваемый Блок: `summary` — только прямо в `details`, обёртка
+  // содержимого с `data-type` — тоже (атрибут уже снят хуком, если она не там).
+  // Вне Блока они теряют обёртку, содержимое остаётся.
+  if (node.nodeName === "SUMMARY") {
+    if (node.parentElement?.nodeName !== "DETAILS") node.replaceWith(...node.childNodes);
+    return;
+  }
+  if (node.nodeName === "DIV" && node.getAttribute("data-type") === DETAILS_CONTENT) return;
   // Картинка — `img` с адресом прямо внутри `figure`, и только так: `figure`
   // без годной картинки разворачивается в содержимое, `img` вне `figure` или без
   // адреса удаляется, `figcaption` вне `figure` теряет обёртку.