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

package/dist/image/ImageComponent.d.ts

@@ -12,8 +12,9 @@ interface ImageComponentProps {
 }
 /**
  * An image in the document. Click selects it (Delete/Backspace removes it),
- * drag the corner handle to resize, double-click or right-click for the edit
- * dialog and menu (edit image, add/edit/remove caption, delete). The caption
+ * drag the corner handle to resize an embedded image, double-click or
+ * right-click for the edit dialog and menu (edit image, convert a linked image
+ * to embedded, add/edit/remove caption, delete). The caption
  * is shown as plain text under the image — it is edited in the dialog, not in
  * place.
  */

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;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BAsM9G"}
+{"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"}

package/dist/image/ImageComponent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Menu } from '@mantine/core';
-import { IconPhotoEdit, IconTextCaption, IconTrash, IconX } from '@tabler/icons-react';
+import { 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';
@@ -15,8 +15,9 @@ function isImageNode(node) {
 const MIN_WIDTH = 32;
 /**
  * An image in the document. Click selects it (Delete/Backspace removes it),
- * drag the corner handle to resize, double-click or right-click for the edit
- * dialog and menu (edit image, add/edit/remove caption, delete). The caption
+ * drag the corner handle to resize an embedded image, double-click or
+ * right-click for the edit dialog and menu (edit image, convert a linked image
+ * to embedded, add/edit/remove caption, delete). The caption
  * is shown as plain text under the image — it is edited in the dialog, not in
  * place.
  */
@@ -122,10 +123,10 @@ export function ImageComponent({ nodeKey, src, altText, caption, linkType, width
             clearSelection();
             setSelected(true);
             setMenu({ x: e.clientX, y: e.clientY });
-        }, children: [_jsxs("span", { className: "likhari-image-wrap", children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: shownWidth, draggable: false }), isSelected && (_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) => {
+        }, 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" }), options.allowCaption && (_jsx(Menu.Item, { leftSection: _jsx(IconTextCaption, { size: 16, stroke: 1.75 }), onClick: () => setDialog({ focus: '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 }, initialFocus: dialog?.focus, 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: () => 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: () => {
                     setDialog(null);
                     editor.focus();
                 } })] }));

package/dist/image/ImageCropper.d.ts

@@ -8,7 +8,8 @@ export interface ImageCropperProps {
     onReset: () => void;
 }
 /** 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 declare function ImageCropper({ src, onApply, canReset, onReset }: ImageCropperProps): import("react").JSX.Element;
+ * drag its handles to resize it or drag inside it to move it, then "Apply crop".
+ * Each operation re-renders the pixels, so it needs an image the canvas may read
+ * (an embedded image). */
+export declare function ImageCropper({ src, onApply, canReset, onReset, }: ImageCropperProps): import("react").JSX.Element;
 //# sourceMappingURL=ImageCropper.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropper.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;yEAEyE;AACzE,wBAAgB,YAAY,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,iBAAiB,+BA+JlF"}
+{"version":3,"file":"ImageCropper.d.ts","sourceRoot":"","sources":["../../src/image/ImageCropper.tsx"],"names":[],"mappings":"AA+CA,MAAM,WAAW,iBAAiB;IAChC,4DAA4D;IAC5D,GAAG,EAAE,MAAM,CAAC;IACZ,kDAAkD;IAClD,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;0BAG0B;AAC1B,wBAAgB,YAAY,CAAC,EAC3B,GAAG,EACH,OAAO,EACP,QAAQ,EACR,OAAO,GACR,EAAE,iBAAiB,+BAyOnB"}

package/dist/image/ImageCropper.js

@@ -1,18 +1,27 @@
 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 };
+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";
+import { MIN_CROP, moveRect, rectFromDrag, resizeRect, } from "./cropMath.js";
+const ASPECTS = {
+    free: null,
+    "1:1": 1,
+    "4:3": 4 / 3,
+    "16:9": 16 / 9,
+};
+const HANDLES = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
 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 }) {
+ * drag its handles to resize it or drag inside it to move it, then "Apply crop".
+ * Each operation re-renders the pixels, so it needs an image the canvas may read
+ * (an embedded image). */
+export function ImageCropper({ src, onApply, canReset, onReset, }) {
     const imgRef = useRef(null);
-    const dragStart = useRef(null);
+    const drag = useRef(null);
     const [rect, setRect] = useState(null);
-    const [aspect, setAspect] = useState('free');
+    const [aspect, setAspect] = useState("free");
+    const [natural, setNatural] = useState(null);
     const [busy, setBusy] = useState(false);
     const [error, setError] = useState(null);
     const run = async (op) => {
@@ -23,55 +32,67 @@ export function ImageCropper({ src, onApply, canReset, onReset }) {
             setRect(null);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : 'Could not edit the image');
+            setError(err instanceof Error ? err.message : "Could not edit the image");
         }
         finally {
             setBusy(false);
         }
     };
-    const pointerFraction = (event) => {
+    const pointer = (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 };
+        return {
+            point: {
+                x: clamp((event.clientX - box.left) / box.width),
+                y: clamp((event.clientY - box.top) / box.height),
+            },
+            box: { width: box.width, height: box.height },
+        };
     };
     const onDown = (event) => {
-        const p = pointerFraction(event);
+        const p = pointer(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 target = event.target;
+        const handle = target.dataset.handle;
+        if (handle && rect) {
+            drag.current = { mode: "resize", handle, origin: rect };
+        }
+        else if (target.dataset.move && rect) {
+            drag.current = { mode: "move", start: p.point, origin: rect };
+        }
+        else {
+            drag.current = { mode: "new", anchor: p.point };
+            setRect({ x: p.point.x, y: p.point.y, w: 0, h: 0 });
+        }
     };
     const onMove = (event) => {
-        const start = dragStart.current;
-        const p = pointerFraction(event);
-        if (!start || !p)
+        const current = drag.current;
+        const p = pointer(event);
+        if (!current || !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) });
+        if (current.mode === "new")
+            setRect(rectFromDrag(current.anchor, p.point, ratio, p.box));
+        else if (current.mode === "move")
+            setRect(moveRect(current.origin, p.point.x - current.start.x, p.point.y - current.start.y));
+        else
+            setRect(resizeRect(current.origin, current.handle, p.point, ratio, p.box));
     };
     const onUp = () => {
-        dragStart.current = null;
+        const wasNew = drag.current?.mode === "new";
+        drag.current = null;
         // A click without a drag isn't a selection.
-        setRect((r) => (r && (r.w < 0.02 || r.h < 0.02) ? null : r));
+        if (wasNew)
+            setRect((r) => (r && (r.w < MIN_CROP || r.h < MIN_CROP) ? 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: () => {
+    const selectionSize = rect && natural && rect.w > 0 && rect.h > 0
+        ? `${Math.max(1, Math.round(rect.w * natural.width))} × ${Math.max(1, Math.round(rect.h * natural.height))} px`
+        : null;
+    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();
@@ -79,9 +100,19 @@ export function ImageCropper({ src, onApply, canReset, onReset }) {
                             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 }))] }));
+                            { value: "free", label: "Free" },
+                            { value: "1:1", label: "1:1" },
+                            { value: "4:3", label: "4:3" },
+                            { value: "16:9", label: "16:9" },
+                        ] })] }), _jsx("div", { className: "likhari-cropper-stage", onPointerDown: onDown, onPointerMove: onMove, onPointerUp: onUp, onPointerCancel: onUp, children: _jsxs("div", { className: "likhari-cropper-frame", children: [_jsx("img", { ref: imgRef, src: src, alt: "", draggable: false, className: "likhari-cropper-image", onLoad: (e) => setNatural({
+                                width: e.currentTarget.naturalWidth,
+                                height: e.currentTarget.naturalHeight,
+                            }) }), rect && rect.w > 0 && rect.h > 0 && (_jsx("div", { className: "likhari-cropper-selection", "data-move": "true", style: {
+                                left: `${rect.x * 100}%`,
+                                top: `${rect.y * 100}%`,
+                                width: `${rect.w * 100}%`,
+                                height: `${rect.h * 100}%`,
+                            }, children: HANDLES.map((handle) => (_jsx("span", { className: "likhari-cropper-handle", "data-handle": handle }, handle))) }))] }) }), _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "xs", c: "dimmed", children: selectionSize
+                            ? `Selection: ${selectionSize}. Drag the handles to resize it, or drag inside to move it.`
+                            : "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

@@ -10,21 +10,30 @@ export interface ImageDialogValue {
     height: number | null;
 }
 export interface ImageDialogProps {
-    /** `insert`: pick an image. `edit`: also change its source, size, crop and rotation. */
+    /** `insert`: pick an image. `edit`: also change its source, and — for embedded
+     * images only — 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';
+    /** What to do as the dialog opens: focus the caption field, or start converting
+     * a linked image to an embedded one. */
+    intent?: 'caption' | 'convert';
     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.
+ * 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.
  */
-export declare function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onClose }: ImageDialogProps): import("react").JSX.Element;
+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":"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"}
+{"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"}

package/dist/image/ImageDialog.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { Alert, Button, Checkbox, Divider, FileInput, Group, Modal, NumberInput, SegmentedControl, Stack, Tabs, Text, TextInput, } from '@mantine/core';
+import { IconPhotoDown } from '@tabler/icons-react';
 import { ACCEPTED_IMAGE_TYPES, normalizeImageUrl, validateImageFile } from './imageUrl.js';
-import { dataUrlBytes, dataUrlToFile, fitDimension, mimeFromSrc } from './imageEdit.js';
+import { dataUrlBytes, dataUrlToFile, fetchImageAsDataUrl, fitDimension, mimeFromSrc } from './imageEdit.js';
 import { ImageCropper } from './ImageCropper.js';
 import { useImageOptions } from './ImageOptionsContext.js';
 function readAsDataUrl(file) {
@@ -34,18 +35,26 @@ function useNaturalSize(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.
+ * 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.
  */
-export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onClose }) {
+export function ImageDialog({ mode, opened, initial, intent, 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 [embedCopy, setEmbedCopy] = useState(false);
     const [file, setFile] = useState(null);
     const [fileSrc, setFileSrc] = useState(null);
     const [altText, setAltText] = useState('');
@@ -56,12 +65,14 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
     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);
         setFile(null);
         setFileSrc(null);
         setAltText(initial?.altText ?? '');
@@ -72,12 +83,19 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
         setPixelSrc(null);
         setError(null);
         setBusy(false);
+        setConverting(false);
+        if (intent === 'convert' && initial?.linkType === 'linked')
+            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);
@@ -86,6 +104,8 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
     const changeSource = (next) => {
         setSource(next);
         setPixelSrc(null);
+        setFile(null);
+        setFileSrc(null);
         resetSize(next === 'keep');
         setError(null);
     };
@@ -109,6 +129,28 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
             setError(err instanceof Error ? err.message : 'Could not read the file');
         }
     };
+    /** Downloads a linked image and switches the dialog to its embedded copy. */
+    const convert = async (src) => {
+        if (!src)
+            return;
+        setConverting(true);
+        setError(null);
+        try {
+            const dataUrl = await fetchImageAsDataUrl(src);
+            if (dataUrlBytes(dataUrl) > maxSizeMB * 1024 * 1024)
+                throw new Error(`Image is larger than ${maxSizeMB} MB`);
+            setSource('embedded');
+            setFile(null);
+            setFileSrc(dataUrl);
+            setPixelSrc(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Could not convert the image');
+        }
+        finally {
+            setConverting(false);
+        }
+    };
     const onSizeChange = (changed, value) => {
         const n = typeof value === 'number' ? value : null;
         if (n === null) {
@@ -133,10 +175,15 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
         }
         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);
+            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);
+            if (!newPixels && source === 'linked' && embedCopy) {
+                setBusy(true);
+                newPixels = await fetchImageAsDataUrl(effectiveSrc);
+            }
             if (newPixels) {
                 if (dataUrlBytes(newPixels) > maxSizeMB * 1024 * 1024) {
                     setError(`Image is larger than ${maxSizeMB} MB`);
@@ -150,7 +197,6 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
                     src = await onImageUpload(upload);
                     if (!normalizeImageUrl(src)) {
                         setError('The upload handler returned an unusable image URL');
-                        setBusy(false);
                         return;
                     }
                 }
@@ -174,21 +220,29 @@ export function ImageDialog({ mode, opened, initial, initialFocus, onSubmit, onC
             setBusy(false);
         }
     };
-    const sourceFields = (_jsxs(Stack, { gap: "sm", children: [(editing || (allowLinked && allowEmbedded)) && (_jsx(SegmentedControl, { fullWidth: true, value: source, onChange: (v) => changeSource(v), data: [
+    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' && (_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);
+                ] })), 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();
-                }, "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' })] })] }) }) }));
+                }, 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' })] })] }) }) }));
 }

package/dist/image/cropMath.d.ts

@@ -0,0 +1,35 @@
+import type { CropRect } from './imageEdit.js';
+export type CropHandle = 'n' | 's' | 'e' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+/** Smallest selection, as a fraction of the image. */
+export declare const MIN_CROP = 0.02;
+/** Size of the image's on-screen box in px; needed to keep an aspect ratio,
+ * since rectangle coordinates are fractions. */
+export interface Box {
+    width: number;
+    height: number;
+}
+/**
+ * A new selection dragged from `anchor` to `point` (both fractions). With a
+ * `ratio` (width / height, in pixels) the selection keeps it, shrinking to stay
+ * inside the image.
+ */
+export declare function rectFromDrag(anchor: {
+    x: number;
+    y: number;
+}, point: {
+    x: number;
+    y: number;
+}, ratio: number | null, box: Box): CropRect;
+/** Moves a selection by (dx, dy) fractions, keeping it inside the image. */
+export declare function moveRect(rect: CropRect, dx: number, dy: number): CropRect;
+/**
+ * Resizes a selection by dragging one of its handles to `point` (a fraction).
+ * Corners anchor the opposite corner; edges move one side. With a `ratio` the
+ * aspect is kept (an edge handle then grows the other dimension around the
+ * selection's centre). Never smaller than MIN_CROP, never outside the image.
+ */
+export declare function resizeRect(rect: CropRect, handle: CropHandle, point: {
+    x: number;
+    y: number;
+}, ratio: number | null, box: Box): CropRect;
+//# sourceMappingURL=cropMath.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cropMath.d.ts","sourceRoot":"","sources":["../../src/image/cropMath.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3E,sDAAsD;AACtD,eAAO,MAAM,QAAQ,OAAO,CAAC;AAE7B;gDACgD;AAChD,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAID;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,CAexI;AAED,4EAA4E;AAC5E,wBAAgB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,QAAQ,CAEzE;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,QAAQ,CAwDxI"}

package/dist/image/cropMath.js

@@ -0,0 +1,92 @@
+/** Smallest selection, as a fraction of the image. */
+export const MIN_CROP = 0.02;
+const clamp = (v, min = 0, max = 1) => Math.min(Math.max(v, min), max);
+/**
+ * A new selection dragged from `anchor` to `point` (both fractions). With a
+ * `ratio` (width / height, in pixels) the selection keeps it, shrinking to stay
+ * inside the image.
+ */
+export function rectFromDrag(anchor, point, ratio, box) {
+    let dx = clamp(point.x) - anchor.x;
+    let dy = clamp(point.y) - anchor.y;
+    if (ratio) {
+        let widthPx = Math.abs(dx) * box.width;
+        let heightPx = widthPx / ratio;
+        const maxHeightPx = (dy >= 0 ? 1 - anchor.y : anchor.y) * box.height;
+        if (heightPx > maxHeightPx) {
+            heightPx = maxHeightPx;
+            widthPx = heightPx * ratio;
+        }
+        dx = (dx >= 0 ? 1 : -1) * (widthPx / box.width);
+        dy = (dy >= 0 ? 1 : -1) * (heightPx / box.height);
+    }
+    return { x: Math.min(anchor.x, anchor.x + dx), y: Math.min(anchor.y, anchor.y + dy), w: Math.abs(dx), h: Math.abs(dy) };
+}
+/** Moves a selection by (dx, dy) fractions, keeping it inside the image. */
+export function moveRect(rect, dx, dy) {
+    return { ...rect, x: clamp(rect.x + dx, 0, 1 - rect.w), y: clamp(rect.y + dy, 0, 1 - rect.h) };
+}
+/**
+ * Resizes a selection by dragging one of its handles to `point` (a fraction).
+ * Corners anchor the opposite corner; edges move one side. With a `ratio` the
+ * aspect is kept (an edge handle then grows the other dimension around the
+ * selection's centre). Never smaller than MIN_CROP, never outside the image.
+ */
+export function resizeRect(rect, handle, point, ratio, box) {
+    const left = rect.x;
+    const right = rect.x + rect.w;
+    const top = rect.y;
+    const bottom = rect.y + rect.h;
+    const px = clamp(point.x);
+    const py = clamp(point.y);
+    if (handle.length === 2) {
+        // Corner: the opposite corner stays put.
+        const anchor = { x: handle.includes('w') ? right : left, y: handle.includes('n') ? bottom : top };
+        return rectFromDrag(anchor, { x: px, y: py }, ratio, box);
+    }
+    const horizontal = handle === 'e' || handle === 'w';
+    if (!ratio) {
+        const next = { left, right, top, bottom };
+        if (handle === 'w')
+            next.left = Math.min(px, right - MIN_CROP);
+        if (handle === 'e')
+            next.right = Math.max(px, left + MIN_CROP);
+        if (handle === 'n')
+            next.top = Math.min(py, bottom - MIN_CROP);
+        if (handle === 's')
+            next.bottom = Math.max(py, top + MIN_CROP);
+        return { x: next.left, y: next.top, w: next.right - next.left, h: next.bottom - next.top };
+    }
+    // Edge with a locked ratio: the dragged side sets one dimension, the other follows.
+    const cx = left + rect.w / 2;
+    const cy = top + rect.h / 2;
+    if (horizontal) {
+        const fixed = handle === 'e' ? left : right;
+        let w = Math.max(Math.abs(px - fixed), MIN_CROP);
+        let h = w * box.width / ratio / box.height;
+        if (h > 1) {
+            h = 1;
+            w = (h * box.height * ratio) / box.width;
+        }
+        // Stay inside the image horizontally.
+        const room = handle === 'e' ? 1 - left : right;
+        if (w > room) {
+            w = room;
+            h = (w * box.width) / ratio / box.height;
+        }
+        return { x: handle === 'e' ? left : right - w, y: clamp(cy - h / 2, 0, 1 - h), w, h };
+    }
+    const fixed = handle === 's' ? top : bottom;
+    let h = Math.max(Math.abs(py - fixed), MIN_CROP);
+    let w = (h * box.height * ratio) / box.width;
+    if (w > 1) {
+        w = 1;
+        h = (w * box.width) / ratio / box.height;
+    }
+    const room = handle === 's' ? 1 - top : bottom;
+    if (h > room) {
+        h = room;
+        w = (h * box.height * ratio) / box.width;
+    }
+    return { x: clamp(cx - w / 2, 0, 1 - w), y: handle === 's' ? top : bottom - h, w, h };
+}

package/dist/image/imageEdit.d.ts

@@ -24,6 +24,10 @@ 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 declare const CANNOT_DOWNLOAD = "Couldn't download this image (its server doesn't allow it). Download the file and upload it instead.";
+/** Downloads an image and returns it as a base64 data URI, to embed it in the
+ * document. Needs the image's server to allow cross-origin reads (CORS). */
+export declare function fetchImageAsDataUrl(url: string, fetchImpl?: typeof fetch): Promise<string>;
 export type PixelOp = {
     type: 'rotate';
     direction: 'cw' | 'ccw';

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

@@ -1 +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"}
+{"version":3,"file":"imageEdit.d.ts","sourceRoot":"","sources":["../../src/image/imageEdit.ts"],"names":[],"mappings":"AAEA,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,eAAO,MAAM,eAAe,yGAC4E,CAAC;AAEzG;4EAC4E;AAC5E,wBAAsB,mBAAmB,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,GAAE,OAAO,KAAa,GAAG,OAAO,CAAC,MAAM,CAAC,CAiBvG;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"}

package/dist/image/imageEdit.js

@@ -1,3 +1,4 @@
+import { ACCEPTED_IMAGE_TYPES } from './imageUrl.js';
 /** 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 function toPixelRect(rect, width, height) {
@@ -44,6 +45,31 @@ export function dataUrlToFile(dataUrl, name) {
         bytes[i] = binary.charCodeAt(i);
     return new File([bytes], name, { type: mime });
 }
+export const CANNOT_DOWNLOAD = "Couldn't download this image (its server doesn't allow it). Download the file and upload it instead.";
+/** Downloads an image and returns it as a base64 data URI, to embed it in the
+ * document. Needs the image's server to allow cross-origin reads (CORS). */
+export async function fetchImageAsDataUrl(url, fetchImpl = fetch) {
+    if (/^data:image\//i.test(url))
+        return url;
+    let blob;
+    try {
+        const response = await fetchImpl(url, { mode: 'cors' });
+        if (!response.ok)
+            throw new Error('bad status');
+        blob = await response.blob();
+    }
+    catch {
+        throw new Error(CANNOT_DOWNLOAD);
+    }
+    if (!ACCEPTED_IMAGE_TYPES.includes(blob.type))
+        throw new Error("That URL doesn't point to a PNG, JPEG, GIF, WebP or SVG image");
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(new Error(CANNOT_DOWNLOAD));
+        reader.readAsDataURL(blob);
+    });
+}
 /** 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 function loadImage(src) {

package/dist/theme/editor.css

@@ -294,6 +294,7 @@
   display: inline-block;
   align-self: center;
   max-width: 100%;
+  padding: 8px;
   overflow: hidden;
   line-height: 0;
   cursor: crosshair;
@@ -301,6 +302,12 @@
   user-select: none;
 }
 
+.likhari-cropper-frame {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
 .likhari-cropper-image {
   display: block;
   max-width: 100%;
@@ -312,9 +319,29 @@
   border: 2px solid #fff;
   outline: 1px solid rgba(0, 0, 0, 0.5);
   box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
-  pointer-events: none;
+  cursor: move;
 }
 
+.likhari-cropper-handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  border: 1px solid rgba(0, 0, 0, 0.6);
+  border-radius: 2px;
+  background: #fff;
+  /* 12px handles on small selections would overlap; keep them on the border. */
+  transform: translate(-50%, -50%);
+}
+
+.likhari-cropper-handle[data-handle='nw'] { left: 0; top: 0; cursor: nwse-resize; }
+.likhari-cropper-handle[data-handle='n'] { left: 50%; top: 0; cursor: ns-resize; }
+.likhari-cropper-handle[data-handle='ne'] { left: 100%; top: 0; cursor: nesw-resize; }
+.likhari-cropper-handle[data-handle='e'] { left: 100%; top: 50%; cursor: ew-resize; }
+.likhari-cropper-handle[data-handle='se'] { left: 100%; top: 100%; cursor: nwse-resize; }
+.likhari-cropper-handle[data-handle='s'] { left: 50%; top: 100%; cursor: ns-resize; }
+.likhari-cropper-handle[data-handle='sw'] { left: 0; top: 100%; cursor: nesw-resize; }
+.likhari-cropper-handle[data-handle='w'] { left: 0; top: 50%; cursor: ew-resize; }
+
 /* Link menu: the URL item shows one truncated line. */
 .likhari-link-menu-url {
   max-width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inshapardaz/likhari-react",
-  "version": "0.1.6-dev.44",
+  "version": "0.1.6-dev.48",
   "description": "React implementation of the Likhari editor, built on @lexical/react.",
   "license": "MIT",
   "repository": {
@@ -13,6 +13,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "development": "./src/index.ts",
       "import": "./dist/index.js"
     },
     "./package.json": "./package.json"