@olddevs/ui 4.3.0 → 4.4.0

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

@@ -0,0 +1,70 @@
+/**
+ * Заголовки Документа для Оглавления (`RichTextToc`, ADR-0066).
+ *
+ * Читаются из DOM цели, а не из строки `html`: один путь для Просмотра,
+ * Редактора и JSON-конверта, и переходу всё равно нужен живой узел.
+ *
+ * Модуль без React и без движка: только обход DOM.
+ */
+
+/** Заголовок в Оглавлении. */
+export interface TocHeading {
+  /** Узел заголовка в Документе: к нему ведёт переход. */
+  element: HTMLElement;
+  /** Текст пункта — текст заголовка без разметки. */
+  text: string;
+  /** Уровень по тегу: 1 для `h1` … 4 для `h4`. */
+  level: number;
+  /**
+   * Глубина относительно самого крупного заголовка Документа: у него 0. Отступ
+   * пункта и длина штриха считаются от неё, а не от уровня, — иначе Документ,
+   * где старший заголовок H2, начинался бы с пустой ступени.
+   */
+  depth: number;
+}
+
+const HEADING = "h1, h2, h3, h4";
+
+/**
+ * Обёртка — единственный контейнер, чьи заголовки идут в Оглавление.
+ *
+ * Колонки Раскладки — нет: два заголовка на одной высоте в соседних колонках
+ * путают подсветку текущего раздела, и порядок «левая колонка, затем правая»
+ * читателю ничего не говорит. Острова и свои Блоки — тоже нет: их содержимое —
+ * часть Блока, а не структура Документа.
+ */
+const WRAPPER = 'div[data-block="wrapper"]';
+
+/**
+ * Корень Документа внутри цели. У Просмотра это сам контейнер; у Редактора
+ * Документ лежит глубже, в узле движка — Панель и строка статуса снаружи него.
+ */
+export function documentRoot(target: HTMLElement): HTMLElement {
+  return target.querySelector<HTMLElement>(".ProseMirror") ?? target;
+}
+
+/** Заголовок лежит на верхнем уровне Документа или только в Обёртках. */
+function isStructural(heading: Element, root: HTMLElement): boolean {
+  for (let node = heading.parentElement; node && node !== root; node = node.parentElement) {
+    if (!node.matches(WRAPPER)) return false;
+  }
+  return true;
+}
+
+/** Заголовки Документа в порядке чтения. */
+export function collectHeadings(target: HTMLElement): TocHeading[] {
+  const root = documentRoot(target);
+  // Пустой заголовок (автор только начал его в Редакторе) — не пункт: у
+  // кнопки без текста не было бы имени, а у полосы — лишний штрих.
+  const found = [...root.querySelectorAll<HTMLElement>(HEADING)].filter(
+    (heading) => isStructural(heading, root) && heading.textContent?.trim()
+  );
+  const levels = found.map((heading) => Number(heading.tagName[1]));
+  const top = Math.min(...levels);
+  return found.map((element, index) => ({
+    element,
+    text: element.textContent?.trim() ?? "",
+    level: levels[index]!,
+    depth: levels[index]! - top,
+  }));
+}

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

@@ -0,0 +1,21 @@
+"use client";
+
+import { toPixels } from "../../../hooks/useStickyOffset.js";
+
+/**
+ * Последний замер шапки. Подсветка читает отступ на каждом кадре прокрутки, а
+ * `toPixels` для значения не в пикселях (`4rem`) меряет зонд — две раскладки.
+ * Замер повторяется только при смене сырого значения, как в `useStickyOffset`.
+ */
+let measured: { raw: string; px: number | null } = { raw: "", px: null };
+
+/** Высота липкой шапки в пикселях; переменной нет — `null`. */
+export function stickyOffset(offsetVar: string): number | null {
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(offsetVar).trim();
+  if (!raw) return null;
+  if (raw !== measured.raw) {
+    const px = parseFloat(toPixels(raw, "0px"));
+    measured = { raw, px: Number.isFinite(px) && px > 0 ? px : null };
+  }
+  return measured.px;
+}

package/src/editor/index.ts

@@ -21,6 +21,8 @@ export type { RichTextDocument } from "./core/jsonDocument.js";
 export { useRichTextEditorState } from "./hooks/useRichTextEditorState.js";
 export { RichTextView } from "./RichTextView.js";
 export type { RichTextViewProps } from "./RichTextView.js";
+export { RichTextToc } from "./features/toc/RichTextToc.js";
+export type { RichTextTocProps } from "./features/toc/RichTextToc.js";
 export type { FieldNotice, FieldNoticeTone } from "./core/fieldNotice.js";
 export type { RichTextSurface } from "./styles/surface.js";
 export { richTextSanitizeConfig, richTextSchema, sanitizeRichText } from "./core/schema.js";

package/src/i18n/defaults.ts

@@ -654,6 +654,7 @@ export const DEFAULT_MESSAGES: UiMessages = {
     blockMoveDown: "Move down",
     blockDuplicate: "Duplicate",
     blockDelete: "Delete",
+    toc: "Table of contents",
   },
 };
 

package/src/i18n/messages.ts

@@ -1080,6 +1080,11 @@ export interface UiMessages {
     blockMoveDown: string;
     blockDuplicate: string;
     blockDelete: string;
+    /**
+     * Оглавление Документа (`RichTextToc`): имя кнопки-полосы и подпись
+     * `nav` со списком заголовков — одно слово на оба, это одна вещь.
+     */
+    toc: string;
   };
 }
 

package/src/locales/ru.ts

@@ -693,6 +693,7 @@ export const messages: UiMessages = {
     blockMoveDown: "Вниз",
     blockDuplicate: "Дублировать",
     blockDelete: "Удалить",
+    toc: "Оглавление",
   },
 };