@olddevs/ui 0.0.0-stage → 4.0.1

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

@@ -0,0 +1,129 @@
+"use client";
+
+import type { Node as PmNode } from "@tiptap/pm/model";
+
+/** Опции поиска — флажки панели «Поиск и замена». */
+export interface SearchOptions {
+  /** Учитывать регистр: без флажка «Cat» и «cat» — одно и то же. */
+  matchCase: boolean;
+  /** Слово целиком: «cat» не находится внутри «category». */
+  wholeWord: boolean;
+  /** Запрос — регулярное выражение JavaScript, а не текст. */
+  regex: boolean;
+}
+
+/** Совпадение — отрезок Документа в позициях ProseMirror. */
+export interface SearchMatch {
+  from: number;
+  to: number;
+  /**
+   * Найденный текст и группы регулярного выражения (`[0]` — совпадение
+   * целиком) — из той строки Блока, где его нашли. Замена раскрывает `$1…$9`
+   * по ним, а не прогоняет выражение по одному найденному куску: просмотр
+   * назад и вперёд (`(?<=a)b`) без соседнего текста не сработал бы.
+   */
+  captures: readonly string[];
+}
+
+export interface SearchResult {
+  matches: SearchMatch[];
+  /** Регулярное выражение не разобралось: текст ошибки движка JS, совпадений нет. */
+  error?: string;
+}
+
+/**
+ * Заместитель строчного не-текста (атома, мягкого переноса) в строке Блока.
+ * Совпадение через него не проходит: символ вне языков, и ни текст, ни
+ * разумное регулярное выражение его не содержат.
+ */
+const ATOM = "";
+
+/** Буква, цифра или подчёркивание любого алфавита — граница слова для кириллицы тоже. */
+const WORD = "[\\p{L}\\p{N}_]";
+
+/**
+ * Регулярное выражение запроса или ошибка. Без `regex` запрос — текст:
+ * спецсимволы экранируются. «Слово целиком» — просмотр назад и вперёд по
+ * классу букв Юникода, а не `\b`: `\b` в JS знает только латиницу, и «кот»
+ * в «котик» для него — целое слово.
+ */
+export function searchPattern(
+  query: string,
+  options: SearchOptions
+): { pattern: RegExp } | { error: string } | null {
+  if (query === "") return null;
+  const source = options.regex ? query : query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const wrapped = options.wholeWord ? `(?<!${WORD})(?:${source})(?!${WORD})` : source;
+  const flags = options.matchCase ? "g" : "gi";
+  try {
+    return { pattern: new RegExp(wrapped, `${flags}u`) };
+  } catch (cause) {
+    /*
+      Флаг `u` строже: `a\-b` и `\_` без него — обычные экранирования, с
+      ним — ошибка. Привычное по JS выражение не должно падать, поэтому без
+      «Слова целиком» (ему `u` нужен для `\p{L}`) пробуем и без флага.
+    */
+    if (!options.wholeWord) {
+      try {
+        return { pattern: new RegExp(wrapped, flags) };
+      } catch {
+        // Ошибка — та, что дал строгий разбор: она понятнее.
+      }
+    }
+    return { error: cause instanceof Error ? cause.message : String(cause) };
+  }
+}
+
+/**
+ * Все совпадения запроса в Документе, по порядку.
+ *
+ * ОБЛАСТЬ — ТЕКСТ ВНУТРИ ТЕКСТОВЫХ БЛОКОВ: абзацы, заголовки, ячейки таблиц,
+ * блоки кода. Каждый текстовый Блок — своя строка, поэтому совпадение не
+ * пересекает его границу. Метки внутри Блока не мешают: текст их узлов
+ * склеивается, и «bo**ld**» находится как «bold». Строчные атомы (картинка,
+ * упоминание, мягкий перенос) встают в строку заместителем `ATOM`, и через них
+ * совпадение не идёт.
+ *
+ * Пустые совпадения регулярного выражения (`x*`) пропускаются: подсвечивать и
+ * заменять там нечего.
+ */
+export function findMatches(doc: PmNode, query: string, options: SearchOptions): SearchResult {
+  const compiled = searchPattern(query, options);
+  if (!compiled) return { matches: [] };
+  if ("error" in compiled) return { matches: [], error: compiled.error };
+  const { pattern } = compiled;
+
+  const matches: SearchMatch[] = [];
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+    // Строка Блока и позиция Документа для каждого её символа (+1 — конец).
+    let text = "";
+    const positions: number[] = [];
+    node.forEach((child, offset) => {
+      const start = pos + 1 + offset;
+      if (child.isText) {
+        const value = child.text ?? "";
+        for (let i = 0; i < value.length; i++) positions.push(start + i);
+        text += value;
+      } else {
+        positions.push(start);
+        text += ATOM;
+      }
+    });
+    positions.push(pos + 1 + node.content.size);
+
+    pattern.lastIndex = 0;
+    for (const found of text.matchAll(pattern)) {
+      const length = found[0].length;
+      if (length === 0) continue;
+      const index = found.index;
+      matches.push({
+        from: positions[index]!,
+        to: positions[index + length]!,
+        captures: [...found],
+      });
+    }
+    return false;
+  });
+  return { matches };
+}

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

