@inshapardaz/likhari-react 0.1.5-dev.41 → 0.1.6-dev.43

package/dist/EditorRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGA8HrB,CAAC"}
+{"version":3,"file":"EditorRoot.d.ts","sourceRoot":"","sources":["../src/EditorRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAS1D,OAAO,KAAK,EAAe,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAyB,KAAK,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAwB,KAAK,mBAAmB,EAAE,KAAK,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKzH,OAAO,EAAyB,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAIjE,MAAM,WAAW,oBAAoB;IACnC,MAAM,EAAE,OAAO,CAAC,QAAQ,EAAE,cAAc,GAAG,YAAY,CAAC,CAAC;IACzD,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,oBAAoB,CAAC;IACtC,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC/B,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,cAAc,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,KAAK,IAAI,CAAC;IACrD;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,MAAM,EAAE,QAAQ,GAAG,MAAM,CAAC;IACrC,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IAClD,iBAAiB,IAAI,OAAO,CAAC;IAC7B,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC;IACnC,KAAK,IAAI,IAAI,CAAC;CACf;AAQD,eAAO,MAAM,UAAU,uGA2IrB,CAAC"}

package/dist/EditorRoot.js

@@ -16,6 +16,7 @@ import { EditorThemeProvider } from './theme/EditorThemeProvider.js';
 import { Toolbar } from './components/Toolbar.js';
 import { injectUrduWebFontsCss } from './fonts/index.js';
 import { LinkPastePlugin } from './plugins/LinkPastePlugin.js';
+import { ImageOptionsContext } from './image/ImageOptionsContext.js';
 function initialEditorStateJson(initialContent) {
     if (!initialContent)
         return undefined;
@@ -30,6 +31,13 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
         if (config.font.family || locale !== 'en')
             injectUrduWebFontsCss();
     }, [config.font.family, locale]);
+    const imageOptions = useMemo(() => ({
+        allowLinked: config.images.linked,
+        allowEmbedded: config.images.embedded,
+        allowCaption: config.images.caption,
+        maxSizeMB: config.images.maxSizeMB,
+        onImageUpload,
+    }), [config.images.linked, config.images.embedded, config.images.caption, config.images.maxSizeMB, onImageUpload]);
     const editorStateRef = useRef(null);
     const lastSavedJsonRef = useRef(null);
     const [isDirty, setIsDirty] = useState(false);
@@ -92,5 +100,5 @@ export const EditorRoot = forwardRef(function EditorRoot({ documentId, initialCo
         onSave?.(content, format);
     };
     const dir = locale === 'en' ? 'ltr' : 'rtl';
-    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, onImageUpload: onImageUpload, direction: dir }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }));
+    return (_jsx(EditorThemeProvider, { theme: theme, colorScheme: colorScheme, children: _jsx("div", { className: "likhari-root", dir: dir, ref: rootElementRef, "data-document-id": documentId, style: { height: typeof height === 'number' ? `${height}px` : height }, children: _jsx(ImageOptionsContext.Provider, { value: imageOptions, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Toolbar, { config: config, onSave: handleSave, isDirty: isDirty, showSave: showSave, fontOptions: fontOptions, direction: dir }), _jsx("div", { className: "likhari-canvas", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "likhari-content-editable", dir: dir, "aria-label": "Editor content" }), placeholder: _jsx("div", { className: "likhari-placeholder", children: placeholder }), ErrorBoundary: LexicalErrorBoundary }) }), config.history && _jsx(HistoryPlugin, {}), (config.lists.bullet || config.lists.numbered || config.lists.check) && _jsx(ListPlugin, {}), config.links && _jsx(LinkPlugin, {}), config.links && _jsx(LinkPastePlugin, {}), _jsx(OnChangePlugin, { onChange: handleChange })] }) }) }) }));
 });

package/dist/components/Toolbar.d.ts

@@ -9,7 +9,6 @@ export interface ToolbarProps {
     fontOptions?: FontOption[];
     /** Text direction of the canvas; picks which default font and size are pre-selected. */
     direction?: 'ltr' | 'rtl';
-    onImageUpload?: (file: File) => Promise<string>;
 }
-export declare function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, fontOptions, direction }: ToolbarProps): import("react").JSX.Element;
+export declare function Toolbar({ config, onSave, isDirty, showSave, fontOptions, direction }: ToolbarProps): import("react").JSX.Element;
 //# sourceMappingURL=Toolbar.d.ts.map

