@inshapardaz/likhari-react 0.1.6-dev.51 → 0.1.6-dev.56

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

@@ -1 +1 @@
-{"version":3,"file":"ImageComponent.d.ts","sourceRoot":"","sources":["../../src/image/ImageComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EASL,KAAK,OAAO,EACb,MAAM,SAAS,CAAC;AAGjB,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,aAAa,CAAC;AAU5D,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,yFAAyF;IACzF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BA2M9G"}
+{"version":3,"file":"ImageComponent.d.ts","sourceRoot":"","sources":["../../src/image/ImageComponent.tsx"],"names":[],"mappings":"AAKA,OAAO,EASL,KAAK,OAAO,EACb,MAAM,SAAS,CAAC;AAKjB,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,aAAa,CAAC;AAU5D,UAAU,mBAAmB;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,yFAAyF;IACzF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BAyP9G"}

package/dist/image/ImageComponent.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Menu } from '@mantine/core';
-import { IconPhotoDown, IconPhotoEdit, IconTextCaption, IconTrash, IconX } from '@tabler/icons-react';
+import { IconCrop, IconPhotoDown, IconPhotoEdit, IconTextCaption, IconTrash, IconX } from '@tabler/icons-react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+import { ImageCropDialog } from './ImageCropDialog.js';
 import { ImageDialog } from './ImageDialog.js';
 import { useImageOptions } from './ImageOptionsContext.js';
+import { dataUrlBytes, fetchImageAsDataUrl } from './imageEdit.js';
 // A type-only import of ImageNode (ImageNode itself imports this file), so the
 // node is recognised by its type string rather than `instanceof`.
 function isImageNode(node) {
@@ -29,6 +31,7 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
     const figureRef = useRef(null);
     const [menu, setMenu] = useState(null);
     const [dialog, setDialog] = useState(null);
+    const [cropDialogOpen, setCropDialogOpen] = useState(false);
     const [liveWidth, setLiveWidth] = useState(null);
     // Selecting must go through CLICK_COMMAND (returning true) rather than a
     // React onClick: otherwise Lexical's own click handling turns the DOM
@@ -48,14 +51,14 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
         });
     }, [editor, nodeKey]);
     const onDelete = useCallback((event) => {
-        if (!isSelected || dialog || menu)
+        if (!isSelected || dialog || cropDialogOpen || menu)
             return false;
         if (!$isNodeSelection($getSelection()))
             return false;
         event.preventDefault();
         $getNodeByKey(nodeKey)?.remove();
         return true;
-    }, [isSelected, dialog, menu, nodeKey]);
+    }, [isSelected, dialog, cropDialogOpen, menu, nodeKey]);
     useEffect(() => {
         const unregisterDelete = editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
         const unregisterBackspace = editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
@@ -71,16 +74,44 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
                 change(node);
         });
     };