@@ -0,0 +1,254 @@
+"use client";
+
+import { Extension } from "@tiptap/core";
+import type { EditorState, Transaction } from "@tiptap/pm/state";
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { findMatches, type SearchMatch, type SearchOptions } from "./searchMatch.js";
+
+/**
+ * Состояние поиска в движке: запрос, опции, совпадения и текущее.
+ * Держит его плагин, а не React: совпадения пересчитываются в той же
+ * транзакции, что меняет Документ, и подсветка не отстаёт от текста ни на
+ * кадр. Панель только читает его (`searchState`) и шлёт команды.
+ */
+interface SearchPluginState {
+  query: string;
+  options: SearchOptions;
+  matches: SearchMatch[];
+  /** Индекс текущего совпадения; −1 — совпадений нет. */
+  current: number;
+  error?: string;
+  decorations: DecorationSet;
+}
+
+type SearchMeta =
+  | { type: "set"; query: string; options: SearchOptions }
+  | { type: "select"; index: number }
+  | { type: "clear" };
+
+const SEARCH_KEY = new PluginKey<SearchPluginState>("search");
+
+const EMPTY_OPTIONS: SearchOptions = { matchCase: false, wholeWord: false, regex: false };
+
+/** Что панели нужно знать о поиске; `undefined` — инструмента `search` в наборе нет. */
+export function searchState(state: EditorState):
+  | {
+      query: string;
+      options: SearchOptions;
+      current: number;
+      total: number;
+      error?: string;
+      matches: readonly SearchMatch[];
+    }
+  | undefined {
+  const plugin = SEARCH_KEY.getState(state);
+  if (!plugin) return undefined;
+  const { query, options, current, matches, error } = plugin;
+  return { query, options, current, total: matches.length, error, matches };
+}
+
+function decorate(state: EditorState, matches: SearchMatch[], current: number): DecorationSet {
+  if (matches.length === 0) return DecorationSet.empty;
+  return DecorationSet.create(
+    state.doc,
+    matches.map(({ from, to }, index) =>
+      Decoration.inline(from, to, {
+        class: index === current ? "rte-search-match rte-search-current" : "rte-search-match",
+      })
+    )
+  );
+}
+
+/** Индекс первого совпадения не раньше позиции; нет такого — первое по кругу. */
+function indexFrom(matches: SearchMatch[], pos: number): number {
+  if (matches.length === 0) return -1;
+  const found = matches.findIndex((match) => match.from >= pos);
+  return found === -1 ? 0 : found;
+}
+
+function build(
+  state: EditorState,
+  query: string,
+  options: SearchOptions,
+  current: (matches: SearchMatch[]) => number
+): SearchPluginState {
+  const { matches, error } = findMatches(state.doc, query, options);
+  const index = current(matches);
+  return {
+    query,
+    options,
+    matches,
+    current: index,
+    error,
+    decorations: decorate(state, matches, index),
+  };
+}
+
+function searchPlugin() {
+  return new Plugin<SearchPluginState>({
+    key: SEARCH_KEY,
+    state: {
+      init: (_, state) => build(state, "", EMPTY_OPTIONS, () => -1),
+      apply(tr: Transaction, previous, _old, state) {
+        const meta = tr.getMeta(SEARCH_KEY) as SearchMeta | undefined;
+        if (meta?.type === "clear") return build(state, "", previous.options, () => -1);
+        if (meta?.type === "set") {
+          return build(state, meta.query, meta.options, (matches) =>
+            indexFrom(matches, state.selection.from)
+          );
+        }
+        if (meta?.type === "select") {
+          return {
+            ...previous,
+            current: meta.index,
+            decorations: decorate(state, previous.matches, meta.index),
+          };
+        }
+        if (!tr.docChanged || previous.query === "") return previous;
+        /*
+          Правка Документа: совпадения пересчитываются целиком — запрос мог
+          найтись в новом тексте или исчезнуть в старом. Текущим остаётся то,
+          что стоит на месте прежнего текущего (или первое после него).
+        */
+        const anchor = previous.matches[previous.current];
+        const pos = anchor ? tr.mapping.map(anchor.from, -1) : state.selection.from;
+        return build(state, previous.query, previous.options, (matches) => indexFrom(matches, pos));
+      },
+    },
+    props: {
+      decorations: (state) => SEARCH_KEY.getState(state)?.decorations,
+    },
+  });
+}
+
+/**
+ * Текст замены для совпадения. С регулярным выражением работают `$1…$9`,
+ * `$&` (совпадение целиком) и `$$` (знак доллара) — по группам, которые поиск
+ * сохранил у совпадения (`SearchMatch.captures`). Без выражения замена —
+ * текст как есть, и «$1» остаётся «$1».
+ */
+function replacementFor(match: SearchMatch, replacement: string, options: SearchOptions) {
+  if (!options.regex) return replacement;
+  return replacement.replace(/\$(\$|&|[1-9])/g, (token, key: string) => {
+    if (key === "$") return "$";
+    if (key === "&") return match.captures[0] ?? "";
+    const index = Number(key);
+    return index < match.captures.length ? (match.captures[index] ?? "") : token;
+  });
+}
+
+/** Заменить отрезок текстом с Метками начала совпадения; пустая замена — удалить. */
+function replaceRange(tr: Transaction, { from, to }: SearchMatch, text: string) {
+  if (text === "") {
+    tr.delete(from, to);
+    return;
+  }
+  const marks = tr.doc.nodeAt(from)?.marks ?? [];
+  tr.replaceWith(from, to, tr.doc.type.schema.text(text, marks));
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    search: {
+      /** Новый запрос или опции: совпадения пересчитываются, текущее — первое после каретки. */
+      setSearch: (query: string, options: SearchOptions) => ReturnType;
+      /**
+       * Следующее (`1`) или предыдущее (`-1`) совпадение по кругу; выделяет его.
+       * Прокрутка ProseMirror срабатывает, только когда фокус в Документе; из
+       * поля поиска к совпадению прокручивает панель (`revealMatch.ts`).
+       */
+      searchStep: (step: 1 | -1) => ReturnType;
+      /** Заменить текущее совпадение — одна правка, одна отмена. */
+      replaceMatch: (replacement: string) => ReturnType;
+      /** Заменить все совпадения — одна транзакция, одна отмена. */
+      replaceAllMatches: (replacement: string) => ReturnType;
+      /** Убрать запрос и подсветку. */
+      clearSearch: () => ReturnType;
+    };
+  }
+}
+
+export interface SearchExtensionOptions {
+  /**
+   * Открыть панель поиска (`replace` — с фокусом в поле замены). Панель держит
+   * `RichTextEditor`; `false` — панели нет, и `Mod+F` уходит браузеру.
+   */
+  open: (replace: boolean) => boolean;
+}
+
+/**
+ * Поиск и замена по Документу: состояние и подсветка в плагине,
+ * команды для панели и сочетания. Своей Схемы нет, как у `clearFormatting`.
+ *
+ * `Mod+F` берётся, только когда фокус в Документе: вне поля браузер ищет по
+ * странице как обычно — так у Google Docs и Notion.
+ */
+export const SearchExtension = Extension.create<SearchExtensionOptions>({
+  name: "search",
+  addOptions: () => ({ open: () => false }),
+  addProseMirrorPlugins: () => [searchPlugin()],
+  addKeyboardShortcuts() {
+    return {
+      "Mod-f": () => this.options.open(false),
+      "Mod-Alt-f": () => this.options.open(true),
+    };
+  },
+  addCommands() {
+    return {
+      setSearch:
+        (query, options) =>
+        ({ tr, dispatch }) => {
+          if (dispatch)
+            tr.setMeta(SEARCH_KEY, { type: "set", query, options } satisfies SearchMeta);
+          return true;
+        },
+      searchStep:
+        (step) =>
+        ({ state, tr, dispatch }) => {
+          const search = SEARCH_KEY.getState(state);
+          if (!search || search.matches.length === 0) return false;
+          const total = search.matches.length;
+          const index = search.current === -1 ? 0 : (search.current + step + total) % total;
+          const match = search.matches[index]!;
+          if (dispatch) {
+            tr.setMeta(SEARCH_KEY, { type: "select", index } satisfies SearchMeta);
+            tr.setSelection(TextSelection.create(tr.doc, match.from, match.to)).scrollIntoView();
+          }
+          return true;
+        },
+      replaceMatch:
+        (replacement) =>
+        ({ state, tr, dispatch, editor }) => {
+          const search = SEARCH_KEY.getState(state);
+          const match = search?.matches[search.current];
+          if (!search || !match || !editor.isEditable) return false;
+          if (dispatch) {
+            replaceRange(tr, match, replacementFor(match, replacement, search.options));
+            // Каретка — за заменой: текущим станет следующее совпадение.
+            tr.setSelection(TextSelection.create(tr.doc, tr.mapping.map(match.to)));
+          }
+          return true;
+        },
+      replaceAllMatches:
+        (replacement) =>
+        ({ state, tr, dispatch, editor }) => {
+          const search = SEARCH_KEY.getState(state);
+          if (!search || search.matches.length === 0 || !editor.isEditable) return false;
+          if (dispatch) {
+            // С конца: замена не сдвигает ещё не заменённые отрезки.
+            for (const match of [...search.matches].reverse()) {
+              replaceRange(tr, match, replacementFor(match, replacement, search.options));
+            }
+          }
+          return true;
+        },
+      clearSearch:
+        () =>
+        ({ tr, dispatch }) => {
+          if (dispatch) tr.setMeta(SEARCH_KEY, { type: "clear" } satisfies SearchMeta);
+          return true;
+        },
+    };
+  },
+});

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

