@inshapardaz/likhari-react 0.1.5 → 0.1.6-dev.44

package/dist/image/ImageCropper.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { ActionIcon, Alert, Button, Group, SegmentedControl, Stack, Text, Tooltip } from '@mantine/core';
+import { IconCrop, IconFlipHorizontal, IconFlipVertical, IconRestore, IconRotate2, IconRotateClockwise2, } from '@tabler/icons-react';
+import { applyPixelOp } from './imageEdit.js';
+const ASPECTS = { free: null, '1:1': 1, '4:3': 4 / 3, '16:9': 16 / 9 };
+const clamp = (v) => Math.min(Math.max(v, 0), 1);
+/** Rotate, flip and crop. Drag on the preview to choose the area to keep, then
+ * "Apply crop"; each operation re-renders the pixels, so it needs an image the
+ * canvas may read (uploaded files and same-origin/CORS-enabled URLs). */
+export function ImageCropper({ src, onApply, canReset, onReset }) {
+    const imgRef = useRef(null);
+    const dragStart = useRef(null);
+    const [rect, setRect] = useState(null);
+    const [aspect, setAspect] = useState('free');
+    const [busy, setBusy] = useState(false);
+    const [error, setError] = useState(null);
+    const run = async (op) => {
+        setBusy(true);
+        setError(null);
+        try {
+            onApply(await applyPixelOp(src, op));
+            setRect(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Could not edit the image');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const pointerFraction = (event) => {
+        const box = imgRef.current?.getBoundingClientRect();
+        if (!box || !box.width || !box.height)
+            return null;
+        return { x: clamp((event.clientX - box.left) / box.width), y: clamp((event.clientY - box.top) / box.height), box };
+    };
+    const onDown = (event) => {
+        const p = pointerFraction(event);
+        if (!p)
+            return;
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragStart.current = { x: p.x, y: p.y };
+        setRect({ x: p.x, y: p.y, w: 0, h: 0 });
+    };
+    const onMove = (event) => {
+        const start = dragStart.current;
+        const p = pointerFraction(event);
+        if (!start || !p)
+            return;
+        let dx = p.x - start.x;
+        let dy = p.y - start.y;
+        const ratio = ASPECTS[aspect];
+        if (ratio) {
+            // Keep the chosen aspect ratio in pixels, shrinking to fit inside the image.
+            let widthPx = Math.abs(dx) * p.box.width;
+            let heightPx = widthPx / ratio;
+            const maxHeightPx = (dy >= 0 ? 1 - start.y : start.y) * p.box.height;
+            if (heightPx > maxHeightPx) {
+                heightPx = maxHeightPx;
+                widthPx = heightPx * ratio;
+            }
+            dx = (dx >= 0 ? 1 : -1) * (widthPx / p.box.width);
+            dy = (dy >= 0 ? 1 : -1) * (heightPx / p.box.height);
+        }
+        setRect({ x: Math.min(start.x, start.x + dx), y: Math.min(start.y, start.y + dy), w: Math.abs(dx), h: Math.abs(dy) });
+    };
+    const onUp = () => {
+        dragStart.current = null;
+        // A click without a drag isn't a selection.
+        setRect((r) => (r && (r.w < 0.02 || r.h < 0.02) ? null : r));
+    };
+    return (_jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { gap: "xs", children: [_jsx(Tooltip, { label: "Rotate left", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate left", disabled: busy, onClick: () => run({ type: 'rotate', direction: 'ccw' }), children: _jsx(IconRotate2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Rotate right", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Rotate right", disabled: busy, onClick: () => run({ type: 'rotate', direction: 'cw' }), children: _jsx(IconRotateClockwise2, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip horizontally", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip horizontally", disabled: busy, onClick: () => run({ type: 'flip', axis: 'horizontal' }), children: _jsx(IconFlipHorizontal, { size: 16 }) }) }), _jsx(Tooltip, { label: "Flip vertically", children: _jsx(ActionIcon, { variant: "default", "aria-label": "Flip vertically", disabled: busy, onClick: () => run({ type: 'flip', axis: 'vertical' }), children: _jsx(IconFlipVertical, { size: 16 }) }) }), _jsx(Button, { ml: "auto", size: "xs", variant: "subtle", leftSection: _jsx(IconRestore, { size: 14 }), disabled: !canReset || busy, onClick: () => {
+                            setRect(null);
+                            setError(null);
+                            onReset();
+                        }, children: "Undo edits" })] }), _jsxs(Group, { gap: "xs", align: "center", children: [_jsx(Text, { size: "sm", children: "Crop shape" }), _jsx(SegmentedControl, { size: "xs", value: aspect, onChange: (v) => {
+                            setAspect(v);
+                            setRect(null);
+                        }, data: [
+                            { value: 'free', label: 'Free' },
+                            { value: '1:1', label: '1:1' },
+                            { value: '4:3', label: '4:3' },
+                            { value: '16:9', label: '16:9' },
+                        ] })] }), _jsxs("div", { className: "likhari-cropper-stage", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onUp, children: [_jsx("img", { ref: imgRef, src: src, alt: "", draggable: false, className: "likhari-cropper-image" }), rect && rect.w > 0 && rect.h > 0 && (_jsx("div", { className: "likhari-cropper-selection", style: { left: `${rect.x * 100}%`, top: `${rect.y * 100}%`, width: `${rect.w * 100}%`, height: `${rect.h * 100}%` } }))] }), _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Drag on the image to choose the area to keep." }), _jsx(Button, { size: "xs", leftSection: _jsx(IconCrop, { size: 14 }), disabled: !rect || busy, loading: busy, onClick: () => rect && run({ type: 'crop', rect }), children: "Apply crop" })] }), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error }))] }));
+}

package/dist/image/ImageDialog.d.ts

@@ -0,0 +1,30 @@
+import type { ImageLinkType } from './ImageNode.js';
+export interface ImageDialogValue {
+    src: string;
+    altText: string;
+    /** null = no caption */
+    caption: string | null;
+    linkType: ImageLinkType;
+    /** Display size in px; null = natural size */
+    width: number | null;
+    height: number | null;
+}
+export interface ImageDialogProps {
+    /** `insert`: pick an image. `edit`: also change its source, size, crop and rotation. */
+    mode: 'insert' | 'edit';
+    opened: boolean;
+    /** The image being edited (edit mode). */
+    initial?: ImageDialogValue;
+    /** Focus the caption field when the dialog opens. */
+    initialFocus?: 'caption';
+    onSubmit: (image: ImageDialogValue) => void;
+    onClose: () => void;
+}
+/**
+ * Insert-image dialog (UI spec §6) and, in edit mode, the image editor: change
+ * the source (URL or upload), alt text, caption, display size, and crop/rotate.
+ * Edits that change pixels (crop, rotate, flip) are embedded as a data URI, or
+ * stored through the host's `onImageUpload` when there is one.
+ */
+export declare function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onClose }: ImageDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageDialog.d.ts.map

