@olddevs/ui 0.0.0-stage → 4.0.0

package/src/editor/ui/InsertMenuButton.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuSection,
+  MenuTrigger,
+} from "../../components/overlays/Menu.js";
+import { useMessages, useUiLocale } from "../../i18n/useMessages.js";
+import { AddIcon } from "../../icons.js";
+import { useLockableMenu } from "./lockableMenu.js";
+import {
+  applyInsertItem,
+  INSERT_SECTIONS,
+  insertItemHint,
+  type InsertItem,
+} from "../core/insertItems.js";
+import { GLASS_MENU_CLASS } from "../styles/glass.js";
+
+export interface InsertMenuButtonProps {
+  editor: Editor;
+  items: readonly InsertItem[];
+  disabled: boolean;
+  /** `aria-disabled`: в обходе стрелками, но меню не открывает (HTML-режим). */
+  unavailable?: boolean;
+  /** Подпись сочетания — от Панели: она знает, Apple ли это. */
+  shortcut: (keys: readonly string[]) => string;
+}
+
+/**
+ * «+» на Панели — второй вход в Меню вставки, для мыши и для тех, кто не знает
+ * про `/`. Пункты те же, что у списка по `/`, из того же реестра
+ * (`insertItems.ts`), и применяются тем же `applyInsertItem` — только к
+ * выделению, а не к набранному запросу.
+ *
+ * Здесь это `Menu` кита, а не список у курсора: фокус уходит из поля на кнопку,
+ * и меню с собственным фокусом — обычный паттерн APG «кнопка меню»
+ * (`aria-haspopup`, стрелки, Escape — через стек слоёв ADR-0041, как у меню
+ * «¶»). Фильтра у него нет: набирать запрос негде, а первая буква
+ * подписи и так ведёт к пункту (typeahead react-aria).
+ */
+export function InsertMenuButton({
+  editor,
+  items,
+  disabled,
+  unavailable = false,
+  shortcut,
+}: InsertMenuButtonProps) {
+  const messages = useMessages().editor;
+  const locale = useUiLocale();
+  // Как у меню форматирования: недоступная кнопка меню не открывает.
+  const menu = useLockableMenu(unavailable);
+  return (
+    <MenuTrigger {...menu.trigger}>
+      <MenuButton
+        variant="ghost"
+        size="sm"
+        iconOnly
+        disabled={disabled}
+        aria-label={messages.insertMenu}
+        icon={<AddIcon size={16} aria-hidden />}
+        {...menu.button}
+      />
+      <Menu
+        aria-label={messages.insertMenu}
+        className={GLASS_MENU_CLASS}
+        onAction={(key) => {
+          const item = items.find((candidate) => candidate.id === key);
+          if (item) applyInsertItem(editor, item, null);
+        }}
+      >
+        {INSERT_SECTIONS.map((section) => {
+          const rows = items.filter((item) => item.section === section);
+          if (rows.length === 0) return null;
+          return (
+            <MenuSection
+              key={section}
+              id={section}
+              label={section === "insert" ? messages.insertSection : messages.turnIntoSection}
+            >
+              {rows.map((item) => {
+                const Icon = item.icon;
+                const label = item.label(messages, locale);
+                return (
+                  <MenuItem
+                    key={item.id}
+                    id={item.id}
+                    textValue={label}
+                    icon={<Icon size={14} aria-hidden />}
+                    shortcut={insertItemHint(item, shortcut)}
+                  >
+                    {label}
+                  </MenuItem>
+                );
+              })}
+            </MenuSection>
+          );
+        })}
+      </Menu>
+    </MenuTrigger>
+  );
+}

package/src/editor/ui/SelectionBubble.tsx