@@ -0,0 +1,30 @@
+"use client";
+
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+import { SearchExtension } from "./searchPlugin.js";
+
+/**
+ * Поиск и замена на описании Инструмента. Часть для движка —
+ * плагин состояния и подсветки с сочетаниями `Mod+F` и `Mod+Alt+F`; панель
+ * держит `RichTextEditor` и открывает её мостом `openSearch`. Кнопка «Поиск» —
+ * виджет фиксированной Панели у правого края (`EditorToolbar.tsx`), как
+ * справочник сочетаний, а не запись `buttons`: панель встаёт в угол поля, а не
+ * у кнопки или выделения.
+ */
+/** Сочетание кнопки «Поиск»: строка справочника и подсказка кнопки — из одной записи. */
+export const SEARCH_KEYS = ["mod", "F"] as const;
+
+export const SEARCH_TOOL: ToolDescriptor = {
+  name: "search",
+  engine: (context) => [SearchExtension.configure({ open: context.openSearch ?? (() => false) })],
+  shortcuts: [
+    { id: "search", group: "search", tool: "search", keys: SEARCH_KEYS, label: (m) => m.search },
+    {
+      id: "searchReplace",
+      group: "search",
+      tool: "search",
+      keys: ["mod", "alt", "F"],
+      label: (m) => m.searchReplace,
+    },
+  ],
+};