package/dist/components/Toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAmPtG,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;CACjD;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAkC,EAAE,SAAiB,EAAE,EAAE,YAAY,+BAyoBhJ"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../src/components/Toolbar.tsx"],"names":[],"mappings":"AA4CA,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,2BAA2B,CAAC;AAC7E,OAAO,EAA6D,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAmPtG,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,2BAA2B,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,wFAAwF;IACxF,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;CAC3B;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,WAAkC,EAAE,SAAiB,EAAE,EAAE,YAAY,+BAgoBjI"}

package/dist/components/Toolbar.js

@@ -73,7 +73,7 @@ function LinkMenuItems({ url, onEdit, onRemove }) {
             // Not a URL the editor would accept (e.g. loaded from a document): show it, don't make it clickable.
             _jsx(Menu.Item, { disabled: true, title: url, className: "likhari-link-menu-url", children: url || '(no URL)' })), _jsx(Menu.Item, { leftSection: _jsx(IconPencil, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onEdit, children: "Edit link" }), _jsx(Menu.Item, { color: "red", leftSection: _jsx(IconLinkOff, { size: ICON_SIZE, stroke: ICON_STROKE }), onMouseDown: (e) => e.preventDefault(), onClick: onRemove, children: "Remove link" })] }));
 }
-export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr' }) {
+export function Toolbar({ config, onSave, isDirty, showSave, fontOptions = DEFAULT_FONT_OPTIONS, direction = 'ltr' }) {
     const [editor] = useLexicalComposerContext();
     const [state, setState] = useState(INITIAL_STATE);
     const updateToolbar = useCallback(() => {
@@ -425,5 +425,5 @@ export function Toolbar({ config, onSave, isDirty, showSave, onImageUpload, font
                 }, position: "bottom-start", withinPortal: true, shadow: "sm", width: 240, children: [_jsx(Menu.Target, { children: _jsx("span", { "aria-hidden": "true", style: { position: 'fixed', left: linkContext?.x ?? -9999, top: linkContext?.y ?? -9999, width: 1, height: 1, pointerEvents: 'none' } }) }), _jsx(Menu.Dropdown, { children: _jsx(LinkMenuItems, { url: linkContext?.url ?? '', onEdit: () => {
                                 restoreSelection();
                                 openLinkDialog();
-                            }, onRemove: removeLink }) })] })), showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && (_jsx(ToolbarButton, { icon: IconPhoto, title: "Insert image", onClick: openImageDialog })), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": "More formatting", title: "More formatting", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsxs(Menu.Dropdown, { children: [fmt.strikethrough && (_jsx(OverflowItem, { icon: IconStrikethrough, label: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: runOverflowAction(() => formatText('strikethrough')) })), fmt.superscript && (_jsx(OverflowItem, { icon: IconSuperscript, label: "Superscript", active: state.activeFormats.has('superscript'), onClick: runOverflowAction(() => formatText('superscript')) })), fmt.subscript && (_jsx(OverflowItem, { icon: IconSubscript, label: "Subscript", active: state.activeFormats.has('subscript'), onClick: runOverflowAction(() => formatText('subscript')) })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconLetterCaseUpper, label: "UPPERCASE", onClick: runOverflowAction(() => applyCaseTransform('upper')) }), _jsx(OverflowItem, { icon: IconLetterCaseLower, label: "lowercase", onClick: runOverflowAction(() => applyCaseTransform('lower')) }), _jsx(OverflowItem, { icon: IconLetterCase, label: "Capitalize", onClick: runOverflowAction(() => applyCaseTransform('capitalize')) })] })), fmt.clearFormatting && _jsx(OverflowItem, { icon: IconClearFormatting, label: "Clear formatting", onClick: runOverflowAction(clearFormatting) }), config.indent && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconIndentDecrease, label: "Outdent", onClick: runOverflowAction(() => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)) }), _jsx(OverflowItem, { icon: IconIndentIncrease, label: "Indent", onClick: runOverflowAction(() => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)) })] }))] })] })), (config.images.linked || config.images.embedded) && (_jsx(ImageDialog, { opened: imageDialogOpen, allowLinked: config.images.linked, allowEmbedded: config.images.embedded, allowCaption: config.images.caption, maxSizeMB: config.images.maxSizeMB, onImageUpload: onImageUpload, onSubmit: insertImage, onClose: closeImageDialog })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
+                            }, onRemove: removeLink }) })] })), showStubInsertGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [(config.images.linked || config.images.embedded) && (_jsx(ToolbarButton, { icon: IconPhoto, title: "Insert image", onClick: openImageDialog })), config.poetry.enabled && _jsx(StubButton, { icon: IconFeather, title: "Poetry blocks" })] })), showLanguageGroup && (_jsxs("div", { className: "likhari-toolbar-group likhari-toolbar-group--collapse-tablet", children: [config.language.autocorrect && _jsx(StubButton, { icon: IconWand, title: "Auto-correct" }), config.language.textCleanup && _jsx(StubButton, { icon: IconSparkles, title: "Text cleanup" }), config.language.spellCheck && _jsx(StubButton, { icon: IconAbc, title: "Spell-checker" })] })), showOverflowMenu && (_jsxs(Menu, { position: "bottom-end", withinPortal: true, shadow: "sm", width: 210, closeOnItemClick: true, onOpen: snapshotSelection, children: [_jsx(Menu.Target, { children: _jsx("button", { type: "button", className: "likhari-toolbar-button", "aria-label": "More formatting", title: "More formatting", onMouseDown: (e) => e.preventDefault(), children: _jsx(IconDots, { size: ICON_SIZE, stroke: ICON_STROKE }) }) }), _jsxs(Menu.Dropdown, { children: [fmt.strikethrough && (_jsx(OverflowItem, { icon: IconStrikethrough, label: "Strikethrough", active: state.activeFormats.has('strikethrough'), onClick: runOverflowAction(() => formatText('strikethrough')) })), fmt.superscript && (_jsx(OverflowItem, { icon: IconSuperscript, label: "Superscript", active: state.activeFormats.has('superscript'), onClick: runOverflowAction(() => formatText('superscript')) })), fmt.subscript && (_jsx(OverflowItem, { icon: IconSubscript, label: "Subscript", active: state.activeFormats.has('subscript'), onClick: runOverflowAction(() => formatText('subscript')) })), fmt.caseTransforms && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconLetterCaseUpper, label: "UPPERCASE", onClick: runOverflowAction(() => applyCaseTransform('upper')) }), _jsx(OverflowItem, { icon: IconLetterCaseLower, label: "lowercase", onClick: runOverflowAction(() => applyCaseTransform('lower')) }), _jsx(OverflowItem, { icon: IconLetterCase, label: "Capitalize", onClick: runOverflowAction(() => applyCaseTransform('capitalize')) })] })), fmt.clearFormatting && _jsx(OverflowItem, { icon: IconClearFormatting, label: "Clear formatting", onClick: runOverflowAction(clearFormatting) }), config.indent && (_jsxs(_Fragment, { children: [_jsx(OverflowItem, { icon: IconIndentDecrease, label: "Outdent", onClick: runOverflowAction(() => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined)) }), _jsx(OverflowItem, { icon: IconIndentIncrease, label: "Indent", onClick: runOverflowAction(() => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined)) })] }))] })] })), (config.images.linked || config.images.embedded) && (_jsx(ImageDialog, { mode: "insert", opened: imageDialogOpen, onSubmit: insertImage, onClose: closeImageDialog })), config.links && (_jsx(LinkDialog, { opened: linkDialogOpen, initialUrl: state.linkUrl, showTextField: linkNeedsText, onSubmit: applyLink, onRemove: state.isLink ? removeLink : undefined, onClose: closeLinkDialog }))] }));
 }