+    // Converting from the context menu (as opposed to the "Crop & size" tab's
+    // checkbox) needs no review: just download and swap the source in place.
+    // Only on failure do we fall back to the full dialog, which shows the error
+    // and lets the person retry or pick a different image.
+    const convertToEmbedded = useCallback(async () => {
+        try {
+            const dataUrl = await fetchImageAsDataUrl(src, options.fetchImage);
+            if (dataUrlBytes(dataUrl) > options.maxSizeMB * 1024 * 1024) {
+                throw new Error(`Image is larger than ${options.maxSizeMB} MB`);
+            }
+            updateNode((node) => node.setSource(dataUrl, 'embedded'));
+        }
+        catch {
+            setDialog({ intent: 'convert' });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [src, options.fetchImage, options.maxSizeMB]);
     const applyEdit = (value) => {
         updateNode((node) => {
             node.setSource(value.src, value.linkType);
             node.setAltText(value.altText);
             node.setCaption(value.caption);
-            node.setDimensions(value.width, value.height);
+            // A changed source has new pixels the current display size may no
+            // longer fit — reset to auto. Editing alt text/caption only keeps it.
+            if (value.sourceChanged)
+                node.setDimensions(null, null);
         });
         setDialog(null);
         editor.focus();
     };
+    const applyCrop = (value) => {
+        updateNode((node) => {
+            node.setSource(value.src, 'embedded');
+            node.setDimensions(value.width, value.height);
+        });
+        setCropDialogOpen(false);
+        editor.focus();
+    };
     // --- drag-to-resize: bottom-right handle, aspect ratio kept ---------------
     const resizeStart = useRef(null);
     const onResizeDown = (event) => {
@@ -126,8 +157,11 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
         }, children: [_jsxs("span", { className: "likhari-image-wrap", children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: shownWidth, draggable: false }), isSelected && linkType === 'embedded' && (_jsx("span", { className: "likhari-image-resize-handle", role: "separator", "aria-label": "Resize image", onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onPointerCancel: onResizeUp }))] }), caption && _jsx("figcaption", { className: "likhari-image-caption", children: caption }), _jsxs(Menu, { opened: menu !== null, onChange: (opened) => {
                     if (!opened)
                         setMenu(null);
-                }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 200, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: menu?.x ?? -9999, top: menu?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconPhotoEdit, { size: 16, stroke: 1.75 }), onClick: () => setDialog({}), children: "Edit image\u2026" }), linkType === 'linked' && options.allowEmbedded && (_jsx(Menu.Item, { leftSection: _jsx(IconPhotoDown, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ intent: 'convert' }), children: "Convert to embedded image\u2026" })), options.allowCaption && (_jsx(Menu.Item, { leftSection: _jsx(IconTextCaption, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ intent: 'caption' }), children: caption ? 'Edit caption…' : 'Add caption…' })), options.allowCaption && caption && (_jsx(Menu.Item, { leftSection: _jsx(IconX, { size: 16, stroke: 1.75 }), onClick: () => updateNode((node) => node.setCaption(null)), children: "Remove caption" })), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconTrash, { size: 16, stroke: 1.75 }), onClick: removeImage, children: "Delete image" })] })] }), _jsx(ImageDialog, { mode: "edit", opened: dialog !== null, initial: { src, altText, caption, linkType, width, height }, intent: dialog?.intent, onSubmit: applyEdit, onClose: () => {
+                }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 200, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: menu?.x ?? -9999, top: menu?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsxs(Menu.Dropdown, { children: [_jsx(Menu.Item, { leftSection: _jsx(IconPhotoEdit, { size: 16, stroke: 1.75 }), onClick: () => setDialog({}), children: "Edit image\u2026" }), linkType === 'linked' && options.allowEmbedded && (_jsx(Menu.Item, { leftSection: _jsx(IconPhotoDown, { size: 16, stroke: 1.75 }), onClick: () => void convertToEmbedded(), children: "Convert to embedded image" })), linkType === 'embedded' && (_jsx(Menu.Item, { leftSection: _jsx(IconCrop, { size: 16, stroke: 1.75 }), onClick: () => setCropDialogOpen(true), children: "Crop & resize\u2026" })), options.allowCaption && (_jsx(Menu.Item, { leftSection: _jsx(IconTextCaption, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ intent: 'caption' }), children: caption ? 'Edit caption…' : 'Add caption…' })), options.allowCaption && caption && (_jsx(Menu.Item, { leftSection: _jsx(IconX, { size: 16, stroke: 1.75 }), onClick: () => updateNode((node) => node.setCaption(null)), children: "Remove caption" })), _jsx(Menu.Divider, {}), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconTrash, { size: 16, stroke: 1.75 }), onClick: removeImage, children: "Delete image" })] })] }), _jsx(ImageDialog, { mode: "edit", opened: dialog !== null, initial: { src, altText, caption, linkType }, intent: dialog?.intent, onSubmit: applyEdit, onClose: () => {
                     setDialog(null);
                     editor.focus();
-                } })] }));
+                } }), linkType === 'embedded' && (_jsx(ImageCropDialog, { opened: cropDialogOpen, initial: { src, width, height }, onSubmit: applyCrop, onClose: () => {
+                    setCropDialogOpen(false);
+                    editor.focus();
+                } }))] }));
 }

package/dist/image/ImageCropDialog.d.ts