package/src/editor/features/table/TableInsertDialog.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { useMemo, useRef, useState, type FormEvent, type RefObject } from "react";
+import { Button } from "../../../components/actions/Button.js";
+import { Dialog } from "../../../components/overlays/Dialog.js";
+import { NumberInput } from "../../../components/inputs/NumberInput.js";
+import { useMessages } from "../../../i18n/useMessages.js";
+import { insertTableOfSize } from "../../core/insertItems.js";
+import {
+  lastTableSize,
+  rememberTableSize,
+  TABLE_MAX_SIZE,
+  type TableSize,
+} from "./tableActions.js";
+
+export interface TableInsertDialogProps {
+  editor: Editor;
+  open: boolean;
+  onClose: () => void;
+}
+
+/**
+ * Окно «Вставить таблицу»: столбцы и строки числами, до 20 × 50.
+ *
+ * ЗАЧЕМ ОКНО, ЕСЛИ ЕСТЬ СЕТКА. Сетка в подменю — до 10 × 10, и это её
+ * достоинство: размер виден глазу. Таблица больше сетки и точный размер с
+ * клавиатуры без двадцати нажатий стрелки — работа полей. В меню полям не
+ * место: фокус в поле ввода внутри `Menu` react-aria закрывает меню, а Tab в
+ * меню не ходит. Отсюда окно, как у TinyMCE.
+ *
+ * `Dialog` КИТА: ловушка фокуса, Escape по слоям и возврат фокуса тому, кто
+ * открыл. Открывает его пункт меню, который перед этим возвращает фокус в
+ * документ, — и окно при закрытии отдаёт его туда же: после «Вставить» —
+ * в первую ячейку новой таблицы, после «Отмена» — на прежнее место каретки.
+ *
+ * ENTER ВСТАВЛЯЕТ из любого поля — поля в `<form>`, и отправка формы и есть
+ * «Вставить». Значения читаются из ref, а не из состояния: `NumberInput`
+ * отдаёт набранное на Enter, и тем же нажатием форма уже отправляется —
+ * состояние React к этому моменту ещё не обновилось бы.
+ *
+ * Пустое поле выбор не меняет: «Вставить» берёт последнее допустимое значение.
+ */
+export function TableInsertDialog({ editor, open, onClose }: TableInsertDialogProps) {
+  const messages = useMessages().editor;
+  const fieldsRef = useRef<HTMLDivElement>(null);
+  /*
+    Фокус при открытии — в поле «Столбцы», а не на крестик (умолчание окна).
+    `NumberInput` отдаёт ссылку на рамку, а не на поле, поэтому ссылка здесь —
+    геттер, который находит поле внутри в тот момент, когда окно его спросит.
+  */
+  const firstField = useMemo<RefObject<HTMLElement | null>>(
+    () => ({
+      get current() {
+        return fieldsRef.current?.querySelector("input") ?? null;
+      },
+    }),
+    []
+  );
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={messages.tableInsertDialogTitle}
+      initialFocusRef={firstField}
+      className="w-full max-w-[340px]"
+    >
+      {/* Содержимое монтируется на каждое открытие: поля берут последний размер заново. */}
+      {open && <TableInsertForm editor={editor} onClose={onClose} fieldsRef={fieldsRef} />}
+    </Dialog>
+  );
+}
+
+function TableInsertForm({
+  editor,
+  onClose,
+  fieldsRef,
+}: {
+  editor: Editor;
+  onClose: () => void;
+  fieldsRef: RefObject<HTMLDivElement | null>;
+}) {
+  const messages = useMessages().editor;
+  const [draft, setDraft] = useState<{ cols: number | null; rows: number | null }>(() =>
+    lastTableSize(editor)
+  );
+  const size = useRef<TableSize>(lastTableSize(editor));
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    rememberTableSize(editor, size.current);
+    insertTableOfSize(editor, size.current.cols, size.current.rows);
+    onClose();
+  };
+
+  const field = (key: keyof TableSize, label: string, max: number) => (
+    <label className="text-fg-2 text-caption flex min-w-0 flex-1 flex-col gap-1">
+      <span aria-hidden="true">{label}</span>
+      <NumberInput
+        label={label}
+        value={draft[key]}
+        onChange={(value) => {
+          setDraft((current) => ({ ...current, [key]: value }));
+          if (value !== null) size.current = { ...size.current, [key]: value };
+        }}
+        min={1}
+        max={max}
+        step={1}
+      />
+    </label>
+  );
+
+  return (
+    <form onSubmit={submit} className="flex flex-col gap-4 px-5 py-4">
+      <div ref={fieldsRef} className="flex gap-3">
+        {field("cols", messages.tableColumns, TABLE_MAX_SIZE.cols)}
+        {field("rows", messages.tableRows, TABLE_MAX_SIZE.rows)}
+      </div>
+      <div className="flex items-center justify-end gap-2.5">
+        <Button type="button" variant="ghost" onClick={onClose}>
+          {messages.tableCancel}
+        </Button>
+        <Button type="submit" variant="solid" tone="accent">
+          {messages.tableInsert}
+        </Button>
+      </div>
+    </form>
+  );
+}