@olddevs/ui 0.0.0-stage → 4.0.1

package/src/editor/features/link/LinkPopover.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+// Происхождение: minimal-tiptap, `components/link/link-edit-block.tsx` и
+// `link-edit-popover.tsx` (MIT, © 2024 Aslam, https://github.com/Aslam97/minimal-tiptap).
+// Перенесены поведение «применить к выделению или вставить адрес текстом» и
+// правка ссылки под кареткой; разметка shadcn заменена примитивами кита.
+// Лицензия — NOTICE в корне пакета.
+
+import type { Editor } from "@tiptap/react";
+import { useId, useState, type KeyboardEvent } from "react";
+import { Button } from "../../../components/actions/Button.js";
+import { FormField } from "../../../components/inputs/FormField.js";
+import { TextControl } from "../../../components/inputs/TextControl.js";
+import { useMessages } from "../../../i18n/useMessages.js";
+import { normalizeLinkInput } from "./link.js";
+
+/**
+ * Содержимое поповера адреса ссылки: `Mod+K` и кнопка «Ссылка» Панели и Меню
+ * выделения (описание — `linkTool.tsx`).
+ *
+ * Рамку держит кит (`ToolButtonView.tsx`): `Popover` в стеке слоёв, имя рамки
+ * — подпись кнопки, возврат фокуса в Документ на прежнее выделение.
+ *
+ * ЯКОРЬ — ВЫДЕЛЕНИЕ, а не кнопка. Поповер открывают и с клавиатуры, когда
+ * Панели нет вовсе (`toolbar="none"`) или плавающая спрятана, поэтому он
+ * стоит у текста, который станет ссылкой, — одинаково при любом способе
+ * открыть.
+ *
+ * Форма монтируется заново на каждое открытие: поле берёт адрес ссылки под
+ * кареткой в момент открытия, а не прошлый черновик.
+ */
+export function LinkForm({ editor, onDone }: { editor: Editor; onDone: () => void }) {
+  const messages = useMessages().editor;
+  const fieldId = useId();
+  const [existing] = useState(() =>
+    editor.isActive("link") ? String(editor.getAttributes("link").href ?? "") : null
+  );
+  const [draft, setDraft] = useState(existing ?? "");
+  const [invalid, setInvalid] = useState(false);
+
+  const remove = () => {
+    editor.chain().extendMarkRange("link").unsetLink().run();
+    onDone();
+  };
+
+  const apply = () => {
+    const text = draft.trim();
+    // Пустое поле — «ссылки здесь нет»: у существующей это снятие, у новой —
+    // просто закрыть.
+    if (!text) {
+      if (existing != null) remove();
+      else onDone();
+      return;
+    }
+    const href = normalizeLinkInput(text);
+    if (!href) {
+      setInvalid(true);
+      return;
+    }
+    const chain = editor.chain();
+    if (!editor.state.selection.empty) chain.setLink({ href });
+    else if (existing != null) chain.extendMarkRange("link").setLink({ href });
+    // Выделения нет — адрес вставляется текстом ссылки, как в minimal-tiptap.
+    else chain.insertContent({ type: "text", text, marks: [{ type: "link", attrs: { href } }] });
+    chain.run();
+    onDone();
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    // Enter, которым IME подтверждает слово, — не «применить».
+    if (event.key !== "Enter" || event.nativeEvent.isComposing) return;
+    event.preventDefault();
+    apply();
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* `layout="stack"` явно: поповер рисуется вне раскладки формы, где
+          стоит Редактор, и боковая подпись `FormLayout` ему не подходит. */}
+      <FormField
+        label={messages.linkAddress}
+        htmlFor={fieldId}
+        error={invalid ? messages.linkInvalid : undefined}
+        layout="stack"
+      >
+        <TextControl
+          id={fieldId}
+          size="sm"
+          type="text"
+          inputMode="url"
+          autoComplete="off"
+          spellCheck={false}
+          placeholder="https://"
+          value={draft}
+          onChange={(event) => {
+            setDraft(event.target.value);
+            setInvalid(false);
+          }}
+          onKeyDown={onKeyDown}
+        />
+      </FormField>
+      <div className="flex justify-end gap-2">
+        {existing != null && (
+          <Button type="button" size="sm" variant="ghost" tone="danger" onClick={remove}>
+            {messages.linkRemove}
+          </Button>
+        )}
+        <Button type="button" size="sm" variant="solid" tone="accent" onClick={apply}>
+          {messages.linkApply}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/src/editor/features/link/link.ts

@@ -0,0 +1,112 @@
+"use client";
+
+import { Link as TiptapLink, type LinkOptions } from "@tiptap/extension-link";
+import { isAllowedLinkHref } from "../../core/schema.js";
+
+/** `rel` каждой ссылки Документа: страница показа не отдаёт ей ни `opener`, ни `Referer`. */
+export const LINK_REL = "noopener noreferrer";
+
+/** Есть ли у адреса схема (`https:`, `mailto:`, `javascript:`…). */
+const SCHEME = /^[a-z][a-z0-9+.-]*:/i;
+
+/**
+ * Ссылка Документа — `Link` Tiptap, суженный до Схемы кита.
+ *
+ * ПОЧЕМУ `extend`, А НЕ `StarterKit.configure({ link })`. Опциями не убрать
+ * лишнее из РАЗБОРА: атрибуты `target`, `class`, `title` и чужой `rel` Tiptap
+ * читает из входящего `<a>` сам и отдаёт обратно, а `isAllowedUri` по
+ * умолчанию пропускает относительные адреса и десяток схем (`ftp`, `tel`,
+ * `sms`…). Здесь у Метки один атрибут — `href`, а `rel` пишется на выходе.
+ *
+ * АДРЕС ПРОВЕРЯЕТСЯ НА КАЖДОМ ВХОДЕ, и входы разные:
+ *
+ * - `<a href>` из `value` и вставки HTML — `parseHTML`, строго по Схеме;
+ * - Markdown (`[текст](адрес)`) приходит JSON-ом мимо `parseHTML` —
+ *   `parseMarkdown` снимает ссылку с чужим адресом, текст остаётся;
+ * - автоссылка при наборе и адрес из буфера — значение linkify, у него часто
+ *   нет схемы (`example.com`): схему подставит `defaultProtocol`, поэтому
+ *   `isAllowedUri` отсекает только ЯВНУЮ чужую схему;
+ * - вставка адреса поверх выделения (`linkOnPaste`) `isAllowedUri` не зовёт
+ *   вовсе — её закрывает `shouldAutoLink`;
+ * - на выходе `renderHTML` ещё раз сверяет адрес: Метку с чужим адресом мог
+ *   поставить только сырой `ref.editor`, и в HTML она уходит без `href`.
+ *
+ * `Mod+K` и поповер адреса — не здесь: это кнопка описания Инструмента
+ * (`linkTool.tsx`), и клавишу кнопки вешает кит (`toolButtons.ts`).
+ */
+export const RichLink = TiptapLink.extend<LinkOptions>({
+  addOptions() {
+    const parent = this.parent!();
+    return {
+      ...parent,
+      // В Редакторе ссылка не открывается по щелчку: щелчок ставит каретку,
+      // как в любом тексте. Адрес видно и правят в поповере.
+      openOnClick: false,
+      autolink: true,
+      linkOnPaste: true,
+      defaultProtocol: "https",
+      HTMLAttributes: { rel: LINK_REL },
+      isAllowedUri: (url) => {
+        const trimmed = url.trim();
+        return !SCHEME.test(trimmed) || isAllowedLinkHref(trimmed);
+      },
+      shouldAutoLink: (url) => {
+        const trimmed = url.trim();
+        if (SCHEME.test(trimmed) && !isAllowedLinkHref(trimmed)) return false;
+        return parent.shouldAutoLink(url);
+      },
+    };
+  },
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML: (element) => element.getAttribute("href")?.trim() ?? null,
+        // `rel` — константа выхода, а не атрибут Метки: см. `renderHTML`.
+        renderHTML: (attributes) => ({ href: attributes.href }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "a[href]",
+        getAttrs: (dom) => (isAllowedLinkHref(dom.getAttribute("href") ?? "") ? null : false),
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const href = typeof HTMLAttributes.href === "string" ? HTMLAttributes.href : "";
+    return ["a", isAllowedLinkHref(href) ? { href, rel: LINK_REL } : { rel: LINK_REL }, 0];
+  },
+
+  parseMarkdown: (token, helpers) => {
+    const content = helpers.parseInline(token.tokens ?? []);
+    const href = typeof token.href === "string" ? token.href.trim() : "";
+    return isAllowedLinkHref(href) ? helpers.applyMark("link", content, { href }) : content;
+  },
+});
+
+/** Похоже на адрес почты без схемы: `team@example.com`. */
+const BARE_EMAIL = /^[^\s@/]+@[^\s@/]+\.[^\s@/]+$/;
+
+/**
+ * Адрес из поля поповера — в адрес ссылки, или `null`, если такой ссылке в
+ * Документе не быть.
+ *
+ * Человек пишет адрес так, как видит его в строке браузера: `example.com`, а
+ * не `https://example.com`. Адрес без схемы поэтому получает `https://`, а
+ * похожий на почту — `mailto:`. Однозначно это потому, что относительных
+ * адресов Схема не принимает (`RICH_TEXT_SCHEMA.protocols`): начинающийся с
+ * `/`, `#`, `?` или `.` адрес — ошибка, а не путь от текущей страницы.
+ */
+export function normalizeLinkInput(input: string): string | null {
+  const value = input.trim();
+  if (!value || /\s/.test(value)) return null;
+  if (SCHEME.test(value)) return isAllowedLinkHref(value) ? value : null;
+  if (/^[/#?.]/.test(value)) return null;
+  return BARE_EMAIL.test(value) ? `mailto:${value}` : `https://${value}`;
+}

package/src/editor/features/link/linkTool.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { LinkIcon } from "../../../icons.js";
+import { RichLink } from "./link.js";
+import { LinkForm } from "./LinkPopover.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+
+/**
+ * Ссылка на описании Инструмента (ADR-0058, п. 10.4) — проверка
+ * кнопки, Меню выделения и сочетания на той же форме, что у своего
+ * Инструмента.
+ *
+ * Кнопка не ставит Метку сама, а открывает поповер адреса — и щелчком, и
+ * `Mod+K`. `aria-pressed` — каретка в ссылке: поповер тогда правит её адрес.
+ * Привилегии кита: группа «Ссылка» справочника сочетаний и рамка поповера у
+ * выделения, а не у кнопки (`LinkPopover.tsx` — почему).
+ */
+export const LINK_TOOL: ToolDescriptor = {
+  name: "link",
+  engine: () => [RichLink],
+  kitTags: ["a"],
+  buttons: [
+    {
+      id: "link",
+      label: ({ messages }) => messages.link,
+      icon: LinkIcon,
+      can: () => true,
+      isActive: (editor) => editor.isActive("link"),
+      selectionMenu: true,
+      shortcut: ["mod", "K"],
+      shortcutGroup: "link",
+      popover: ({ editor, close }) => <LinkForm editor={editor} onDone={close} />,
+      popoverFrame: { anchor: "selection", className: "w-80 p-3" },
+    },
+  ],
+};

package/src/editor/features/search/SearchPanel.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import type { Editor } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
+import { useEffect, useId, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react";
+import { Button } from "../../../components/actions/Button.js";
+import { Toggle } from "../../../components/actions/Toggle.js";
+import { Checkbox } from "../../../components/inputs/Checkbox.js";
+import { TextControl } from "../../../components/inputs/TextControl.js";
+import { ChevronDownIcon, ChevronUpIcon, CloseIcon } from "../../../icons.js";
+import { useMessages } from "../../../i18n/useMessages.js";
+import { cn } from "../../../lib/cn.js";
+import { GLASS_PANEL_CLASS } from "../../styles/glass.js";
+import type { SearchOptions } from "./searchMatch.js";
+import { revealCurrentMatch } from "./revealMatch.js";
+import { searchState } from "./searchPlugin.js";
+
+export interface SearchPanelProps {
+  editor: Editor;
+  /**
+   * Запрос на фокус: каждое открытие (кнопка, `Mod+F`, `Mod+Alt+F`, Хэндл)
+   * приносит новый `token`, и панель ставит фокус заново — повторный `Mod+F`
+   * при открытой панели выделяет текст поля поиска.
+   */
+  focus: { token: number; replace: boolean; query: string };
+  onClose: () => void;
+  className?: string;
+}
+
+const NO_OPTIONS: SearchOptions = { matchCase: false, wholeWord: false, regex: false };
+
+/**
+ * Панель «Поиск и замена»: немодальная, в углу поля. Состояние
+ * поиска — в плагине движка (`searchPlugin.ts`); панель держит только то, что
+ * набрал автор, и шлёт команды.
+ *
+ * НЕМОДАЛЬНАЯ, БЕЗ ЛОВУШКИ ФОКУСА: автор ищет, правит найденное в Документе и
+ * возвращается в поле поиска — как в Google Docs. Escape из любого её поля
+ * закрывает панель и ставит каретку на текущее совпадение.
+ *
+ * Грузится лениво, при первом открытии (`RichTextEditor.tsx`): поля, флажки и
+ * переключатель не ложатся на «старт» Редактора, а плагин подсветки маленький и
+ * стоит в нём.
+ */
+export function SearchPanel({ editor, focus, onClose, className }: SearchPanelProps) {
+  const messages = useMessages().editor;
+  const [query, setQuery] = useState(focus.query);
+  const [replacement, setReplacement] = useState("");
+  const [options, setOptions] = useState(NO_OPTIONS);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const replaceRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLElement>(null);
+  const errorId = useId();
+
+  const search = useEditorState({
+    editor,
+    selector: ({ editor: current }) => {
+      const state = searchState(current.state);
+      return {
+        current: state?.current ?? -1,
+        total: state?.total ?? 0,
+        error: state?.error,
+        editable: current.isEditable,
+      };
+    },
+  });
+
+  // Новое открытие: выделенный в Документе текст — в поле.
+  useEffect(() => {
+    if (focus.query) setQuery(focus.query);
+  }, [focus.token, focus.query]);
+  /*
+    Фокус и выделение текста поля — один раз на открытие и когда новый запрос
+    уже встал в поле: иначе `select()` выделил бы прежний текст, а смена
+    значения тут же сняла бы выделение. Правка поля автором сюда не попадает:
+    её открытие уже обработано.
+  */
+  const handled = useRef(-1);
+  useLayoutEffect(() => {
+    if (handled.current === focus.token) return;
+    if (focus.query && query !== focus.query) return;
+    handled.current = focus.token;
+    const field = focus.replace && replaceRef.current ? replaceRef.current : searchRef.current;
+    field?.focus();
+    field?.select();
+  }, [focus.token, focus.query, focus.replace, query]);
+
+  /*
+    Текущее совпадение — в видимую область (`revealMatch.ts`): ProseMirror сам
+    не прокручивает, пока фокус в поле поиска. Кадр спустя — когда панель уже
+    разложена и её край можно учесть. Панель и её липкий родитель (Панель
+    Редактора) лежат поверх Документа: совпадение под ними не считается видимым.
+  */
+  const revealFrame = useRef(0);
+  const reveal = () => {
+    cancelAnimationFrame(revealFrame.current);
+    revealFrame.current = requestAnimationFrame(() => {
+      const panel = panelRef.current;
+      revealCurrentMatch(editor.view.dom, [panel, panel?.parentElement]);
+    });
+  };
+  useEffect(() => () => cancelAnimationFrame(revealFrame.current), []);
+
+  useEffect(() => {
+    editor.commands.setSearch(query, options);
+    // Уже при наборе, а не только по Enter. Выделение Документа не трогаем:
+    // фокус в поле поиска, и набор не должен его уводить.
+    reveal();
+    // `reveal` — новая на каждый рендер, но читает только рефы и `editor`.
+  }, [editor, query, options]);
+
+  const step = (direction: 1 | -1) => {
+    editor.commands.searchStep(direction);
+    reveal();
+  };
+  // Заменённое уходит, текущим становится следующее — его и показать.
+  const replaceOne = () => {
+    editor.commands.replaceMatch(replacement);
+    reveal();
+  };
+
+  // Каретку на совпадение и фокус в Документ ставит `RichTextEditor` (`closeSearch`).
+  const close = onClose;
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    event.stopPropagation();
+    close();
+  };
+
+  const toggle = (key: keyof SearchOptions) => (checked: boolean) =>
+    setOptions((previous) => ({ ...previous, [key]: checked }));
+
+  const hasMatches = search.total > 0;
+  const counter = hasMatches ? `${search.current + 1} / ${search.total}` : "0 / 0";
+  const status =
+    query === "" || search.error
+      ? ""
+      : hasMatches
+        ? messages.searchCount({ current: search.current + 1, total: search.total })
+        : messages.searchNoMatches;
+
+  return (
+    <section
+      ref={panelRef}
+      role="search"
+      aria-label={messages.searchPanel}
+      onKeyDown={onKeyDown}
+      className={cn(
+        GLASS_PANEL_CLASS,
+        "border-line flex flex-col gap-2 rounded-md border p-3 shadow-[var(--shadow-2)]",
+        className
+      )}
+    >
+      <div className="flex items-center gap-1">
+        <span aria-hidden="true" className="text-fg-2 mr-auto text-xs tabular-nums">
+          {counter}
+        </span>
+        <div role="status" className="sr-only">
+          {status}
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          iconOnly
+          aria-label={messages.searchPrevious}
+          icon={<ChevronUpIcon size={16} aria-hidden />}
+          disabled={!hasMatches}
+          onClick={() => step(-1)}
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          iconOnly
+          aria-label={messages.searchNext}
+          icon={<ChevronDownIcon size={16} aria-hidden />}
+          disabled={!hasMatches}
+          onClick={() => step(1)}
+        />
+        <Button
+          variant="ghost"
+          size="sm"
+          iconOnly
+          aria-label={messages.searchClose}
+          icon={<CloseIcon size={16} aria-hidden />}
+          onClick={close}
+        />
+      </div>
+
+      <TextControl
+        ref={searchRef}
+        size="sm"
+        aria-label={messages.searchField}
+        placeholder={messages.searchField}
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        aria-invalid={search.error ? true : undefined}
+        aria-describedby={search.error ? errorId : undefined}
+        onKeyDown={(event) => {
+          if (event.key !== "Enter") return;
+          event.preventDefault();
+          step(event.shiftKey ? -1 : 1);
+        }}
+      />
+      {search.error && (
+        <p id={errorId} className="text-danger text-xs">
+          {messages.searchInvalid}
+        </p>
+      )}
+
+      {search.editable && (
+        <TextControl
+          ref={replaceRef}
+          size="sm"
+          aria-label={messages.replaceField}
+          placeholder={messages.replaceField}
+          value={replacement}
+          onChange={(event) => setReplacement(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key !== "Enter") return;
+            event.preventDefault();
+            replaceOne();
+          }}
+        />
+      )}
+
+      <div className="flex flex-col gap-1.5 py-1">
+        <Checkbox size="sm" checked={options.matchCase} onCheckedChange={toggle("matchCase")}>
+          {messages.searchMatchCase}
+        </Checkbox>
+        <Checkbox size="sm" checked={options.wholeWord} onCheckedChange={toggle("wholeWord")}>
+          {messages.searchWholeWord}
+        </Checkbox>
+        <div className="flex items-center justify-between gap-2">
+          <span aria-hidden="true" className="text-fg-1 text-xs">
+            {messages.searchRegex}
+          </span>
+          <Toggle
+            label={messages.searchRegex}
+            checked={options.regex}
+            onCheckedChange={toggle("regex")}
+          />
+        </div>
+      </div>
+
+      {search.editable && (
+        <div className="flex justify-end gap-2">
+          <Button variant="soft" size="sm" disabled={!hasMatches} onClick={replaceOne}>
+            {messages.replaceOne}
+          </Button>
+          <Button
+            variant="soft"
+            size="sm"
+            disabled={!hasMatches}
+            onClick={() => editor.commands.replaceAllMatches(replacement)}
+          >
+            {messages.replaceAll}
+          </Button>
+        </div>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,69 @@
+"use client";
+
+interface Band {
+  top: number;
+  bottom: number;
+}
+
+/**
+ * Показать текущее совпадение поиска.
+ *
+ * ПОЧЕМУ НЕ `tr.scrollIntoView()`. ProseMirror прокручивает к выделению, только
+ * когда выделение браузера стоит внутри Документа, а при переходе по совпадениям
+ * фокус остаётся в поле поиска — прокрутка молча пропускалась. Поэтому панель
+ * показывает узел подсветки сама.
+ *
+ * СВОБОДНАЯ ОБЛАСТЬ — окно, суженное прокручиваемыми предками совпадения (поле с
+ * `maxHeight` или `resizable`, контейнер экрана) и тем, что лежит поверх
+ * Документа: липкой Панелью и самой панелью поиска, если она перекрывает
+ * совпадение по горизонтали. Если под ними не остаётся и строки (низкое поле с
+ * `maxHeight`), панель не учитывается: совпадение хотя бы в поле.
+ *
+ * Видимое целиком совпадение не двигается — переход между соседними строками
+ * не дёргает страницу. Невидимое встаёт посередине свободной области, как у
+ * поиска Chrome. Не `scrollIntoView({ block: "center" })`: тот центрирует по
+ * прокручиваемому предку целиком и ставит совпадение ровно под панель поиска.
+ * Сдвиг раздаётся по цепочке: сначала поле, остаток — окну.
+ *
+ * @param documentRoot корень Документа движка (`editor.view.dom`)
+ * @param overlays элементы поверх Документа: панель поиска и её липкий родитель
+ */
+export function revealCurrentMatch(
+  documentRoot: HTMLElement,
+  overlays: readonly (Element | null | undefined)[]
+): void {
+  const match = documentRoot.querySelector<HTMLElement>(".rte-search-current");
+  if (!match) return;
+  const rect = match.getBoundingClientRect();
+
+  const scrollers: Element[] = [];
+  const area: Band = { top: 0, bottom: window.innerHeight };
+  for (let node = match.parentElement; node && node !== document.body; node = node.parentElement) {
+    if (!/auto|scroll|hidden/.test(getComputedStyle(node).overflowY)) continue;
+    if (node.scrollHeight <= node.clientHeight) continue;
+    scrollers.push(node);
+    const box = node.getBoundingClientRect();
+    area.top = Math.max(area.top, box.top);
+    area.bottom = Math.min(area.bottom, box.bottom);
+  }
+  scrollers.push(document.scrollingElement ?? document.documentElement);
+
+  const free: Band = { ...area };
+  for (const overlay of overlays) {
+    if (!overlay) continue;
+    const box = overlay.getBoundingClientRect();
+    if (box.height > 0 && box.left < rect.right && rect.left < box.right) {
+      free.top = Math.max(free.top, box.bottom);
+    }
+  }
+  const band = free.bottom - free.top >= rect.height ? free : area;
+
+  if (rect.top >= band.top && rect.bottom <= band.bottom) return;
+  let delta = (rect.top + rect.bottom) / 2 - (band.top + band.bottom) / 2;
+  for (const scroller of scrollers) {
+    if (Math.abs(delta) < 1) break;
+    const before = scroller.scrollTop;
+    scroller.scrollTop = before + delta;
+    delta -= scroller.scrollTop - before;
+  }
+}