package/dist/image/ImageDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wFAAwF;IACxF,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,qDAAqD;IACrD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgCD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BA4SvG"}

package/dist/image/ImageDialog.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, Checkbox, FileInput, Group, Modal, NumberInput, SegmentedControl, Stack, Tabs, Text, TextInput, } from '@mantine/core';
+import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
+import { dataUrlBytes, dataUrlToFile, fitDimension, mimeFromSrc } from './imageEdit.js';
+import { ImageCropper } from './ImageCropper.js';
+import { useImageOptions } from './ImageOptionsContext.js';
+function readAsDataUrl(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(reader.error ?? new Error('Could not read the file'));
+        reader.readAsDataURL(file);
+    });
+}
+/** Natural pixel size of an image URL (for the aspect ratio and size presets). */
+function useNaturalSize(src) {
+    const [size, setSize] = useState(null);
+    useEffect(() => {
+        setSize(null);
+        if (!src)
+            return;
+        let cancelled = false;
+        const img = new Image();
+        img.onload = () => {
+            if (!cancelled && img.naturalWidth)
+                setSize({ width: img.naturalWidth, height: img.naturalHeight });
+        };
+        img.src = src;
+        return () => {
+            cancelled = true;
+        };
+    }, [src]);
+    return size;
+}
+/**
+ * Insert-image dialog (UI spec §6) and, in edit mode, the image editor: change
+ * the source (URL or upload), alt text, caption, display size, and crop/rotate.
+ * Edits that change pixels (crop, rotate, flip) are embedded as a data URI, or
+ * stored through the host's `onImageUpload` when there is one.
+ */
+export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onClose }) {
+    const { allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload } = useImageOptions();
+    const editing = mode === 'edit' && initial !== undefined;
+    const defaultSource = editing ? 'keep' : allowLinked ? 'linked' : 'embedded';
+    const [tab, setTab] = useState('details');
+    const [source, setSource] = useState(defaultSource);
+    const [url, setUrl] = useState('');
+    const [file, setFile] = useState(null);
+    const [fileSrc, setFileSrc] = useState(null);
+    const [altText, setAltText] = useState('');
+    const [caption, setCaption] = useState('');
+    const [width, setWidth] = useState(null);
+    const [height, setHeight] = useState(null);
+    const [lockAspect, setLockAspect] = useState(true);
+    const [pixelSrc, setPixelSrc] = useState(null);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (!opened)
+            return;
+        setTab('details');
+        setSource(defaultSource);
+        setUrl('');
+        setFile(null);
+        setFileSrc(null);
+        setAltText(initial?.altText ?? '');
+        setCaption(initial?.caption ?? '');
+        setWidth(initial?.width ?? null);
+        setHeight(initial?.height ?? null);
+        setLockAspect(true);
+        setPixelSrc(null);
+        setError(null);
+        setBusy(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [opened]);
+    // The image before any crop/rotate: the current one, the typed URL, or the chosen file.
+    const baseSrc = source === 'keep' ? (initial?.src ?? null) : source === 'linked' ? normalizeImageUrl(url) : fileSrc;
+    const effectiveSrc = pixelSrc ?? baseSrc;
+    const natural = useNaturalSize(effectiveSrc);
+    /** A new source or new pixels invalidate any custom size. */
+    const resetSize = (toInitial = false) => {
+        setWidth(toInitial ? (initial?.width ?? null) : null);
+        setHeight(toInitial ? (initial?.height ?? null) : null);
+    };
+    const changeSource = (next) => {
+        setSource(next);
+        setPixelSrc(null);
+        resetSize(next === 'keep');
+        setError(null);
+    };
+    const changeFile = async (next) => {
+        setFile(next);
+        setFileSrc(null);
+        setPixelSrc(null);
+        resetSize();
+        setError(null);
+        if (!next)
+            return;
+        const problem = validateImageFile(next, maxSizeMB);
+        if (problem) {
+            setError(problem);
+            return;
+        }
+        try {
+            setFileSrc(await readAsDataUrl(next));
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Could not read the file');
+        }
+    };
+    const onSizeChange = (changed, value) => {
+        const n = typeof value === 'number' ? value : null;
+        if (n === null) {
+            changed === 'width' ? setWidth(null) : setHeight(null);
+            return;
+        }
+        if (lockAspect && natural) {
+            const fitted = fitDimension(changed, n, natural.width, natural.height);
+            setWidth(fitted.width);
+            setHeight(fitted.height);
+        }
+        else {
+            changed === 'width' ? setWidth(n) : setHeight(n);
+        }
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        if (!effectiveSrc) {
+            setError(source === 'linked' ? 'Enter an http(s) or relative image URL' : source === 'embedded' ? 'Choose an image file' : 'No image');
+            return;
+        }
+        try {
+            let src = effectiveSrc;
+            let linkType = source === 'keep' ? (initial?.linkType ?? 'linked') : source;
+            // Pixels the document doesn't reference yet (an upload, or an edit) are
+            // stored: through the host's handler, or embedded as a data URI.
+            const newPixels = pixelSrc ?? (source === 'embedded' ? fileSrc : null);
+            if (newPixels) {
+                if (dataUrlBytes(newPixels) > maxSizeMB * 1024 * 1024) {
+                    setError(`Image is larger than ${maxSizeMB} MB`);
+                    return;
+                }
+                linkType = 'embedded';
+                if (onImageUpload) {
+                    setBusy(true);
+                    const ext = mimeFromSrc(newPixels).split('/')[1];
+                    const upload = pixelSrc || !file ? dataUrlToFile(newPixels, `image.${ext}`) : file;
+                    src = await onImageUpload(upload);
+                    if (!normalizeImageUrl(src)) {
+                        setError('The upload handler returned an unusable image URL');
+                        setBusy(false);
+                        return;
+                    }
+                }
+                else {
+                    src = newPixels;
+                }
+            }
+            onSubmit({
+                src,
+                altText: altText.trim(),
+                caption: allowCaption ? caption.trim() || null : (initial?.caption ?? null),
+                linkType,
+                width,
+                height,
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Could not save the image');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    const sourceFields = (_jsxs(Stack, { gap: "sm", children: [(editing || (allowLinked && allowEmbedded)) && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => changeSource(v), data: [
+                    ...(editing ? [{ value: 'keep', label: 'Current image' }] : []),
+                    ...(allowLinked ? [{ value: 'linked', label: 'From URL' }] : []),
+                    ...(allowEmbedded ? [{ value: 'embedded', label: 'Upload' }] : []),
+                ] })), source === 'keep' && (_jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, style: { wordBreak: 'break-all' }, children: initial?.src.startsWith('data:') ? 'Embedded in the document' : initial?.src })), source === 'linked' && (_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/photo.jpg", value: url, onChange: (e) => {
+                    setUrl(e.currentTarget.value);
+                    setPixelSrc(null);
+                    resetSize();
+                }, "data-autofocus": !editing || initialFocus !== 'caption' ? true : undefined })), source === 'embedded' && (_jsx(FileInput, { label: "Image file", placeholder: "Choose an image", accept: ACCEPTED_IMAGE_TYPES.join(','), value: file, onChange: changeFile, description: `Up to ${maxSizeMB} MB${onImageUpload ? '' : '; stored inside the document'}` })), _jsx(TextInput, { label: "Alt text", description: "Describes the image for screen readers", value: altText, onChange: (e) => setAltText(e.currentTarget.value) }), allowCaption && (_jsx(TextInput, { label: "Caption", description: "Shown under the image. Leave empty for none.", value: caption, onChange: (e) => setCaption(e.currentTarget.value), "data-autofocus": initialFocus === 'caption' ? true : undefined }))] }));
+    const sizeFields = (_jsxs(Stack, { gap: "sm", children: [_jsxs(Group, { grow: true, align: "flex-end", children: [_jsx(NumberInput, { label: "Width (px)", min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.width) : 'Auto', value: width ?? '', onChange: (v) => onSizeChange('width', v) }), _jsx(NumberInput, { label: "Height (px)", min: 1, max: 10000, hideControls: true, placeholder: natural ? String(natural.height) : 'Auto', value: height ?? '', onChange: (v) => onSizeChange('height', v) })] }), _jsx(Checkbox, { label: "Keep proportions", checked: lockAspect, onChange: (e) => setLockAspect(e.currentTarget.checked) }), _jsxs(Group, { gap: "xs", children: [[25, 50, 75, 100].map((pct) => (_jsxs(Button, { size: "xs", variant: "default", disabled: !natural, onClick: () => natural && (setWidth(Math.round((natural.width * pct) / 100)), setHeight(Math.round((natural.height * pct) / 100))), children: [pct, "%"] }, pct))), _jsx(Button, { size: "xs", variant: "subtle", onClick: () => resetSize(), children: "Original size" })] }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["You can also drag the corner handle on a selected image. ", natural ? `Original: ${natural.width} × ${natural.height} px.` : ''] })] }));
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: editing ? 'Edit image' : 'Insert image', centered: true, size: editing ? 'lg' : 'sm', children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "sm", children: [editing ? (_jsxs(Tabs, { value: tab, onChange: (v) => setTab(v ?? 'details'), keepMounted: false, children: [_jsxs(Tabs.List, { mb: "sm", children: [_jsx(Tabs.Tab, { value: "details", children: "Details" }), _jsx(Tabs.Tab, { value: "size", disabled: !effectiveSrc, children: "Size" }), _jsx(Tabs.Tab, { value: "crop", disabled: !effectiveSrc, children: "Crop & rotate" })] }), _jsx(Tabs.Panel, { value: "details", children: sourceFields }), _jsx(Tabs.Panel, { value: "size", children: sizeFields }), _jsx(Tabs.Panel, { value: "crop", children: effectiveSrc && (_jsx(ImageCropper, { src: effectiveSrc, canReset: pixelSrc !== null, onApply: (edited) => {
+                                        setPixelSrc(edited);
+                                        resetSize();
+                                    }, onReset: () => {
+                                        setPixelSrc(null);
+                                        resetSize(source === 'keep');
+                                    } })) })] })) : (sourceFields), error && (_jsx(Alert, { color: "red", variant: "light", p: "xs", children: error })), _jsxs(Group, { justify: "flex-end", gap: "xs", children: [_jsx(Button, { variant: "default", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", loading: busy, children: editing ? 'Save' : 'Insert' })] })] }) }) }));
+}

package/dist/image/ImageNode.d.ts

@@ -0,0 +1,64 @@
+import type { ReactElement } from 'react';
+import { DecoratorNode, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
+/** How the image's bytes are held: an external URL, or embedded in the
+ * document (a base64 data URI, or a URL returned by the host's upload handler). */
+export type ImageLinkType = 'linked' | 'embedded';
+export interface ImagePayload {
+    src: string;
+    altText?: string;
+    /** null = no caption; '' = caption enabled but empty */
+    caption?: string | null;
+    linkType: ImageLinkType;
+    width?: number | null;
+    height?: number | null;
+    key?: NodeKey;
+}
+export type SerializedImageNode = Spread<{
+    src: string;
+    altText: string;
+    caption: string | null;
+    linkType: ImageLinkType;
+    width: number | null;
+    height: number | null;
+}, SerializedLexicalNode>;
+/**
+ * Block-level image (editor-architecture-design.md §3.5). The caption is a
+ * plain string (null = no caption) edited through the image's right-click menu
+ * / edit dialog — not the nested sub-editor the architecture doc leaves open —
+ * which keeps every edit in the parent editor's undo history.
+ */
+export declare class ImageNode extends DecoratorNode<ReactElement> {
+    __src: string;
+    __altText: string;
+    __caption: string | null;
+    __linkType: ImageLinkType;
+    __width: number | null;
+    __height: number | null;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(json: SerializedImageNode): ImageNode;
+    constructor(src: string, altText?: string, caption?: string | null, linkType?: ImageLinkType, width?: number | null, height?: number | null, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
+    exportDOM(): DOMExportOutput;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    isInline(): false;
+    getSrc(): string;
+    getAltText(): string;
+    getCaption(): string | null;
+    getLinkType(): ImageLinkType;
+    getWidth(): number | null;
+    getHeight(): number | null;
+    setCaption(caption: string | null): this;
+    setAltText(altText: string): this;
+    /** Points the node at new image data (a replaced URL/upload, or edited pixels). */
+    setSource(src: string, linkType: ImageLinkType): this;
+    /** Display size in px; null = the image's natural size. */
+    setDimensions(width: number | null, height: number | null): this;
+    getTextContent(): string;
+    decorate(): ReactElement;
+}
+export declare function $createImageNode({ src, altText, caption, linkType, width, height, key }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;
+//# sourceMappingURL=ImageNode.d.ts.map

package/dist/image/ImageNode.d.ts.map

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

package/dist/image/ImageNode.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorNode, } from 'lexical';
+import { ImageComponent } from './ImageComponent.js';
+/**
+ * Block-level image (editor-architecture-design.md §3.5). The caption is a
+ * plain string (null = no caption) edited through the image's right-click menu
+ * / edit dialog — not the nested sub-editor the architecture doc leaves open —
+ * which keeps every edit in the parent editor's undo history.
+ */
+export class ImageNode extends DecoratorNode {
+    static getType() {
+        return 'image';
+    }
+    static clone(node) {
+        return new ImageNode(node.__src, node.__altText, node.__caption, node.__linkType, node.__width, node.__height, node.__key);
+    }
+    static importJSON(json) {
+        return $createImageNode({
+            src: json.src,
+            altText: json.altText,
+            caption: json.caption,
+            linkType: json.linkType,
+            width: json.width,
+            height: json.height,
+        });
+    }
+    constructor(src, altText = '', caption = null, linkType = 'linked', width = null, height = null, key) {
+        super(key);
+        this.__src = src;
+        this.__altText = altText;
+        this.__caption = caption;
+        this.__linkType = linkType;
+        this.__width = width;
+        this.__height = height;
+    }
+    exportJSON() {
+        return {
+            type: 'image',
+            version: 1,
+            src: this.__src,
+            altText: this.__altText,
+            caption: this.__caption,
+            linkType: this.__linkType,
+            width: this.__width,
+            height: this.__height,
+        };
+    }
+    /** `<figure><img><figcaption>` — the figure/figcaption semantics from spec §4.7. */
+    exportDOM() {
+        const figure = document.createElement('figure');
+        const img = document.createElement('img');
+        img.setAttribute('src', this.__src);
+        img.setAttribute('alt', this.__altText);
+        if (this.__width)
+            img.setAttribute('width', String(this.__width));
+        if (this.__height)
+            img.setAttribute('height', String(this.__height));
+        figure.appendChild(img);
+        if (this.__caption) {
+            const caption = document.createElement('figcaption');
+            caption.textContent = this.__caption;
+            figure.appendChild(caption);
+        }
+        return { element: figure };
+    }
+    createDOM(config) {
+        const div = document.createElement('div');
+        const className = config.theme.image;
+        if (typeof className === 'string')
+            div.className = className;
+        return div;
+    }
+    updateDOM() {
+        return false;
+    }
+    isInline() {
+        return false;
+    }
+    getSrc() {
+        return this.__src;
+    }
+    getAltText() {
+        return this.__altText;
+    }
+    getCaption() {
+        return this.__caption;
+    }
+    getLinkType() {
+        return this.__linkType;
+    }
+    getWidth() {
+        return this.__width;
+    }
+    getHeight() {
+        return this.__height;
+    }
+    setCaption(caption) {
+        const writable = this.getWritable();
+        writable.__caption = caption || null;
+        return writable;
+    }
+    setAltText(altText) {
+        const writable = this.getWritable();
+        writable.__altText = altText;
+        return writable;
+    }
+    /** Points the node at new image data (a replaced URL/upload, or edited pixels). */
+    setSource(src, linkType) {
+        const writable = this.getWritable();
+        writable.__src = src;
+        writable.__linkType = linkType;
+        return writable;
+    }
+    /** Display size in px; null = the image's natural size. */
+    setDimensions(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+        return writable;
+    }
+    getTextContent() {
+        return this.__altText || this.__caption || '';
+    }
+    decorate() {
+        return (_jsx(ImageComponent, { nodeKey: this.getKey(), src: this.__src, altText: this.__altText, caption: this.__caption, linkType: this.__linkType, width: this.__width, height: this.__height }));
+    }
+}
+export function $createImageNode({ src, altText, caption, linkType, width, height, key }) {
+    return new ImageNode(src, altText, caption ?? null, linkType, width ?? null, height ?? null, key);
+}
+export function $isImageNode(node) {
+    return node instanceof ImageNode;
+}

package/dist/image/ImageOptionsContext.d.ts

@@ -0,0 +1,17 @@
+/** Image settings from `EditorRoot` (feature config + upload handler), shared
+ * with the toolbar's insert dialog and with each image's own edit menu/dialog. */
+export interface ImageOptions {
+    /** `images.linked` — images may reference an external URL. */
+    allowLinked: boolean;
+    /** `images.embedded` — images may be uploaded. */
+    allowEmbedded: boolean;
+    /** `images.caption` — images may have a caption. */
+    allowCaption: boolean;
+    /** `images.maxSizeMB` */
+    maxSizeMB: number;
+    /** Host upload handler; without it, uploads are embedded as base64 data URIs. */
+    onImageUpload?: (file: File) => Promise<string>;
+}
+export declare const ImageOptionsContext: import("react").Context<ImageOptions>;
+export declare function useImageOptions(): ImageOptions;
+//# sourceMappingURL=ImageOptionsContext.d.ts.map

package/dist/image/ImageOptionsContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageOptionsContext.d.ts","sourceRoot":"","sources":["../../src/image/ImageOptionsContext.tsx"],"names":[],"mappings":"AAEA;kFACkF;AAClF,MAAM,WAAW,YAAY;IAC3B,8DAA8D;IAC9D,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACjD;AAED,eAAO,MAAM,mBAAmB,uCAK9B,CAAC;AAEH,wBAAgB,eAAe,IAAI,YAAY,CAE9C"}

package/dist/image/ImageOptionsContext.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+export const ImageOptionsContext = createContext({
+    allowLinked: true,
+    allowEmbedded: true,
+    allowCaption: true,
+    maxSizeMB: 5,
+});
+export function useImageOptions() {
+    return useContext(ImageOptionsContext);
+}

package/dist/image/imageEdit.d.ts

@@ -0,0 +1,43 @@
+/** A crop rectangle as fractions (0–1) of the image's width and height. */
+export interface CropRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Converts a fractional crop rectangle to whole pixels inside a width x height
+ * image, clamped so it never leaves the image and is at least 1px. */
+export declare function toPixelRect(rect: CropRect, width: number, height: number): {
+    sx: number;
+    sy: number;
+    sw: number;
+    sh: number;
+};
+/** When one dimension changes with the aspect ratio locked, returns both. */
+export declare function fitDimension(changed: 'width' | 'height', value: number, naturalWidth: number, naturalHeight: number): {
+    width: number;
+    height: number;
+};
+/** MIME type to re-encode an edited image as: its own if it is a lossy/lossless
+ * format canvas can write (JPEG, WebP, PNG), otherwise PNG (GIF, SVG, unknown). */
+export declare function mimeFromSrc(src: string): string;
+/** Approximate decoded size, in bytes, of a base64 data URI. */
+export declare function dataUrlBytes(dataUrl: string): number;
+export declare function dataUrlToFile(dataUrl: string, name: string): File;
+export type PixelOp = {
+    type: 'rotate';
+    direction: 'cw' | 'ccw';
+} | {
+    type: 'flip';
+    axis: 'horizontal' | 'vertical';
+} | {
+    type: 'crop';
+    rect: CropRect;
+};
+/** Loads an image for canvas use. External URLs are requested with CORS so the
+ * canvas isn't tainted; a server that doesn't allow that makes this reject. */
+export declare function loadImage(src: string): Promise<HTMLImageElement>;
+export declare const CANNOT_EDIT_PIXELS = "This image can't be edited here (its server doesn't allow it). Upload the file instead to crop or rotate it.";
+/** Applies a rotate / flip / crop to an image and returns the result as a data URI. */
+export declare function applyPixelOp(src: string, op: PixelOp): Promise<string>;
+//# sourceMappingURL=imageEdit.d.ts.map

package/dist/image/imageEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageEdit.d.ts","sourceRoot":"","sources":["../../src/image/imageEdit.ts"],"names":[],"mappings":"AAAA,2EAA2E;AAC3E,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED;sEACsE;AACtE,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM;;;;;EAMxE;AAED,6EAA6E;AAC7E,wBAAgB,YAAY,CAC1B,OAAO,EAAE,OAAO,GAAG,QAAQ,EAC3B,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,GACpB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAKnC;AAED;mFACmF;AACnF,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAI/C;AASD,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAKpD;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,CAOjE;AAED,MAAM,MAAM,OAAO,GACf;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,IAAI,GAAG,KAAK,CAAA;CAAE,GAC3C;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,YAAY,GAAG,UAAU,CAAA;CAAE,GACjD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAErC;+EAC+E;AAC/E,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAQhE;AAED,eAAO,MAAM,kBAAkB,iHACiF,CAAC;AAEjH,uFAAuF;AACvF,wBAAsB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAuC5E"}