@@ -0,0 +1,317 @@
+"use client";
+
+import { useEditorState, type Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import { useEffect, useRef, type ComponentType } from "react";
+import { Kbd } from "../../components/content/Kbd.js";
+import { Separator } from "../../components/content/Separator.js";
+import { Toolbar } from "../../components/actions/Toolbar.js";
+import { Tooltip, TooltipProvider } from "../../components/overlays/Tooltip.js";
+import { useMessages } from "../../i18n/useMessages.js";
+import type { IconProps } from "../../icons.js";
+import { buttonClasses } from "../../lib/button.js";
+import { cn } from "../../lib/cn.js";
+import { OVERLAY_LAYER } from "../../lib/overlay-layer.js";
+import type { CustomColorKind } from "../features/color/customColor.js";
+import {
+  BlockTypeMenu,
+  hasBlockTypeMenu,
+  hasListMenu,
+  ListMenu,
+  isMoreMarkId,
+  moreFormatTools,
+  MoreFormatMenu,
+} from "./FormatMenus.js";
+import { BUBBLE_ROW_MARKS } from "./rowMarks.js";
+import { showOverSelection, useOutOfTabOrder, useSelectionMenuOptions } from "./selectionMenu.js";
+import { ariaShortcut, findShortcutKeys, isApple, shortcutLabel } from "../core/shortcuts.js";
+import { projectRecords, type KitToolButton, type ToolList } from "../core/toolDescriptor.js";
+import { ToolButtonView, useToolLabel } from "./ToolButtonView.js";
+import { ColorMenuButton, HighlightMenuButton } from "./ColorMenus.js";
+import type { Tool } from "../core/tools.js";
+import { GLASS_INVERSE_CLASS } from "../styles/glass.js";
+
+/** Ключ плагина меню выделения: по нему его показывают командой (`Alt+F10`). */
+export const SELECTION_BUBBLE_KEY = "richTextSelectionBubble";
+
+/** «…» плашки без Меток её ряда (подчёркнутого): они здесь кнопками. */
+const BUBBLE_MORE_OMIT = BUBBLE_ROW_MARKS.map((mark) => mark.id).filter(isMoreMarkId);
+const BUBBLE_MORE_TOOLS = moreFormatTools(BUBBLE_MORE_OMIT);
+
+/**
+ * Места кнопок описаний в хвосте плашки — привилегия кита: ссылка, затем
+ * эмодзи. Кнопки описаний с флагом Меню выделения без места кита идут
+ * следом, в порядке списка Инструментов.
+ */
+const BUBBLE_TAIL_ORDER: readonly Tool[] = ["link", "emoji"];
+
+/**
+ * Инверсная поверхность плашки — переназначением моста `@theme` внутри неё.
+ *
+ * ПОЧЕМУ ТАК, А НЕ СВОИ КЛАССЫ НА КАЖДОЙ КНОПКЕ. В плашке стоят общие кнопки
+ * Редактора — меню «¶» и «…» (`FormatMenus.tsx`) и кнопка эмодзи, — и они
+ * красятся словарём кита: `text-fg-1`, `hover:bg-bg-2`, контур фокуса
+ * `outline-accent-strong`. Утилита читает переменную моста (`--color-fg-1`),
+ * а мост объявлен на корне и наследуется — значит, переобъявленный на плашке
+ * мост перекрашивает всех её потомков, а сами кнопки о плашке не знают.
+ * Свои классы пришлось бы протаскивать пропом в каждый общий компонент и
+ * бороться со специфичностью `hover:` плагина react-aria.
+ *
+ * ПОЧЕМУ МЕНЮ ОСТАЮТСЯ ОБЫЧНЫМИ. Списки меню, подсказки и поповеры (ссылка,
+ * эмодзи) рисуются в портале у `body`, вне плашки, и переназначения не видят:
+ * они на обычной поверхности поповера, как требует спека.
+ *
+ * Роли: текст и иконки — `--text-on-inverse`; наведение (`bg-2`) —
+ * `--surface-inverse-hover`; нажатие (`bg-3`, наведение на нажатую) и
+ * разделители — `--surface-inverse-pressed`; контур фокуса —
+ * `--accent-on-inverse`. Значения и пары контраста — ADR-0055,
+ * `scripts/contrast.mjs`.
+ */
+const INVERSE_SCOPE_CLASS =
+  "[--color-fg-0:var(--text-on-inverse)] [--color-fg-1:var(--text-on-inverse)] " +
+  "[--color-bg-2:var(--surface-inverse-hover)] [--color-bg-3:var(--surface-inverse-pressed)] " +
+  "[--color-line:var(--surface-inverse-pressed)] [--color-line-soft:var(--surface-inverse-pressed)] " +
+  "[--color-accent-strong:var(--accent-on-inverse)]";
+
+const BUTTON_CLASS = buttonClasses({ variant: "ghost", size: "sm", iconOnly: true });
+/** Нажатая метка — своя подложка инверсной поверхности, а не `soft` словаря. */
+const BUTTON_PRESSED_CLASS = cn(
+  BUTTON_CLASS,
+  "bg-surface-inverse-pressed hover:bg-surface-inverse-pressed"
+);
+const TOOL_BUTTON_CLASSES = { idle: BUTTON_CLASS, pressed: BUTTON_PRESSED_CLASS };
+
+export interface SelectionBubbleProps {
+  editor: Editor;
+  tools: ToolList;
+  /** Поле выключено: кнопки видны, но не нажимаются. */
+  disabled: boolean;
+  /**
+   * Пункт «Свой цвет…» поповера «Цвет»: поповер `ColorPicker` держит
+   * Редактор, как у Панели, — плашка прячется, когда фокус уходит в него.
+   */
+  onCustomColor?: (kind: CustomColorKind) => void;
+  /**
+   * Ведёт ли сюда `Alt+F10`. В режиме `toolbar="bubble"` — да; поверх
+   * фиксированной Панели сочетание ведёт в Панель, и плашка его не объявляет:
+   * два `aria-keyshortcuts` на одно сочетание — ложь для скринридера.
+   */
+  keyboardTarget?: boolean;
+  /** Область Документа, которая прокручивается сама (ADR-0059); без неё — окно. */
+  scrollTarget?: HTMLElement;
+}
+
+/**
+ * Меню выделения — `toolbar="bubble"`: компактная плашка на
+ * инверсной поверхности над непустым выделением.
+ *
+ * СОСТАВ ЗАДАН КИТОМ: «¶» · Списки ▾ | жирный · курсив · подчёркнутый · Цвет ▾ ·
+ * «…» | ссылка · эмодзи. «Цвет» — обе сетки, текста и маркера;
+ * отдельного «Маркера» здесь нет — он на Панели (без инструмента `color` — есть).
+ * Кнопка выключенного инструмента не рисуется, порядок от `tools` не зависит. Ссылка и эмодзи — кнопки описаний с флагом Меню выделения
+ * (`toolDescriptor.ts`): те же, что на Панели. Справочника сочетаний, отмены и
+ * повтора нет: плашка — про выделенный текст, а не про Документ.
+ *
+ * ПОКАЗ И ПОЗИЦИЯ — те же, что у плавающей Панели (`selectionMenu.ts`):
+ * `BubbleMenu` Tiptap показывает плашку после того, как выделение устоялось,
+ * прячет на пустом выделении, на картинке и без фокуса в Редакторе и вынимает
+ * узел из DOM, когда прячет. Слой — `OVERLAY_LAYER.popover`; в стеке Escape
+ * плашка не участвует, Escape в открытом из неё меню закрывает только меню.
+ *
+ * КЛАВИАТУРА — `Toolbar` кита: `Alt+F10` из Документа, стрелки, Home и End,
+ * действие возвращает фокус в Документ на то же выделение.
+ */
+export function SelectionBubble({
+  editor,
+  tools,
+  disabled,
+  onCustomColor,
+  keyboardTarget = true,
+  scrollTarget,
+}: SelectionBubbleProps) {
+  const options = useSelectionMenuOptions(scrollTarget);
+  const messages = useMessages().editor;
+  const label = useToolLabel();
+  const apple = isApple();
+  const ref = useRef<HTMLDivElement>(null);
+  useOutOfTabOrder(ref, editor);
+
+  const marks = BUBBLE_ROW_MARKS.filter((mark) => tools.has(mark.tool));
+  const hasMore = BUBBLE_MORE_TOOLS.some((tool) => tools.has(tool));
+  /*
+    Цвет — одна кнопка «Цвет» с обеими сетками (решение владельца):
+    на Панели — «Маркер», здесь — «Цвет», без дублей. Без инструмента `color`
+    кнопки «Цвет» нет, и маркер ставит «Маркер» — иначе в плашке его не поставить.
+  */
+  const hasColor = tools.has("color");
+  const hasHighlight = !hasColor && tools.has("highlight");
+  const hasBlockType = hasBlockTypeMenu(tools);
+  // «Списки ▾» — сразу за «¶», как на Панели: из «¶» списки ушли.
+  const hasLists = hasListMenu(tools);
+  // Хвост — кнопки описаний с флагом Меню выделения: проекция списка.
+  const tail = projectRecords<KitToolButton>(
+    tools,
+    BUBBLE_TAIL_ORDER,
+    () => undefined,
+    (descriptor) => descriptor.buttons?.filter((button) => button.selectionMenu)
+  );
+
+  // `aria-keyshortcuts` — путь в плашку из Документа; `Toolbar` react-aria
+  // атрибут в DOM не пропускает, поэтому — на узел, как у Панели.
+  const toolbarRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (keyboardTarget) toolbarRef.current?.setAttribute("aria-keyshortcuts", "Alt+F10");
+    else toolbarRef.current?.removeAttribute("aria-keyshortcuts");
+  });
+
+  const state = useEditorState({
+    editor,
+    selector: ({ editor: current }) => {
+      const flags: Record<string, { active: boolean; can: boolean; visible?: boolean }> = {};
+      for (const mark of marks) {
+        flags[mark.id] = {
+          active: mark.isActive(current),
+          can: current.isEditable && mark.can(current),
+        };
+      }
+      for (const button of tail) {
+        flags[button.id] = {
+          active: button.isActive?.(current) ?? false,
+          can: current.isEditable && button.can(current),
+          visible: button.isVisible?.(current) ?? true,
+        };
+      }
+      return { flags, editable: current.isEditable };
+    },
+  });
+  const off = disabled || !state.editable;
+  const shortcut = (keys: readonly string[]) => shortcutLabel(keys, apple);
+
+  const toggle = (
+    id: string,
+    label: string,
+    Icon: ComponentType<IconProps>,
+    pressed: boolean,
+    available: boolean,
+    run: () => void
+  ) => {
+    const keys = findShortcutKeys(id);
+    return (
+      <Tooltip
+        key={id}
+        content={
+          <span className="flex items-center gap-2">
+            {label}
+            {keys && <Kbd aria-hidden="true">{shortcut(keys)}</Kbd>}
+          </span>
+        }
+      >
+        <button
+          type="button"
+          aria-label={label}
+          aria-pressed={pressed}
+          // Недоступное действие — `aria-disabled`, как на Панели: кнопка
+          // остаётся в обходе стрелками и не пропадает молча.
+          aria-disabled={!available || undefined}
+          aria-keyshortcuts={keys ? ariaShortcut(keys, apple) : undefined}
+          disabled={disabled}
+          onClick={() => {
+            if (available) run();
+          }}
+          className={pressed ? BUTTON_PRESSED_CLASS : BUTTON_CLASS}
+        >
+          <Icon size={16} aria-hidden />
+        </button>
+      </Tooltip>
+    );
+  };
+
+  const shownTail = tail.filter((button) => state.flags[button.id]?.visible !== false);
+  const hasMarks = marks.length > 0 || hasHighlight || hasColor || hasMore;
+  const hasTail = shownTail.length > 0;
+  // Ни одной кнопки — нет и плашки: пустая тёмная полоса над выделением
+  // (`tools={["history", "table"]}` при Панели сверху) ничего не даёт.
+  if (!hasBlockType && !hasLists && !hasMarks && !hasTail) return null;
+
+  return (
+    <BubbleMenu
+      ref={ref}
+      editor={editor}
+      pluginKey={SELECTION_BUBBLE_KEY}
+      shouldShow={showOverSelection}
+      options={options}
+      className={cn(
+        OVERLAY_LAYER.popover,
+        INVERSE_SCOPE_CLASS,
+        GLASS_INVERSE_CLASS,
+        "text-text-on-inverse shadow-2 rounded-md p-1",
+        // Узкий экран: плашка переносится на вторую строку, а не уезжает за край.
+        "max-w-[calc(100vw-1rem)]"
+      )}
+    >
+      <TooltipProvider>
+        <Toolbar ref={toolbarRef} aria-label={messages.selectionToolbar} className="gap-0.5">
+          {(hasBlockType || hasLists) && (
+            <>
+              {hasBlockType && (
+                <BlockTypeMenu editor={editor} tools={tools} disabled={off} shortcut={shortcut} />
+              )}
+              {hasLists && (
+                <ListMenu editor={editor} tools={tools} disabled={off} shortcut={shortcut} />
+              )}
+              {(hasMarks || hasTail) && <Separator />}
+            </>
+          )}
+          {marks.map((mark) =>
+            toggle(
+              mark.id,
+              mark.label(messages),
+              mark.icon,
+              state.flags[mark.id]?.active ?? false,
+              state.flags[mark.id]?.can ?? false,
+              () => mark.run(editor)
+            )
+          )}
+          {hasHighlight && (
+            <HighlightMenuButton editor={editor} tools={tools} disabled={off} shortcut={shortcut} />
+          )}
+          {hasColor && (
+            <ColorMenuButton
+              editor={editor}
+              tools={tools}
+              disabled={off}
+              shortcut={shortcut}
+              onCustomColor={onCustomColor}
+            />
+          )}
+          {hasMore && (
+            // То же меню «…», что на Панели, без подчёркнутого: он здесь в ряду.
+            // Пункт «Блок кода» — и здесь: кнопки Блока кода у плашки
+            // не было, а выделенные строки в Блок кода превращают как раз отсюда,
+            // как тип Блока — из «¶» той же плашки.
+            <MoreFormatMenu
+              editor={editor}
+              tools={tools}
+              disabled={off}
+              shortcut={shortcut}
+              omit={BUBBLE_MORE_OMIT}
+            />
+          )}
+          {hasMarks && hasTail && <Separator />}
+          {shownTail.map((button) => (
+            <ToolButtonView
+              key={button.id}
+              editor={editor}
+              button={button}
+              label={label(button.label)}
+              pressed={state.flags[button.id]?.active ?? false}
+              unavailable={!(state.flags[button.id]?.can ?? false)}
+              disabled={off}
+              classes={TOOL_BUTTON_CLASSES}
+            />
+          ))}
+        </Toolbar>
+      </TooltipProvider>
+    </BubbleMenu>
+  );
+}

package/src/editor/ui/ShortcutsButton.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Kbd } from "../../components/content/Kbd.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/overlays/Popover.js";
+import { Tooltip } from "../../components/overlays/Tooltip.js";
+import { useMessages, useUiLocale } from "../../i18n/useMessages.js";
+import { KeyboardIcon } from "../../icons.js";
+import { buttonClasses } from "../../lib/button.js";
+import { cn } from "../../lib/cn.js";
+import { TOUCH_HIDDEN_CLASS } from "../../lib/touch.js";
+import { FOCUS_TARGET } from "./focusWithin.js";
+import { isApple, shortcutGroupsFor, shortcutLabel } from "../core/shortcuts.js";
+import type { ToolList } from "../core/toolDescriptor.js";
+import { GLASS_PANEL_CLASS } from "../styles/glass.js";
+
+export interface ShortcutsButtonProps {
+  tools: ToolList;
+  /** Поле выключено: кнопка видна, но не нажимается — как остальные на Панели. */
+  disabled: boolean;
+}
+
+const CLOSED_CLASS = buttonClasses({ variant: "ghost", size: "sm", iconOnly: true });
+const OPEN_CLASS = buttonClasses({ variant: "ghost", size: "sm", iconOnly: true, selected: true });
+
+/**
+ * Справочник сочетаний клавиш: кнопка с клавиатурой у правого края
+ * Панели открывает список «команда — сочетание» только для чтения.
+ *
+ * СОСТАВ — ИЗ ОБЩЕЙ ТАБЛИЦЫ (`shortcuts.ts`), той же, что подписывает кнопки
+ * Панели: строка есть только у команды включённого инструмента, а подпись
+ * сочетания — `⌘+⌥+⇧` на Apple и `Ctrl+Alt+Shift` у остальных. Справочник сам
+ * ничего не назначает и не нажимается: это не палитра команд.
+ *
+ * РАЗМЕТКА — ТАБЛИЦА. Скринридер читает пару «команда — сочетание» как строку с
+ * заголовками столбцов, а не как два несвязанных списка; сочетание — `Kbd`
+ * кита, то есть `<kbd>`.
+ *
+ * `Popover` КИТА: Radix ведёт стек слоёв, и Escape внутри окна закрывает
+ * справочник, а не окно вокруг Редактора (так же, как поповер ссылки, ADR-0041).
+ *
+ * ФОКУС. Закрытие возвращает фокус на кнопку — и Escape, и щелчок мимо. Оговорка
+ * для щелчка: если он сам поставил фокус на что-то, с чем работают (в документ,
+ * в соседнее поле, на кнопку), его не отбирают; на кнопку фокус вернётся, когда
+ * щелчок пришёл в пустое место и фокус остался на теле страницы или на окне.
+ */
+export function ShortcutsButton({ tools, disabled }: ShortcutsButtonProps) {
+  const messages = useMessages().editor;
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <Tooltip content={messages.shortcuts}>
+        <PopoverTrigger asChild>
+          <button
+            ref={buttonRef}
+            type="button"
+            aria-label={messages.shortcuts}
+            disabled={disabled}
+            // На телефоне сочетаний нет — нет и справочника.
+            // К правому краю Панели кнопку прижимает её группа (`EditorToolbar`).
+            className={cn(open ? OPEN_CLASS : CLOSED_CLASS, TOUCH_HIDDEN_CLASS)}
+          >
+            <KeyboardIcon size={16} aria-hidden />
+          </button>
+        </PopoverTrigger>
+      </Tooltip>
+      <PopoverContent
+        align="end"
+        aria-label={messages.shortcuts}
+        // Ширина — по самой длинной строке: фиксированные 384px
+        // оставляли пустое поле между командой и сочетанием.
+        className={cn(
+          GLASS_PANEL_CLASS,
+          "max-h-[min(32rem,var(--radix-popover-content-available-height))] w-max max-w-[calc(100vw-2rem)] overflow-y-auto p-3"
+        )}
+        onCloseAutoFocus={(event) => {
+          // Radix после щелчка мимо фокус не возвращает вовсе. Здесь он
+          // возвращается, если щелчок сам не поставил его на что-то, с чем
+          // работают: на тело страницы или на контейнер окна фокус попадает от
+          // щелчка в пустое место.
+          event.preventDefault();
+          const active = document.activeElement;
+          if (!active || !active.matches(FOCUS_TARGET)) buttonRef.current?.focus();
+        }}
+      >
+        {open && <ShortcutsTable tools={tools} />}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ShortcutsTable({ tools }: { tools: ToolList }) {
+  const messages = useMessages().editor;
+  const apple = isApple();
+  const groups = shortcutGroupsFor(tools, useUiLocale());
+
+  return (
+    <table className="w-full border-collapse text-sm">
+      <caption className="sr-only">{messages.shortcuts}</caption>
+      <thead>
+        <tr className="text-fg-2 text-left text-xs">
+          <th scope="col" className="pr-3 pb-2 font-medium">
+            {messages.shortcutsCommand}
+          </th>
+          <th scope="col" className="pb-2 text-right font-medium">
+            {messages.shortcutsKeys}
+          </th>
+        </tr>
+      </thead>
+      {groups.map(({ group, commands }, index) => (
+        <tbody key={group} className={cn(index > 0 && "border-line-soft border-t")}>
+          {commands.map((command) => (
+            <tr key={command.id}>
+              <th scope="row" className="text-fg-0 py-1 pr-3 text-left font-normal">
+                {command.label(messages)}
+              </th>
+              <td className="py-1 text-right whitespace-nowrap">
+                <Kbd size="md">{shortcutLabel(command.keys, apple)}</Kbd>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      ))}
+    </table>
+  );
+}