@olddevs/ui 0.0.0-stage → 4.0.0

package/dist/editor/features/image/ImagePopover.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { posToDOMRect } from "@tiptap/react";
+import { useId, useRef, useState } 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, } from "./image.js";
+import { GLASS_PANEL_CLASS } from "../../styles/glass.js";
+export function ImagePopover({ editor, open, onOpenChange, canUpload }) {
+    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 (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverAnchor, { virtualRef: anchorRef }), _jsx(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();
+                }, children: _jsx(ImageForm, { editor: editor, canUpload: canUpload, onDone: () => onOpenChange(false) }) })] }));
+}
+function ImageForm({ editor, canUpload, onDone, }) {
+    const messages = useMessages().editor;
+    const addressId = useId();
+    const altId = useId();
+    const widthLabelId = useId();
+    const fileRef = useRef(null);
+    const [existing] = useState(() => {
+        const found = selectedImage(editor.state);
+        return found ? found.node.attrs : null;
+    });
+    const [address, setAddress] = useState(existing?.src ?? "");
+    const [alt, setAlt] = useState(existing?.alt ?? "");
+    const [width, setWidth] = useState(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) => {
+        if (event.key !== "Enter" || event.nativeEvent.isComposing)
+            return;
+        event.preventDefault();
+        apply();
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(FormField, { label: messages.imageAddress, htmlFor: addressId, error: invalid ? messages.imageInvalid : undefined, layout: "stack", children: _jsx(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 }) }), _jsx(FormField, { label: messages.imageAlt, htmlFor: altId, hint: messages.imageAltHint, layout: "stack", children: _jsx(TextControl, { id: altId, size: "sm", type: "text", autoComplete: "off", value: alt, onChange: (event) => setAlt(event.target.value), onKeyDown: onKeyDown }) }), existing && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { id: widthLabelId, className: "text-fg-2 text-xs font-medium", children: messages.imageWidth }), _jsx("div", { role: "group", "aria-labelledby": widthLabelId, className: "flex gap-1", children: IMAGE_WIDTHS.map((preset) => (_jsx("button", { type: "button", "aria-pressed": width === preset, onClick: () => setWidth((current) => (current === preset ? null : preset)), className: buttonClasses({
+                                variant: "outline",
+                                size: "sm",
+                                selected: width === preset,
+                            }), children: messages.imageWidthPreset({ percent: Number(preset) }) }, preset))) })] })), _jsxs("div", { className: cn("flex items-center gap-2", canUpload && !existing ? "justify-between" : "justify-end"), children: [canUpload && !existing && (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", accept: "image/*", multiple: true, 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);
+                                } }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", icon: _jsx(UploadIcon, { size: 14, "aria-hidden": true }), onClick: () => fileRef.current?.click(), children: messages.imageChooseFile })] })), _jsxs("div", { className: "flex gap-2", children: [existing && (_jsx(Button, { type: "button", size: "sm", variant: "ghost", tone: "danger", onClick: remove, children: messages.imageRemove })), _jsx(Button, { type: "button", size: "sm", variant: "solid", tone: "accent", onClick: apply, children: existing ? messages.imageApply : messages.imageInsert })] })] })] }));
+}
+//# sourceMappingURL=ImagePopover.js.map

package/dist/editor/features/image/ImagePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePopover.js","sourceRoot":"","sources":["../../../../src/editor/features/image/ImagePopover.tsx"],"names":[],"mappings":"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"}

package/dist/editor/features/image/ImageToolbar.d.ts

@@ -0,0 +1,25 @@
+import { type Editor } from "@tiptap/react";
+/** Ключ плагина панели картинки — отдельный от плавающей Панели форматирования. */
+export declare const IMAGE_TOOLBAR_KEY = "richTextImageToolbar";
+/**
+ * Панель выделенной картинки: пресеты ширины, «Изменить» (поповер с адресом и
+ * описанием) и «Убрать». Появляется над картинкой, выделенной щелчком или
+ * стрелками, — как плавающая Панель над текстом, тем же `BubbleMenu`.
+ *
+ * Это путь мыши и быстрых правок. С клавиатуры в неё ведёт тот же `Alt+F10`,
+ * что и в Панель форматирования: на выделенной картинке он выбирает её
+ * панель. Ширина с клавиатуры есть и в поповере картинки.
+ *
+ * `role="toolbar"` кита — одна остановка Tab, стрелки, Home и End. Пресеты —
+ * кнопки-переключатели с `aria-pressed`; нажатый повторным нажатием снимается,
+ * и картинка возвращается к своему размеру. Действие оставляет картинку
+ * выделенной: следующий пресет жмётся сразу.
+ */
+export declare function ImageToolbar({ editor, disabled, onEdit, scrollTarget, }: {
+    editor: Editor;
+    disabled: boolean;
+    onEdit: () => void;
+    /** Область Документа, которая прокручивается сама (ADR-0059); без неё — окно. */
+    scrollTarget?: HTMLElement;
+}): import("react").JSX.Element;
+//# sourceMappingURL=ImageToolbar.d.ts.map

package/dist/editor/features/image/ImageToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageToolbar.d.ts","sourceRoot":"","sources":["../../../../src/editor/features/image/ImageToolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,KAAK,MAAM,EAAE,MAAM,eAAe,CAAC;AAgB5D,mFAAmF;AACnF,eAAO,MAAM,iBAAiB,yBAAyB,CAAC;AAWxD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,QAAQ,EACR,MAAM,EACN,YAAY,GACb,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,iFAAiF;IACjF,YAAY,CAAC,EAAE,WAAW,CAAC;CAC5B,+BA2FA"}

package/dist/editor/features/image/ImageToolbar.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorState } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+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 } 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 },
+};
+const ICON_BUTTON = buttonClasses({ variant: "ghost", size: "sm", iconOnly: true });
+export function ImageToolbar({ editor, disabled, onEdit, scrollTarget, }) {
+    const messages = useMessages().editor;
+    const ref = useRef(null);
+    const options = useMemo(() => ({ ...IMAGE_TOOLBAR_OPTIONS, ...(scrollTarget && { scrollTarget }) }), [scrollTarget]);
+    useEffect(() => {
+        ref.current?.setAttribute("tabindex", "-1");
+    }, [editor]);
+    const width = useEditorState({
+        editor,
+        selector: ({ editor: current }) => isImageSelection(current.state.selection)
+            ? current.state.selection.node.attrs.width
+            : null,
+    });
+    const setWidth = (preset) => editor
+        .chain()
+        .focus()
+        .updateImage({ width: width === preset ? null : preset })
+        .run();
+    return (_jsx(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"), children: _jsx(TooltipProvider, { children: _jsxs(Toolbar, { "aria-label": messages.image, className: "gap-0.5", children: [_jsx("div", { role: "group", "aria-label": messages.imageWidth, className: "flex gap-0.5", children: IMAGE_WIDTHS.map((preset) => (_jsx("button", { type: "button", "aria-pressed": width === preset, disabled: disabled, onClick: () => setWidth(preset), className: buttonClasses({
+                                variant: "ghost",
+                                size: "sm",
+                                selected: width === preset,
+                            }), children: messages.imageWidthPreset({ percent: Number(preset) }) }, preset))) }), _jsx(Separator, {}), _jsx(Tooltip, { content: messages.imageEdit, children: _jsx("button", { type: "button", "aria-label": messages.imageEdit, disabled: disabled, onClick: onEdit, className: ICON_BUTTON, children: _jsx(EditIcon, { size: 16, "aria-hidden": true }) }) }), _jsx(Tooltip, { content: messages.imageRemove, children: _jsx("button", { type: "button", "aria-label": messages.imageRemove, disabled: disabled, onClick: () => editor.chain().focus().removeImage().run(), className: ICON_BUTTON, children: _jsx(DeleteIcon, { size: 16, "aria-hidden": true }) }) })] }) }) }));
+}
+//# sourceMappingURL=ImageToolbar.js.map