@@ -0,0 +1,22 @@
+export interface ImageCropDialogValue {
+    src: string;
+    width: number | null;
+    height: number | null;
+}
+export interface ImageCropDialogProps {
+    opened: boolean;
+    /** The embedded image being edited — only images with pixels of their own
+     * (not linked ones) can be cropped, rotated or resized here. */
+    initial: {
+        src: string;
+        width: number | null;
+        height: number | null;
+    };
+    onSubmit: (value: ImageCropDialogValue) => void;
+    onClose: () => void;
+}
+/** Crop, rotate, flip and resize dialog for an embedded image, reached from
+ * its context menu. Edits that change pixels are re-embedded as a data URI,
+ * or stored through the host's `onImageUpload` when there is one. */
+export declare function ImageCropDialog({ opened, initial, onSubmit, onClose }: ImageCropDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ImageCropDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropDialog.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,oBAAoB;IACnC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC;IAChB;oEACgE;IAChE,OAAO,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,CAAC;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAChD,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAqBD;;qEAEqE;AACrE,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,oBAAoB,+BAyJ3F"}

package/dist/image/ImageCropDialog.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Alert, Button, Checkbox, Divider, Group, Modal, NumberInput, Stack, Text } from '@mantine/core';
+import { normalizeImageUrl } from './imageUrl.js';
+import { dataUrlBytes, dataUrlToFile, fitDimension, mimeFromSrc } from './imageEdit.js';
+import { ImageCropper } from './ImageCropper.js';
+import { useImageOptions } from './ImageOptionsContext.js';
+/** 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;
+}
+/** Crop, rotate, flip and resize dialog for an embedded image, reached from
+ * its context menu. Edits that change pixels are re-embedded as a data URI,
+ * or stored through the host's `onImageUpload` when there is one. */
+export function ImageCropDialog({ opened, initial, onSubmit, onClose }) {
+    const { maxSizeMB, onImageUpload } = useImageOptions();
+    const [pixelSrc, setPixelSrc] = useState(null);
+    const [width, setWidth] = useState(null);
+    const [height, setHeight] = useState(null);
+    const [lockAspect, setLockAspect] = useState(true);
+    const [error, setError] = useState(null);
+    const [busy, setBusy] = useState(false);
+    useEffect(() => {
+        if (!opened)
+            return;
+        setPixelSrc(null);
+        setWidth(initial.width);
+        setHeight(initial.height);
+        setLockAspect(true);
+        setError(null);
+        setBusy(false);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [opened]);
+    const effectiveSrc = pixelSrc ?? initial.src;
+    const natural = useNaturalSize(effectiveSrc);
+    const resetSize = () => {
+        setWidth(null);
+        setHeight(null);
+    };
+    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);
+        try {
+            let src = effectiveSrc;
+            if (pixelSrc) {
+                if (dataUrlBytes(pixelSrc) > maxSizeMB * 1024 * 1024) {
+                    setError(`Image is larger than ${maxSizeMB} MB`);
+                    return;
+                }
+                if (onImageUpload) {
+                    setBusy(true);
+                    const ext = mimeFromSrc(pixelSrc).split('/')[1];
+                    src = await onImageUpload(dataUrlToFile(pixelSrc, `image.${ext}`));
+                    if (!normalizeImageUrl(src)) {
+                        setError('The upload handler returned an unusable image URL');
+                        return;
+                    }
+                }
+            }
+            onSubmit({ src, width, height });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Could not save the image');
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: "Crop & resize", centered: true, size: "lg", children: _jsx("form", { onSubmit: handleSubmit, children: _jsxs(Stack, { gap: "md", children: [_jsx(ImageCropper, { src: effectiveSrc, canReset: pixelSrc !== null, onApply: (edited) => {
+                            setPixelSrc(edited);
+                            resetSize();
+                        }, onReset: () => {
+                            setPixelSrc(null);
+                            setWidth(initial.width);
+                            setHeight(initial.height);
+                        } }), _jsx(Divider, { label: "Size", labelPosition: "left" }), _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: () => {
+                                            if (!natural)
+                                                return;
+                                            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.` : ''] })] }), 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: "Save" })] })] }) }) }));
+}

package/dist/image/ImageDialog.d.ts

@@ -5,17 +5,21 @@ export interface ImageDialogValue {
     /** null = no caption */
     caption: string | null;
     linkType: ImageLinkType;
-    /** Display size in px; null = natural size */
-    width: number | null;
-    height: number | null;
+    /** Whether the pixels changed (a new URL/upload, or a conversion) — the
+     * display size no longer matches, so the caller should reset it to auto. */
+    sourceChanged: boolean;
 }
 export interface ImageDialogProps {
-    /** `insert`: pick an image. `edit`: also change its source, and — for embedded
-     * images only — size, crop and rotation. */
+    /** `insert`: pick an image. `edit`: also change its source, alt text and caption. */
     mode: 'insert' | 'edit';
     opened: boolean;
     /** The image being edited (edit mode). */
-    initial?: ImageDialogValue;
+    initial?: {
+        src: string;
+        altText: string;
+        caption: string | null;
+        linkType: ImageLinkType;
+    };
     /** What to do as the dialog opens: focus the caption field, or start converting
      * a linked image to an embedded one. */
     intent?: 'caption' | 'convert';
@@ -23,17 +27,11 @@ export interface ImageDialogProps {
     onClose: () => void;
 }
 /**
- * Insert-image dialog (UI spec §6) and, in edit mode, the image editor.
- *
- * - *Details*: replace the image (URL or upload), alt text, caption, and — for a
- *   linked image — convert it to an embedded one.
- * - *Crop & size* (embedded images only): rotate, flip, crop with draggable
- *   handles, and set the display size.
- *
- * Linked images are never pixel-edited: there is no copy of the pixels in the
- * document to change. Converting one downloads it and embeds the copy. Edits
- * that change pixels are embedded as a data URI, or stored through the host's
- * `onImageUpload` when there is one.
+ * Insert-image dialog (UI spec §6) and, in edit mode, the image's details:
+ * replace the source (URL or upload), alt text, caption, and — for a linked
+ * image — convert it to an embedded one. Cropping, rotating and resizing an
+ * embedded image is a separate dialog (`ImageCropDialog`), reached from the
+ * image's context menu once it has pixels of its own to edit.
  */
 export declare function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }: ImageDialogProps): import("react").JSX.Element;
 //# sourceMappingURL=ImageDialog.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAqBA,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;gDAC4C;IAC5C,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;4CACwC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgCD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAgYjG"}
+{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAMA,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;gFAC4E;IAC5E,aAAa,EAAE,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,qFAAqF;IACrF,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,EAAE,aAAa,CAAA;KAAE,CAAC;IAC5F;4CACwC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BAmPjG"}

package/dist/image/ImageDialog.js

@@ -1,10 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Alert, Button, Checkbox, Divider, FileInput, Group, Modal, NumberInput, SegmentedControl, Stack, Tabs, Text, TextInput, } from '@mantine/core';
+import { Alert, Button, Checkbox, FileInput, Group, Modal, SegmentedControl, Stack, Text, TextInput } from '@mantine/core';
 import { IconPhotoDown } from '@tabler/icons-react';
 import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
-import { dataUrlBytes, dataUrlToFile, fetchImageAsDataUrl, fitDimension, mimeFromSrc } from './imageEdit.js';
-import { ImageCropper } from './ImageCropper.js';
+import { dataUrlBytes, dataUrlToFile, fetchImageAsDataUrl, mimeFromSrc } from './imageEdit.js';
 import { useImageOptions } from './ImageOptionsContext.js';
 function readAsDataUrl(file) {
     return new Promise((resolve, reject) => {
@@ -14,44 +13,17 @@ function readAsDataUrl(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.
- *
- * - *Details*: replace the image (URL or upload), alt text, caption, and — for a
- *   linked image — convert it to an embedded one.
- * - *Crop & size* (embedded images only): rotate, flip, crop with draggable
- *   handles, and set the display size.
- *
- * Linked images are never pixel-edited: there is no copy of the pixels in the
- * document to change. Converting one downloads it and embeds the copy. Edits
- * that change pixels are embedded as a data URI, or stored through the host's
- * `onImageUpload` when there is one.
+ * Insert-image dialog (UI spec §6) and, in edit mode, the image's details:
+ * replace the source (URL or upload), alt text, caption, and — for a linked
+ * image — convert it to an embedded one. Cropping, rotating and resizing an
+ * embedded image is a separate dialog (`ImageCropDialog`), reached from the
+ * image's context menu once it has pixels of its own to edit.
  */
 export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }) {
     const { allowLinked, allowEmbedded, allowCaption, maxSizeMB, onImageUpload, fetchImage } = 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 [embedCopy, setEmbedCopy] = useState(false);
@@ -59,17 +31,12 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
     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);
     const [converting, setConverting] = useState(false);
     useEffect(() => {
         if (!opened)
             return;
-        setTab('details');
         setSource(defaultSource);
         setUrl('');
         setEmbedCopy(false);
@@ -77,10 +44,6 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
         setFileSrc(null);
         setAltText(initial?.altText ?? '');
         setCaption(initial?.caption ?? '');
-        setWidth(initial?.width ?? null);
-        setHeight(initial?.height ?? null);
-        setLockAspect(true);
-        setPixelSrc(null);
         setError(null);
         setBusy(false);
         setConverting(false);
@@ -88,32 +51,18 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
             void convert(initial.src);
         // 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);
-    // Only embedded images have pixels of their own to crop, rotate and resize.
     const effectiveLinkType = source === 'keep' ? (initial?.linkType ?? 'linked') : source === 'linked' ? 'linked' : 'embedded';
-    const canEditPixels = effectiveLinkType === 'embedded' && effectiveSrc !== null;
     const convertedFromUrl = source === 'embedded' && fileSrc !== null && file === null;
-    /** 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);
         setFile(null);
         setFileSrc(null);
-        resetSize(next === 'keep');
         setError(null);
     };
     const changeFile = async (next) => {
         setFile(next);
         setFileSrc(null);
-        setPixelSrc(null);
-        resetSize();
         setError(null);
         if (!next)
             return;
@@ -142,7 +91,6 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
             setSource('embedded');
             setFile(null);
             setFileSrc(dataUrl);
-            setPixelSrc(null);
         }
         catch (err) {
             setError(err instanceof Error ? err.message : 'Could not convert the image');
@@ -151,38 +99,23 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
             setConverting(false);
         }
     };
-    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) {
+        if (!baseSrc) {
             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 src = baseSrc;
             let linkType = effectiveLinkType;
-            // Pixels the document doesn't reference yet (an upload, an edit, or a
-            // downloaded copy of a linked image) are stored: through the host's
-            // handler, or embedded as a data URI.
-            let newPixels = pixelSrc ?? (source === 'embedded' ? fileSrc : null);
+            // Pixels the document doesn't reference yet (an upload, or a downloaded
+            // copy of a linked image) are stored: through the host's handler, or
+            // embedded as a data URI.
+            let newPixels = source === 'embedded' ? fileSrc : null;
             if (!newPixels && source === 'linked' && embedCopy) {
                 setBusy(true);
-                newPixels = await fetchImageAsDataUrl(effectiveSrc, fetchImage);
+                newPixels = await fetchImageAsDataUrl(baseSrc, fetchImage);
             }
             if (newPixels) {
                 if (dataUrlBytes(newPixels) > maxSizeMB * 1024 * 1024) {
@@ -193,7 +126,7 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
                 if (onImageUpload) {
                     setBusy(true);
                     const ext = mimeFromSrc(newPixels).split('/')[1];
-                    const upload = pixelSrc || !file ? dataUrlToFile(newPixels, `image.${ext}`) : file;
+                    const upload = !file ? dataUrlToFile(newPixels, `image.${ext}`) : file;
                     src = await onImageUpload(upload);
                     if (!normalizeImageUrl(src)) {
                         setError('The upload handler returned an unusable image URL');
@@ -209,8 +142,7 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
                 altText: altText.trim(),
                 caption: allowCaption ? caption.trim() || null : (initial?.caption ?? null),
                 linkType,
-                width,
-                height,
+                sourceChanged: source !== 'keep',
             });
         }
         catch (err) {
@@ -221,28 +153,10 @@ export function ImageDialog({ mode, opened, initial, intent, onSubmit, onClose }
         }
     };
     const convertButton = (_jsx(Button, { size: "xs", variant: "light", leftSection: _jsx(IconPhotoDown, { size: 14 }), loading: converting, disabled: !baseSrc, onClick: () => convert(baseSrc), children: "Convert to embedded image" }));
-    const detailsPanel = (_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' && (_jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, style: { wordBreak: 'break-all' }, children: initial?.linkType === 'embedded' ? 'Embedded in the document' : `Linked from ${initial?.src}` }), initial?.linkType === 'linked' && allowEmbedded && (_jsxs(Group, { gap: "xs", children: [convertButton, _jsx(Text, { size: "xs", c: "dimmed", children: "Downloads a copy into the document, so it can be cropped, rotated and resized." })] }))] })), source === 'linked' && (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/photo.jpg", value: url, onChange: (e) => {
-                            setUrl(e.currentTarget.value);
-                            setPixelSrc(null);
-                            resetSize();
-                        }, "data-autofocus": intent !== 'caption' ? true : undefined }), allowEmbedded && (_jsx(Checkbox, { label: "Embed a copy in the document", description: "Downloads the image so it can be edited and no longer depends on the URL.", checked: embedCopy, onChange: (e) => setEmbedCopy(e.currentTarget.checked) }))] })), source === 'embedded' &&
-                (convertedFromUrl ? (_jsx(Text, { size: "sm", c: "dimmed", children: "Converted from the URL: a copy will be embedded in the document." })) : (_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": intent === 'caption' ? true : undefined }))] }));
-    const sizeSection = (_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: () => {
-                            if (!natural)
-                                return;
-                            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.` : ''] })] }));
-    const editPanel = canEditPixels ? (_jsxs(Stack, { gap: "md", children: [_jsx(ImageCropper, { src: effectiveSrc, canReset: pixelSrc !== null, onApply: (edited) => {
-                    setPixelSrc(edited);
-                    resetSize();
-                }, onReset: () => {
-                    setPixelSrc(null);
-                    resetSize(source === 'keep');
-                } }), _jsx(Divider, { label: "Size", labelPosition: "left" }), sizeSection] })) : (_jsxs(Stack, { gap: "sm", align: "flex-start", children: [_jsx(Text, { size: "sm", children: "This image is linked from a URL, so it can't be cropped, rotated or resized here. Convert it to an embedded image to edit it." }), convertButton] }));
-    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: "edit", disabled: !effectiveSrc, children: "Crop & size" })] }), _jsx(Tabs.Panel, { value: "details", children: detailsPanel }), _jsx(Tabs.Panel, { value: "edit", children: editPanel })] })) : (detailsPanel), 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' })] })] }) }) }));
+    return (_jsx(Modal, { opened: opened, onClose: onClose, title: editing ? 'Edit image' : 'Insert image', centered: true, size: "sm", children: _jsx("form", { onSubmit: handleSubmit, children: _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' && (_jsxs(Stack, { gap: 6, children: [_jsx(Text, { size: "sm", c: "dimmed", lineClamp: 2, style: { wordBreak: 'break-all' }, children: initial?.linkType === 'embedded' ? 'Embedded in the document' : `Linked from ${initial?.src}` }), initial?.linkType === 'linked' && allowEmbedded && (_jsxs(Group, { gap: "xs", children: [convertButton, _jsx(Text, { size: "xs", c: "dimmed", children: "Downloads a copy into the document, so it can be cropped, rotated and resized." })] }))] })), source === 'linked' && (_jsxs(_Fragment, { children: [_jsx(TextInput, { label: "Image URL", placeholder: "https://example.com/photo.jpg", value: url, onChange: (e) => setUrl(e.currentTarget.value), "data-autofocus": intent !== 'caption' ? true : undefined }), allowEmbedded && (_jsx(Checkbox, { label: "Embed a copy in the document", description: "Downloads the image so it can be edited and no longer depends on the URL.", checked: embedCopy, onChange: (e) => setEmbedCopy(e.currentTarget.checked) }))] })), source === 'embedded' &&
+                        (convertedFromUrl ? (_jsx(Text, { size: "sm", c: "dimmed", children: "Converted from the URL: a copy will be embedded in the document." })) : (_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": intent === 'caption' ? true : undefined })), 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.6-dev.51",
+  "version": "0.1.6-dev.56",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {