@olddevs/ui 0.0.0-stage → 4.0.0

package/src/editor/features/emoji/emojiTool.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { TextSelection } from "@tiptap/pm/state";
+import type { Editor } from "@tiptap/react";
+import { EmojiIcon } from "../../../icons.js";
+import { EmojiGrid } from "./EmojiGrid.js";
+import type { ToolDescriptor } from "../../core/toolDescriptor.js";
+
+/**
+ * Вставить эмодзи обычным текстом: в конец выделения, не заменяя его, и каретка
+ * сразу за эмодзи.
+ *
+ * ПОЧЕМУ ПОСЛЕ ВЫДЕЛЕНИЯ, А НЕ ВМЕСТО. Эмодзи — не замена слова, а добавка к
+ * нему; стереть выделенный абзац ради смайла на его краю — потеря, которую
+ * человек заметит последним. Так решено владельцем.
+ *
+ * ОДНА ТРАНЗАКЦИЯ — одна правка на отмену. Она же проходит через `maxLength`:
+ * фильтр транзакций отвергает вставку, уводящую документ за предел, целиком —
+ * эмодзи не бывает «наполовину», и выделение остаётся на месте.
+ *
+ * Метки берутся у каретки (`insertText` без заданных меток): эмодзи в
+ * жирном тексте жирный, как набранная буква. Вставка возможна, только когда
+ * конец выделения лежит в тексте: у выделенной картинки или строки таблицы
+ * текста нет, и `false` говорит об этом вызывающему.
+ */
+export function insertEmoji(editor: Editor, char: string): boolean {
+  if (!editor.isEditable) return false;
+  const { state, view } = editor;
+  const { $to } = state.selection;
+  if (!$to.parent.inlineContent) return false;
+  const tr = state.tr.insertText(char, $to.pos);
+  tr.setSelection(TextSelection.create(tr.doc, $to.pos + char.length));
+  view.dispatch(tr.scrollIntoView());
+  return true;
+}
+
+/**
+ * Эмодзи на описании Инструмента (ADR-0058, п. 10.4) — проверка
+ * кнопки с поповером на той же форме, что у своего Инструмента. Своей Схемы и
+ * Части для движка нет: эмодзи — обычный текст.
+ *
+ * Поповер — сетка `EmojiGrid` в рамке кита у кнопки. Выбор вставляет эмодзи и
+ * закрывает поповер; фокус возвращается в Документ, а не на кнопку: человек
+ * пришёл поставить смайл в текст и продолжает писать. Недоступна кнопка,
+ * когда вставлять некуда — выделена картинка или ячейки таблицы.
+ */
+export const EMOJI_TOOL: ToolDescriptor = {
+  name: "emoji",
+  buttons: [
+    {
+      id: "emoji",
+      label: ({ messages }) => messages.emoji,
+      icon: EmojiIcon,
+      can: (editor) => editor.state.selection.$to.parent.inlineContent,
+      selectionMenu: true,
+      popover: ({ editor, close }) => (
+        <EmojiGrid
+          onPick={(emoji) => {
+            insertEmoji(editor, emoji.char);
+            close();
+          }}
+          autoFocus={false}
+        />
+      ),
+    },
+  ],
+};

package/src/editor/features/image/ImagePopover.tsx