package/dist/image/ImageComponent.d.ts

@@ -0,0 +1,22 @@
+import { type NodeKey } from 'lexical';
+import type { ImageLinkType } from './ImageNode.js';
+interface ImageComponentProps {
+    nodeKey: NodeKey;
+    src: string;
+    altText: string;
+    caption: string | null;
+    linkType: ImageLinkType;
+    /** Display width in px; null = natural size (height always follows the aspect ratio). */
+    width: number | null;
+    height: number | null;
+}
+/**
+ * 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
+ * is shown as plain text under the image — it is edited in the dialog, not in
+ * place.
+ */
+export declare function ImageComponent({ nodeKey, src, altText, caption, linkType, width, height }: ImageComponentProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ImageComponent.d.ts.map

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

@@ -0,0 +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"}

package/dist/image/ImageComponent.js

@@ -0,0 +1,132 @@
+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 { 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 { ImageDialog } from './ImageDialog.js';
+import { useImageOptions } from './ImageOptionsContext.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) {
+    return node?.getType() === 'image';
+}
+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
+ * is shown as plain text under the image — it is edited in the dialog, not in
+ * place.
+ */
+export function ImageComponent({ nodeKey, src, altText, caption, linkType, width, height }) {
+    const [editor] = useLexicalComposerContext();
+    const options = useImageOptions();
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const imageRef = useRef(null);
+    const figureRef = useRef(null);
+    const [menu, setMenu] = useState(null);
+    const [dialog, setDialog] = useState(null);
+    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
+    // selection into a range selection right after, undoing the node selection.
+    useEffect(() => {
+        return editor.registerCommand(CLICK_COMMAND, (event) => {
+            if (event.target !== imageRef.current)
+                return false;
+            clearSelection();
+            setSelected(true);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+    }, [editor, clearSelection, setSelected]);
+    const removeImage = useCallback(() => {
+        editor.update(() => {
+            $getNodeByKey(nodeKey)?.remove();
+        });
+    }, [editor, nodeKey]);
+    const onDelete = useCallback((event) => {
+        if (!isSelected || dialog || menu)
+            return false;
+        if (!$isNodeSelection($getSelection()))
+            return false;
+        event.preventDefault();
+        $getNodeByKey(nodeKey)?.remove();
+        return true;
+    }, [isSelected, dialog, 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);
+        return () => {
+            unregisterDelete();
+            unregisterBackspace();
+        };
+    }, [editor, onDelete]);
+    const updateNode = (change) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (isImageNode(node))
+                change(node);
+        });
+    };
+    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);
+        });
+        setDialog(null);
+        editor.focus();
+    };
+    // --- drag-to-resize: bottom-right handle, aspect ratio kept ---------------
+    const resizeStart = useRef(null);
+    const onResizeDown = (event) => {
+        const img = imageRef.current;
+        if (!img)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        const box = img.getBoundingClientRect();
+        resizeStart.current = {
+            x: event.clientX,
+            width: box.width,
+            ratio: img.naturalHeight && img.naturalWidth ? img.naturalHeight / img.naturalWidth : box.height / box.width,
+            max: figureRef.current?.clientWidth ?? box.width,
+        };
+        setLiveWidth(box.width);
+    };
+    const onResizeMove = (event) => {
+        const start = resizeStart.current;
+        if (!start)
+            return;
+        setLiveWidth(Math.round(Math.min(Math.max(start.width + (event.clientX - start.x), MIN_WIDTH), start.max)));
+    };
+    const onResizeUp = () => {
+        const start = resizeStart.current;
+        resizeStart.current = null;
+        if (start && liveWidth !== null) {
+            const w = Math.round(liveWidth);
+            updateNode((node) => node.setDimensions(w, Math.round(w * start.ratio)));
+        }
+        setLiveWidth(null);
+    };
+    const shownWidth = liveWidth ?? width ?? undefined;
+    return (_jsxs("figure", { ref: figureRef, className: "likhari-image-figure", "data-selected": isSelected ? 'true' : 'false', contentEditable: false, onDoubleClick: (e) => {
+            if (e.target === imageRef.current)
+                setDialog({});
+        }, onContextMenu: (e) => {
+            e.preventDefault();
+            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) => {
+                    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: () => {
+                    setDialog(null);
+                    editor.focus();
+                } })] }));
+}

package/dist/image/ImageCropper.d.ts

@@ -0,0 +1,14 @@
+export interface ImageCropperProps {
+    /** The image as it is now (original, or already edited). */
+    src: string;
+    /** Called with the edited image as a data URI. */
+    onApply: (edited: string) => void;
+    /** Whether there are edits to undo. */
+    canReset: boolean;
+    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;
+//# sourceMappingURL=ImageCropper.d.ts.map

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

@@ -0,0 +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"}

package/dist/image/ImageCropper.js

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

package/dist/image/ImageDialog.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,iBAAiB;IAChC,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,WAAW,EAAE,OAAO,CAAC;IACrB,kDAAkD;IAClD,aAAa,EAAE,OAAO,CAAC;IACvB,kEAAkE;IAClE,YAAY,EAAE,OAAO,CAAC;IACtB,yBAAyB;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IAChD,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAWD,iFAAiF;AACjF,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,WAAW,EACX,aAAa,EACb,YAAY,EACZ,SAAS,EACT,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE,gBAAgB,+BAmHlB"}
+{"version":3,"file":"ImageDialog.d.ts","sourceRoot":"","sources":["../../src/image/ImageDialog.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,wBAAwB;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wFAAwF;IACxF,IAAI,EAAE,QAAQ,GAAG,MAAM,CAAC;IACxB,MAAM,EAAE,OAAO,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,qDAAqD;IACrD,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAgCD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,gBAAgB,+BA4SvG"}

package/dist/image/ImageDialog.js

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

package/dist/image/ImageNode.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from 'react';
+import type { ReactElement } from 'react';
 import { DecoratorNode, type DOMExportOutput, type EditorConfig, type LexicalNode, type NodeKey, type SerializedLexicalNode, type Spread } from 'lexical';
 /** How the image's bytes are held: an external URL, or embedded in the
  * document (a base64 data URI, or a URL returned by the host's upload handler). */
@@ -23,9 +23,9 @@ export type SerializedImageNode = Spread<{
 }, SerializedLexicalNode>;
 /**
  * Block-level image (editor-architecture-design.md §3.5). The caption is a
- * plain string edited through an input under the image — not the nested
- * sub-editor the architecture doc leaves open — which keeps caption edits in
- * the parent editor's undo history.
+ * plain string (null = no caption) edited through the image's right-click menu
+ * / edit dialog — not the nested sub-editor the architecture doc leaves open —
+ * which keeps every edit in the parent editor's undo history.
  */
 export declare class ImageNode extends DecoratorNode<ReactElement> {
     __src: string;
@@ -47,7 +47,15 @@ export declare class ImageNode extends DecoratorNode<ReactElement> {
     getSrc(): string;
     getAltText(): string;
     getCaption(): string | null;
+    getLinkType(): ImageLinkType;
+    getWidth(): number | null;
+    getHeight(): number | null;
     setCaption(caption: string | null): this;
+    setAltText(altText: string): this;
+    /** Points the node at new image data (a replaced URL/upload, or edited pixels). */
+    setSource(src: string, linkType: ImageLinkType): this;
+    /** Display size in px; null = the image's natural size. */
+    setDimensions(width: number | null, height: number | null): this;
     getTextContent(): string;
     decorate(): ReactElement;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/image/ImageNode.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1E,OAAO,EAML,aAAa,EAGb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AAEjB;mFACmF;AACnF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,EACD,qBAAqB,CACtB,CAAC;AAEF;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,SAAS;gBAYrD,GAAG,EAAE,MAAM,EACX,OAAO,SAAK,EACZ,OAAO,GAAE,MAAM,GAAG,IAAW,EAC7B,QAAQ,GAAE,aAAwB,EAClC,KAAK,GAAE,MAAM,GAAG,IAAW,EAC3B,MAAM,GAAE,MAAM,GAAG,IAAW,EAC5B,GAAG,CAAC,EAAE,OAAO;IAWf,UAAU,IAAI,mBAAmB;IAajC,oFAAoF;IACpF,SAAS,IAAI,eAAe;IAgB5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAO5C,SAAS,IAAI,KAAK;IAIlB,QAAQ,IAAI,KAAK;IAIjB,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB,UAAU,IAAI,MAAM,GAAG,IAAI;IAI3B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAMxC,cAAc,IAAI,MAAM;IAIxB,QAAQ,IAAI,YAAY;CAYzB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,YAAY,GAAG,SAAS,CAEjH;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,SAAS,CAEpF"}
+{"version":3,"file":"ImageNode.d.ts","sourceRoot":"","sources":["../../src/image/ImageNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EACL,aAAa,EACb,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,OAAO,EACZ,KAAK,qBAAqB,EAC1B,KAAK,MAAM,EACZ,MAAM,SAAS,CAAC;AAGjB;mFACmF;AACnF,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,MAAM,MAAM,mBAAmB,GAAG,MAAM,CACtC;IACE,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,EACD,qBAAqB,CACtB,CAAC;AAEF;;;;;GAKG;AACH,qBAAa,SAAU,SAAQ,aAAa,CAAC,YAAY,CAAC;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS;IAIxC,MAAM,CAAC,UAAU,CAAC,IAAI,EAAE,mBAAmB,GAAG,SAAS;gBAYrD,GAAG,EAAE,MAAM,EACX,OAAO,SAAK,EACZ,OAAO,GAAE,MAAM,GAAG,IAAW,EAC7B,QAAQ,GAAE,aAAwB,EAClC,KAAK,GAAE,MAAM,GAAG,IAAW,EAC3B,MAAM,GAAE,MAAM,GAAG,IAAW,EAC5B,GAAG,CAAC,EAAE,OAAO;IAWf,UAAU,IAAI,mBAAmB;IAajC,oFAAoF;IACpF,SAAS,IAAI,eAAe;IAgB5B,SAAS,CAAC,MAAM,EAAE,YAAY,GAAG,WAAW;IAO5C,SAAS,IAAI,KAAK;IAIlB,QAAQ,IAAI,KAAK;IAIjB,MAAM,IAAI,MAAM;IAIhB,UAAU,IAAI,MAAM;IAIpB,UAAU,IAAI,MAAM,GAAG,IAAI;IAI3B,WAAW,IAAI,aAAa;IAI5B,QAAQ,IAAI,MAAM,GAAG,IAAI;IAIzB,SAAS,IAAI,MAAM,GAAG,IAAI;IAI1B,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAMxC,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAMjC,mFAAmF;IACnF,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,GAAG,IAAI;IAOrD,2DAA2D;IAC3D,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOhE,cAAc,IAAI,MAAM;IAIxB,QAAQ,IAAI,YAAY;CAazB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,YAAY,GAAG,SAAS,CAEjH;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,IAAI,SAAS,CAEpF"}

package/dist/image/ImageNode.js

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DecoratorNode, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, } from 'lexical';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DecoratorNode, } from 'lexical';
+import { ImageComponent } from './ImageComponent.js';
 /**
  * Block-level image (editor-architecture-design.md §3.5). The caption is a
- * plain string edited through an input under the image — not the nested
- * sub-editor the architecture doc leaves open — which keeps caption edits in
- * the parent editor's undo history.
+ * plain string (null = no caption) edited through the image's right-click menu
+ * / edit dialog — not the nested sub-editor the architecture doc leaves open —
+ * which keeps every edit in the parent editor's undo history.
  */
 export class ImageNode extends DecoratorNode {
     static getType() {
@@ -87,16 +85,44 @@ export class ImageNode extends DecoratorNode {
     getCaption() {
         return this.__caption;
     }
+    getLinkType() {
+        return this.__linkType;
+    }
+    getWidth() {
+        return this.__width;
+    }
+    getHeight() {
+        return this.__height;
+    }
     setCaption(caption) {
         const writable = this.getWritable();
-        writable.__caption = caption;
+        writable.__caption = caption || null;
+        return writable;
+    }
+    setAltText(altText) {
+        const writable = this.getWritable();
+        writable.__altText = altText;
+        return writable;
+    }
+    /** Points the node at new image data (a replaced URL/upload, or edited pixels). */
+    setSource(src, linkType) {
+        const writable = this.getWritable();
+        writable.__src = src;
+        writable.__linkType = linkType;
+        return writable;
+    }
+    /** Display size in px; null = the image's natural size. */
+    setDimensions(width, height) {
+        const writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
         return writable;
     }
     getTextContent() {
         return this.__altText || this.__caption || '';
     }
     decorate() {
-        return (_jsx(ImageComponent, { nodeKey: this.getKey(), src: this.__src, altText: this.__altText, caption: this.__caption, width: this.__width, height: this.__height }));
+        return (_jsx(ImageComponent, { nodeKey: this.getKey(), src: this.__src, altText: this.__altText, caption: this.__caption, linkType: this.__linkType, width: this.__width, height: this.__height }));
     }
 }
 export function $createImageNode({ src, altText, caption, linkType, width, height, key }) {
@@ -105,47 +131,3 @@ export function $createImageNode({ src, altText, caption, linkType, width, heigh
 export function $isImageNode(node) {
     return node instanceof ImageNode;
 }
-function ImageComponent({ nodeKey, src, altText, caption, width, height }) {
-    const [editor] = useLexicalComposerContext();
-    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
-    const imageRef = useRef(null);
-    // Selecting must go through CLICK_COMMAND (returning true) rather than a
-    // React onClick: otherwise Lexical's own click handling turns the DOM
-    // selection into a range selection right after, undoing the node selection.
-    useEffect(() => {
-        return editor.registerCommand(CLICK_COMMAND, (event) => {
-            if (event.target !== imageRef.current)
-                return false;
-            clearSelection();
-            setSelected(true);
-            return true;
-        }, COMMAND_PRIORITY_LOW);
-    }, [editor, clearSelection, setSelected]);
-    // Delete/Backspace removes the selected image — but not while typing in the
-    // caption input, whose keystrokes also reach the editor's root listener.
-    const onDelete = useCallback((event) => {
-        if (!isSelected || event.target instanceof HTMLInputElement)
-            return false;
-        if (!$isNodeSelection($getSelection()))
-            return false;
-        event.preventDefault();
-        $getNodeByKey(nodeKey)?.remove();
-        return true;
-    }, [isSelected, nodeKey]);
-    useEffect(() => {
-        const unregisterDelete = editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
-        const unregisterBackspace = editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW);
-        return () => {
-            unregisterDelete();
-            unregisterBackspace();
-        };
-    }, [editor, onDelete]);
-    const setCaption = (value) => {
-        editor.update(() => {
-            const node = $getNodeByKey(nodeKey);
-            if ($isImageNode(node))
-                node.setCaption(value);
-        });
-    };
-    return (_jsxs("figure", { className: "likhari-image-figure", "data-selected": isSelected ? 'true' : 'false', contentEditable: false, children: [_jsx("img", { ref: imageRef, className: "likhari-image", src: src, alt: altText, width: width ?? undefined, height: height ?? undefined, draggable: false }), caption !== null && (_jsx("input", { className: "likhari-image-caption", type: "text", "aria-label": "Image caption", placeholder: "Add a caption\u2026", value: caption, onChange: (e) => setCaption(e.currentTarget.value) }))] }));
-}

package/dist/image/ImageOptionsContext.d.ts

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

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

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

package/dist/image/ImageOptionsContext.js

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

package/dist/image/imageEdit.d.ts

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

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

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

package/dist/image/imageEdit.js

@@ -0,0 +1,103 @@
+/** 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) {
+    const sx = Math.min(Math.max(Math.round(rect.x * width), 0), width - 1);
+    const sy = Math.min(Math.max(Math.round(rect.y * height), 0), height - 1);
+    const sw = Math.min(Math.max(Math.round(rect.w * width), 1), width - sx);
+    const sh = Math.min(Math.max(Math.round(rect.h * height), 1), height - sy);
+    return { sx, sy, sw, sh };
+}
+/** When one dimension changes with the aspect ratio locked, returns both. */
+export function fitDimension(changed, value, naturalWidth, naturalHeight) {
+    const v = Math.max(1, Math.round(value));
+    return changed === 'width'
+        ? { width: v, height: Math.max(1, Math.round((v * naturalHeight) / naturalWidth)) }
+        : { width: Math.max(1, Math.round((v * naturalWidth) / naturalHeight)), height: v };
+}
+/** MIME type to re-encode an edited image as: its own if it is a lossy/lossless
+ * format canvas can write (JPEG, WebP, PNG), otherwise PNG (GIF, SVG, unknown). */
+export function mimeFromSrc(src) {
+    const data = /^data:(image\/[a-z0-9.+-]+)[;,]/i.exec(src);
+    const type = data ? data[1].toLowerCase() : extensionMime(src);
+    return type === 'image/jpeg' || type === 'image/webp' ? type : 'image/png';
+}
+function extensionMime(src) {
+    const match = /\.(jpe?g|webp|png|gif|svg)(?:[?#].*)?$/i.exec(src);
+    if (!match)
+        return 'image/png';
+    const ext = match[1].toLowerCase();
+    return ext === 'jpg' || ext === 'jpeg' ? 'image/jpeg' : ext === 'webp' ? 'image/webp' : 'image/png';
+}
+/** Approximate decoded size, in bytes, of a base64 data URI. */
+export function dataUrlBytes(dataUrl) {
+    const comma = dataUrl.indexOf(',');
+    const base64 = comma === -1 ? '' : dataUrl.slice(comma + 1);
+    const padding = base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0;
+    return Math.floor((base64.length * 3) / 4) - padding;
+}
+export function dataUrlToFile(dataUrl, name) {
+    const comma = dataUrl.indexOf(',');
+    const mime = /^data:([^;,]+)/.exec(dataUrl)?.[1] ?? 'image/png';
+    const binary = atob(dataUrl.slice(comma + 1));
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++)
+        bytes[i] = binary.charCodeAt(i);
+    return new File([bytes], name, { type: mime });
+}
+/** 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) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        if (/^https?:/i.test(src))
+            img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error('IMAGE_LOAD_FAILED'));
+        img.src = src;
+    });
+}
+export const CANNOT_EDIT_PIXELS = "This image can't be edited here (its server doesn't allow it). Upload the file instead to crop or rotate it.";
+/** Applies a rotate / flip / crop to an image and returns the result as a data URI. */
+export async function applyPixelOp(src, op) {
+    let img;
+    try {
+        img = await loadImage(src);
+    }
+    catch {
+        throw new Error(CANNOT_EDIT_PIXELS);
+    }
+    const width = img.naturalWidth;
+    const height = img.naturalHeight;
+    if (!width || !height)
+        throw new Error('This image has no pixel size to edit (some SVGs). Upload a PNG or JPEG instead.');
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx)
+        throw new Error('Image editing is not available in this browser');
+    if (op.type === 'rotate') {
+        canvas.width = height;
+        canvas.height = width;
+        ctx.translate(height / 2, width / 2);
+        ctx.rotate(op.direction === 'cw' ? Math.PI / 2 : -Math.PI / 2);
+        ctx.drawImage(img, -width / 2, -height / 2);
+    }
+    else if (op.type === 'flip') {
+        canvas.width = width;
+        canvas.height = height;
+        ctx.translate(op.axis === 'horizontal' ? width : 0, op.axis === 'vertical' ? height : 0);
+        ctx.scale(op.axis === 'horizontal' ? -1 : 1, op.axis === 'vertical' ? -1 : 1);
+        ctx.drawImage(img, 0, 0);
+    }
+    else {
+        const { sx, sy, sw, sh } = toPixelRect(op.rect, width, height);
+        canvas.width = sw;
+        canvas.height = sh;
+        ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);
+    }
+    try {
+        return canvas.toDataURL(mimeFromSrc(src), 0.92);
+    }
+    catch {
+        throw new Error(CANNOT_EDIT_PIXELS);
+    }
+}

package/dist/theme/editor.css

@@ -235,7 +235,8 @@
   margin: 1.5em 0;
 }
 
-/* Images — block-level figure with an optional caption input. */
+/* Images — block-level figure; the caption is static text (edited in the
+   image's dialog), and a selected image gets a corner resize handle. */
 .likhari-image-block {
   margin: 0 0 1em 0;
 }
@@ -246,9 +247,16 @@
   text-align: center;
 }
 
-.likhari-image {
+.likhari-image-wrap {
+  position: relative;
   display: inline-block;
   max-width: 100%;
+  line-height: 0;
+}
+
+.likhari-image {
+  display: block;
+  max-width: 100%;
   height: auto;
   border-radius: 4px;
   cursor: default;
@@ -259,24 +267,52 @@
   outline-offset: 2px;
 }
 
+.likhari-image-resize-handle {
+  position: absolute;
+  right: -6px;
+  bottom: -6px;
+  width: 12px;
+  height: 12px;
+  border: 2px solid var(--editor-paper);
+  border-radius: 3px;
+  background: var(--editor-accent);
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
 .likhari-image-caption {
-  display: block;
-  width: 100%;
   margin-top: 6px;
-  padding: 2px 4px;
-  border: none;
-  border-bottom: 1px dashed transparent;
-  background: transparent;
   color: var(--editor-ink-soft);
-  font: inherit;
   font-size: 0.85em;
+  line-height: 1.4;
   text-align: center;
 }
 
-.likhari-image-caption:hover,
-.likhari-image-caption:focus {
-  border-bottom-color: var(--editor-line-strong);
-  outline: none;
+/* Image dialog — crop stage. The selection dims everything outside it. */
+.likhari-cropper-stage {
+  position: relative;
+  display: inline-block;
+  align-self: center;
+  max-width: 100%;
+  overflow: hidden;
+  line-height: 0;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+}
+
+.likhari-cropper-image {
+  display: block;
+  max-width: 100%;
+  max-height: 320px;
+}
+
+.likhari-cropper-selection {
+  position: absolute;
+  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;
 }
 
 /* Link menu: the URL item shows one truncated line. */

package/package.json

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