package/dist/editor/features/image/ImageToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageToolbar.js","sourceRoot":"","sources":["../../../../src/editor/features/image/ImageToolbar.tsx"],"names":[],"mappings":"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"}

package/dist/editor/features/image/image.d.ts

@@ -0,0 +1,115 @@
+import { Node } from "@tiptap/core";
+import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
+import { type EditorState } from "@tiptap/pm/state";
+import type { FieldNotice } from "../../core/fieldNotice.js";
+import { RICH_TEXT_SCHEMA } from "../../core/schema.js";
+/** Ширина картинки: пресет из Схемы или `null` — свой размер, не шире Документа. */
+export type ImageWidth = (typeof RICH_TEXT_SCHEMA.imageWidths)[number];
+export declare const IMAGE_WIDTHS: readonly ImageWidth[];
+/** Атрибуты картинки в Документе. */
+export interface ImageAttributes {
+    src: string;
+    alt: string;
+    width: ImageWidth | null;
+}
+/** Картинка под выделением: выделенный узел или та, в подписи которой каретка. */
+export declare function selectedImage(state: EditorState): {
+    pos: number;
+    node: ProseMirrorNode;
+} | null;
+/**
+ * Выделена ли картинка целиком — тогда над ней панель картинки, а не
+ * форматирования.
+ *
+ * Живёт в узле, а не в `ImageToolbar.tsx`: условие нужно и общему UI (плавающей
+ * Панели и меню выделения), и общий UI не должен импортировать панель картинки,
+ * которая сама берёт из него `focusWithin` (ADR-0060, пункт 14).
+ */
+export declare function isImageSelection(selection: unknown): boolean;
+/** Имя узла картинки в Схеме движка. */
+export declare const IMAGE_NODE = "image";
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        richImage: {
+            /** Открыть поповер картинки: кнопка Панели и пункт Меню вставки. */
+            openImageEditor: () => ReturnType;
+            /**
+             * Вставить картинку на место выделения: пустой абзац заменяется, иначе
+             * Блок встаёт рядом. Каретка уходит в подпись. Адрес вне политики — `false`.
+             */
+            insertImage: (attributes: Partial<ImageAttributes> & {
+                src: string;
+            }) => ReturnType;
+            /** Изменить картинку под выделением; адрес вне политики — `false`. */
+            updateImage: (attributes: Partial<ImageAttributes>) => ReturnType;
+            /** Убрать картинку под выделением. */
+            removeImage: () => ReturnType;
+            /**
+             * Загрузить файлы через `onUploadImage` и вставить картинки на место
+             * `pos` (по умолчанию — каретки). Без загрузчика — `false` и подсказка.
+             */
+            uploadImages: (files: readonly File[], pos?: number) => ReturnType;
+        };
+    }
+}
+export interface RichImageOptions {
+    /** Открыть поповер картинки — его держит `RichTextEditor`. */
+    onOpenEditor: () => void;
+    /** Подсказка пустой подписи; читается на каждой перерисовке, смена локали подхватывается. */
+    captionPlaceholder: () => string;
+    /** Подпись плейсхолдера загрузки файла `name`. */
+    uploadingLabel: (name: string) => string;
+    /** Загрузчик потребителя; `undefined` — файлы не принимаются. Читается в момент вставки. */
+    upload: () => ((file: File) => Promise<string>) | undefined;
+    /**
+     * Текст и тон Сообщения поля для события файлов: каталог сообщений у
+     * `RichTextEditor`. Само сообщение уходит командой движка `showNotice`
+     * (`fieldNotice.ts`) — тем же каналом, что у своих Инструментов.
+     */
+    describeNotice: (notice: ImageNotice) => FieldNotice;
+}
+/** Событие файлов: идёт загрузка, готово, отказ, файлы не принимаются. */
+export type ImageNotice = {
+    kind: "uploading";
+    name: string;
+} | {
+    kind: "uploaded";
+    name: string;
+} | {
+    kind: "failed";
+    name: string;
+} | {
+    kind: "notImage";
+    name: string;
+} | {
+    kind: "unsupported";
+};
+/**
+ * Картинка Документа — `<figure>` с `<img>` и необязательной `<figcaption>`.
+ *
+ * ПОЧЕМУ `figure` С ПОДПИСЬЮ-УЗЛОМ, А НЕ `Image` TIPTAP. Расширение Tiptap —
+ * голый `<img>`: подписи у него нет, а подпись — часть «Набора v1». Подпись
+ * здесь — свой узел-текст внутри картинки: в ней работают Метки и ссылки, а
+ * «Превратить в заголовок» или список её не тронут — Схема `figure` не
+ * пустит внутрь ничего, кроме подписи.
+ *
+ * `atom: true` — картинка выделяется целиком (щелчок по ней, стрелки,
+ * Backspace после неё), как разделитель. Это же делает документ из одной
+ * картинки непустым для `isEmpty` движка, на котором держатся `required` и
+ * пустое значение `""`.
+ *
+ * ПУСТАЯ ПОДПИСЬ НЕ ПИШЕТСЯ. Узел подписи в Документе есть всегда, иначе её
+ * некуда было бы набрать; в HTML `figcaption` уходит, только когда в ней есть
+ * текст. Обратный путь симметричен: `<figure>` без подписи и голый `<img>`
+ * получают пустую.
+ */
+export declare const RichImage: Node<RichImageOptions, any>;
+/**
+ * Адрес из поля поповера — в адрес картинки, или `null`, если такой картинке
+ * в Документе не быть. Правило то же, что у ссылки (`normalizeLinkInput`):
+ * адрес без схемы получает `https://`, а начинающийся с `/`, `#`, `?` или `.`
+ * — ошибка, а не путь от текущей страницы. Строже в одном: схемы только
+ * `http` и `https` — ни `mailto:`, ни `data:`, ни `blob:`.
+ */
+export declare function normalizeImageInput(input: string): string | null;
+//# sourceMappingURL=image.d.ts.map

package/dist/editor/features/image/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/editor/features/image/image.ts"],"names":[],"mappings":"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"}