@@ -0,0 +1,254 @@
+"use client";
+
+import { posToDOMRect, type Editor } from "@tiptap/react";
+import { useId, useRef, useState, type KeyboardEvent } from "react";
+import { Button } from "../../../components/actions/Button.js";
+import { FormField } from "../../../components/inputs/FormField.js";
+import { Popover, PopoverAnchor, PopoverContent } from "../../../components/overlays/Popover.js";
+import { TextControl } from "../../../components/inputs/TextControl.js";
+import { useMessages } from "../../../i18n/useMessages.js";
+import { UploadIcon } from "../../../icons.js";
+import { buttonClasses } from "../../../lib/button.js";
+import { cn } from "../../../lib/cn.js";
+import {
+  IMAGE_WIDTHS,
+  normalizeImageInput,
+  selectedImage,
+  type ImageAttributes,
+  type ImageWidth,
+} from "./image.js";
+import { GLASS_PANEL_CLASS } from "../../styles/glass.js";
+
+export interface ImagePopoverProps {
+  editor: Editor;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Есть загрузчик (`onUploadImage`) — в поповере появляется выбор файла. */
+  canUpload: boolean;
+}
+
+/**
+ * Поповер картинки: адрес, альтернативный текст и — у существующей картинки —
+ * ширина. Открывают кнопка «Картинка» Панели, пункт Меню вставки и
+ * «Изменить картинку» на панели выделенной картинки.
+ *
+ * ДВА РЕЖИМА ПО ВЫДЕЛЕНИЮ В МОМЕНТ ОТКРЫТИЯ. Выделена картинка (или каретка в
+ * её подписи) — поповер правит её: адрес, описание, пресет ширины и «Убрать».
+ * Иначе — вставляет новую на место каретки. Так одна кнопка Панели не
+ * вставляет вторую картинку поверх выделенной.
+ *
+ * Устроен как поповер ссылки (`LinkPopover`): `Popover` кита в стеке слоёв
+ * Radix (Escape внутри `Dialog` закрывает только поповер, ADR-0041), якорь —
+ * выделение, закрытие с клавиатуры возвращает фокус в документ.
+ *
+ * ШИРИНА С КЛАВИАТУРЫ — ЗДЕСЬ. Ручки у картинки только для мыши; три
+ * кнопки-переключателя дают те же пресеты 50/75/100 % с `aria-pressed`.
+ * Нажатый пресет повторным нажатием снимается — картинка возвращается к
+ * своему размеру.
+ */
+export function ImagePopover({ editor, open, onOpenChange, canUpload }: ImagePopoverProps) {
+  const messages = useMessages().editor;
+  /*
+    Якорь — выделенная картинка целиком, а без неё — выделение текста.
+    Меряется при каждом пересчёте позиции: поповер едет вместе с документом.
+  */
+  const anchorRef = useRef({
+    getBoundingClientRect: () => {
+      const found = selectedImage(editor.state);
+      const dom = found ? editor.view.nodeDOM(found.pos) : null;
+      if (dom instanceof HTMLElement) return dom.getBoundingClientRect();
+      const { from, to } = editor.state.selection;
+      return posToDOMRect(editor.view, from, to);
+    },
+  });
+  const interactedOutside = useRef(false);
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverAnchor virtualRef={anchorRef} />
+      <PopoverContent
+        aria-label={messages.image}
+        className={cn(GLASS_PANEL_CLASS, "w-80 p-3")}
+        onOpenAutoFocus={() => {
+          interactedOutside.current = false;
+        }}
+        onInteractOutside={() => {
+          interactedOutside.current = true;
+        }}
+        onCloseAutoFocus={(event) => {
+          // Как у поповера ссылки: своего триггера нет, фокус — в документ.
+          event.preventDefault();
+          if (!interactedOutside.current && !editor.isDestroyed) editor.commands.focus();
+        }}
+      >
+        {/* Монтируется на каждое открытие: режим и поля — по выделению в этот момент. */}
+        <ImageForm editor={editor} canUpload={canUpload} onDone={() => onOpenChange(false)} />
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function ImageForm({
+  editor,
+  canUpload,
+  onDone,
+}: {
+  editor: Editor;
+  canUpload: boolean;
+  onDone: () => void;
+}) {
+  const messages = useMessages().editor;
+  const addressId = useId();
+  const altId = useId();
+  const widthLabelId = useId();
+  const fileRef = useRef<HTMLInputElement>(null);
+  const [existing] = useState(() => {
+    const found = selectedImage(editor.state);
+    return found ? (found.node.attrs as ImageAttributes) : null;
+  });
+  const [address, setAddress] = useState(existing?.src ?? "");
+  const [alt, setAlt] = useState(existing?.alt ?? "");
+  const [width, setWidth] = useState<ImageWidth | null>(existing?.width ?? null);
+  const [invalid, setInvalid] = useState(false);
+
+  const apply = () => {
+    const src = normalizeImageInput(address);
+    if (!src) {
+      setInvalid(true);
+      return;
+    }
+    if (existing) editor.chain().updateImage({ src, alt: alt.trim(), width }).run();
+    else editor.chain().insertImage({ src, alt: alt.trim() }).run();
+    onDone();
+  };
+
+  const remove = () => {
+    editor.chain().removeImage().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"` — как у поповера ссылки: он рисуется вне раскладки формы. */}
+      <FormField
+        label={messages.imageAddress}
+        htmlFor={addressId}
+        error={invalid ? messages.imageInvalid : undefined}
+        layout="stack"
+      >
+        <TextControl
+          id={addressId}
+          size="sm"
+          type="text"
+          inputMode="url"
+          autoComplete="off"
+          spellCheck={false}
+          placeholder="https://"
+          value={address}
+          onChange={(event) => {
+            setAddress(event.target.value);
+            setInvalid(false);
+          }}
+          onKeyDown={onKeyDown}
+        />
+      </FormField>
+      <FormField
+        label={messages.imageAlt}
+        htmlFor={altId}
+        hint={messages.imageAltHint}
+        layout="stack"
+      >
+        <TextControl
+          id={altId}
+          size="sm"
+          type="text"
+          autoComplete="off"
+          value={alt}
+          onChange={(event) => setAlt(event.target.value)}
+          onKeyDown={onKeyDown}
+        />
+      </FormField>
+      {existing && (
+        <div className="flex flex-col gap-1.5">
+          <span id={widthLabelId} className="text-fg-2 text-xs font-medium">
+            {messages.imageWidth}
+          </span>
+          <div role="group" aria-labelledby={widthLabelId} className="flex gap-1">
+            {IMAGE_WIDTHS.map((preset) => (
+              <button
+                key={preset}
+                type="button"
+                aria-pressed={width === preset}
+                onClick={() => setWidth((current) => (current === preset ? null : preset))}
+                className={buttonClasses({
+                  variant: "outline",
+                  size: "sm",
+                  selected: width === preset,
+                })}
+              >
+                {messages.imageWidthPreset({ percent: Number(preset) })}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+      <div
+        className={cn(
+          "flex items-center gap-2",
+          canUpload && !existing ? "justify-between" : "justify-end"
+        )}
+      >
+        {canUpload && !existing && (
+          <>
+            {/*
+              Поле файла спрятано, но живо: кнопка рядом открывает системный
+              выбор файла его же щелчком. Своя кнопка вместо поля — потому что
+              вид поля файла браузер рисует сам и не переводит.
+            */}
+            <input
+              ref={fileRef}
+              type="file"
+              accept="image/*"
+              multiple
+              tabIndex={-1}
+              aria-hidden="true"
+              className="sr-only"
+              onChange={(event) => {
+                const files = Array.from(event.target.files ?? []);
+                if (files.length === 0) return;
+                onDone();
+                editor.commands.uploadImages(files);
+              }}
+            />
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              icon={<UploadIcon size={14} aria-hidden />}
+              onClick={() => fileRef.current?.click()}
+            >
+              {messages.imageChooseFile}
+            </Button>
+          </>
+        )}
+        <div className="flex gap-2">
+          {existing && (
+            <Button type="button" size="sm" variant="ghost" tone="danger" onClick={remove}>
+              {messages.imageRemove}
+            </Button>
+          )}
+          <Button type="button" size="sm" variant="solid" tone="accent" onClick={apply}>
+            {existing ? messages.imageApply : messages.imageInsert}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/editor/features/image/ImageToolbar.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { useEditorState, type Editor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import type { NodeSelection } from "@tiptap/pm/state";
+import { useEffect, useMemo, useRef } from "react";
+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 { DeleteIcon, EditIcon } from "../../../icons.js";
+import { buttonClasses } from "../../../lib/button.js";
+import { cn } from "../../../lib/cn.js";
+import { OVERLAY_LAYER } from "../../../lib/overlay-layer.js";
+import { IMAGE_WIDTHS, isImageSelection, type ImageWidth } from "./image.js";
+import { focusWithin } from "../../ui/focusWithin.js";
+import { GLASS_PANEL_CLASS } from "../../styles/glass.js";
+
+/** Ключ плагина панели картинки — отдельный от плавающей Панели форматирования. */
+export const IMAGE_TOOLBAR_KEY = "richTextImageToolbar";
+
+const IMAGE_TOOLBAR_OPTIONS = {
+  placement: "top",
+  offset: 8,
+  flip: true,
+  shift: { padding: 8 },
+} as const;
+
+const ICON_BUTTON = buttonClasses({ variant: "ghost", size: "sm", iconOnly: true });
+
+/**
+ * Панель выделенной картинки: пресеты ширины, «Изменить» (поповер с адресом и
+ * описанием) и «Убрать». Появляется над картинкой, выделенной щелчком или
+ * стрелками, — как плавающая Панель над текстом, тем же `BubbleMenu`.
+ *
+ * Это путь мыши и быстрых правок. С клавиатуры в неё ведёт тот же `Alt+F10`,
+ * что и в Панель форматирования: на выделенной картинке он выбирает её
+ * панель. Ширина с клавиатуры есть и в поповере картинки.
+ *
+ * `role="toolbar"` кита — одна остановка Tab, стрелки, Home и End. Пресеты —
+ * кнопки-переключатели с `aria-pressed`; нажатый повторным нажатием снимается,
+ * и картинка возвращается к своему размеру. Действие оставляет картинку
+ * выделенной: следующий пресет жмётся сразу.
+ */
+export function ImageToolbar({
+  editor,
+  disabled,
+  onEdit,
+  scrollTarget,
+}: {
+  editor: Editor;
+  disabled: boolean;
+  onEdit: () => void;
+  /** Область Документа, которая прокручивается сама (ADR-0059); без неё — окно. */
+  scrollTarget?: HTMLElement;
+}) {
+  const messages = useMessages().editor;
+  const ref = useRef<HTMLDivElement>(null);
+  const options = useMemo(
+    () => ({ ...IMAGE_TOOLBAR_OPTIONS, ...(scrollTarget && { scrollTarget }) }),
+    [scrollTarget]
+  );
+
+  // Лишняя остановка Tab у узла плагина — та же причина, что у `FloatingToolbar`.
+  useEffect(() => {
+    ref.current?.setAttribute("tabindex", "-1");
+  }, [editor]);
+
+  const width = useEditorState({
+    editor,
+    selector: ({ editor: current }) =>
+      isImageSelection(current.state.selection)
+        ? ((current.state.selection as NodeSelection).node.attrs.width as ImageWidth | null)
+        : null,
+  });
+
+  const setWidth = (preset: ImageWidth) =>
+    editor
+      .chain()
+      .focus()
+      .updateImage({ width: width === preset ? null : preset })
+      .run();
+
+  return (
+    <BubbleMenu
+      ref={ref}
+      editor={editor}
+      pluginKey={IMAGE_TOOLBAR_KEY}
+      data-image-toolbar=""
+      shouldShow={({ editor: current, state, view, element }) =>
+        current.isEditable && isImageSelection(state.selection) && focusWithin(view, element)
+      }
+      options={options}
+      className={cn(
+        OVERLAY_LAYER.popover,
+        GLASS_PANEL_CLASS,
+        "border-line-soft shadow-2 rounded-md border px-1.5 py-1"
+      )}
+    >
+      <TooltipProvider>
+        <Toolbar aria-label={messages.image} className="gap-0.5">
+          <div role="group" aria-label={messages.imageWidth} className="flex gap-0.5">
+            {IMAGE_WIDTHS.map((preset) => (
+              <button
+                key={preset}
+                type="button"
+                aria-pressed={width === preset}
+                disabled={disabled}
+                onClick={() => setWidth(preset)}
+                className={buttonClasses({
+                  variant: "ghost",
+                  size: "sm",
+                  selected: width === preset,
+                })}
+              >
+                {messages.imageWidthPreset({ percent: Number(preset) })}
+              </button>
+            ))}
+          </div>
+          <Separator />
+          <Tooltip content={messages.imageEdit}>
+            <button
+              type="button"
+              aria-label={messages.imageEdit}
+              disabled={disabled}
+              onClick={onEdit}
+              className={ICON_BUTTON}
+            >
+              <EditIcon size={16} aria-hidden />
+            </button>
+          </Tooltip>
+          <Tooltip content={messages.imageRemove}>
+            <button
+              type="button"
+              aria-label={messages.imageRemove}
+              disabled={disabled}
+              onClick={() => editor.chain().focus().removeImage().run()}
+              className={ICON_BUTTON}
+            >
+              <DeleteIcon size={16} aria-hidden />
+            </button>
+          </Tooltip>
+        </Toolbar>
+      </TooltipProvider>
+    </BubbleMenu>
+  );
+}