phx-react 1.3.1793 → 1.3.1795

package/dist/esm/components/TextEditorV2/nodes/ImageNode.d.ts

@@ -11,6 +11,7 @@ import * as React from 'react';
 export interface ImagePayload {
     altText: string;
     caption?: LexicalEditor;
+    position?: ImagePosition;
     height?: number;
     key?: NodeKey;
     maxWidth?: number;
@@ -19,11 +20,13 @@ export interface ImagePayload {
     width?: number;
     captionsEnabled?: boolean;
 }
+export type ImagePosition = 'left' | 'right' | 'center' | undefined;
 export type SerializedImageNode = Spread<{
     altText: string;
     caption: SerializedEditor;
     height?: number;
     maxWidth: number;
+    position?: ImagePosition;
     showCaption: boolean;
     src: string;
     width?: number;
@@ -36,21 +39,114 @@ export declare class ImageNode extends DecoratorNode<React.JSX.Element> {
     __maxWidth: number;
     __showCaption: boolean;
     __caption: LexicalEditor;
+    __position: ImagePosition;
     __captionsEnabled: boolean;
+    /**
+     * Gets the Lexical node type for image nodes.
+     * @returns Image node type.
+     */
     static getType(): string;
+    /**
+     * Clones an existing image node.
+     * @param node Image node to clone.
+     * @returns Cloned image node.
+     */
     static clone(node: ImageNode): ImageNode;
+    /**
+     * Imports a serialized image node into the editor state.
+     * @param serializedNode Serialized image node payload.
+     * @returns Hydrated image node.
+     */
     static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    /**
+     * Exports this image node to DOM.
+     * @returns DOM export output containing the image wrapper.
+     */
     exportDOM(): DOMExportOutput;
+    /**
+     * Defines DOM import conversions for image elements.
+     * @returns DOM conversion map for image imports.
+     */
     static importDOM(): DOMConversionMap | null;
-    constructor(src: string, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, captionsEnabled?: boolean, key?: NodeKey);
+    /**
+     * Creates an image node instance.
+     * @param src Image source URL.
+     * @param altText Accessible alt text.
+     * @param maxWidth Maximum rendered image width.
+     * @param width Initial image width.
+     * @param height Initial image height.
+     * @param showCaption Whether the caption editor is visible.
+     * @param caption Nested caption editor.
+     * @param position Image alignment position.
+     * @param captionsEnabled Whether captions are enabled.
+     * @param key Optional Lexical node key.
+     */
+    constructor(src: string, altText: string, maxWidth: number, width?: 'inherit' | number, height?: 'inherit' | number, showCaption?: boolean, caption?: LexicalEditor, position?: ImagePosition, captionsEnabled?: boolean, key?: NodeKey);
+    /**
+     * Serializes this image node.
+     * @returns Serialized image node payload.
+     */
     exportJSON(): SerializedImageNode;
+    /**
+     * Updates the stored image dimensions.
+     * @param width Next image width.
+     * @param height Next image height.
+     */
     setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    /**
+     * Updates caption visibility for this image.
+     * @param showCaption Whether the caption should be shown.
+     */
     setShowCaption(showCaption: boolean): void;
+    /**
+     * Gets the current image alignment position.
+     * @returns Current image position.
+     */
+    getPosition(): ImagePosition;
+    /**
+     * Updates the image alignment position.
+     * @param position Next image position.
+     */
+    setPosition(position: ImagePosition): void;
+    /**
+     * Creates the DOM wrapper for this image node.
+     * @param config Lexical editor config.
+     * @returns Image wrapper element.
+     */
     createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(): false;
+    /**
+     * Updates the DOM wrapper when node state changes.
+     * @param prevNode Previous image node state.
+     * @param dom Existing image wrapper element.
+     * @param config Lexical editor config.
+     * @returns False because the existing DOM element is reused.
+     */
+    updateDOM(prevNode: ImageNode, dom: HTMLElement, config: EditorConfig): false;
+    /**
+     * Gets the image source URL.
+     * @returns Image source URL.
+     */
     getSrc(): string;
+    /**
+     * Gets the image alt text.
+     * @returns Image alt text.
+     */
     getAltText(): string;
+    /**
+     * Renders the React decorator for this image node.
+     * @returns Image decorator element.
+     */
     decorate(): React.JSX.Element;
 }
-export declare function $createImageNode({ altText, caption, captionsEnabled, height, key, maxWidth, showCaption, src, width, }: ImagePayload): ImageNode;
+/**
+ * Creates and inserts a replacement image node.
+ * @param payload Image node creation payload.
+ * @returns Created image node.
+ */
+export declare function $createImageNode({ altText, caption, captionsEnabled, height, key, maxWidth, position, showCaption, src, width, }: ImagePayload): ImageNode;
+/**
+ * Checks whether a Lexical node is an ImageNode.
+ * @param node Node to test.
+ * @returns True when the node is an ImageNode.
+ */
 export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

package/dist/esm/components/TextEditorV2/nodes/ImageNode.js

@@ -11,27 +11,66 @@ import { Suspense } from 'react';
 const ImageComponent = React.lazy(
 // @ts-ignore
 () => import('./ImageComponent'));
+/**
+ * Gets the image alignment position encoded in a wrapper class name.
+ * @param className Wrapper class name to inspect.
+ * @returns Matching image position, or undefined when no position class exists.
+ */
+function getPositionFromClassName(className) {
+    if (className.includes('position-left')) {
+        return 'left';
+    }
+    if (className.includes('position-right')) {
+        return 'right';
+    }
+    if (className.includes('position-center')) {
+        return 'center';
+    }
+    return undefined;
+}
+/**
+ * Converts an imported DOM image element into an ImageNode.
+ * @param domNode DOM node provided by Lexical import.
+ * @returns DOM conversion output for image nodes, or null for unsupported nodes.
+ */
 function convertImageElement(domNode) {
+    var _a;
     if (domNode instanceof HTMLImageElement) {
         const { alt: altText, height, src, width } = domNode;
-        const node = $createImageNode({ altText, height, src, width });
+        const position = getPositionFromClassName(((_a = domNode.parentElement) === null || _a === void 0 ? void 0 : _a.className) || '');
+        const node = $createImageNode({ altText, height, position, src, width });
         return { node };
     }
     return null;
 }
 export class ImageNode extends DecoratorNode {
+    /**
+     * Gets the Lexical node type for image nodes.
+     * @returns Image node type.
+     */
     static getType() {
         return 'image';
     }
+    /**
+     * Clones an existing image node.
+     * @param node Image node to clone.
+     * @returns Cloned image node.
+     */
     static clone(node) {
-        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key);
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__position, node.__captionsEnabled, node.__key);
     }
+    /**
+     * Imports a serialized image node into the editor state.
+     * @param serializedNode Serialized image node payload.
+     * @returns Hydrated image node.
+     */
     static importJSON(serializedNode) {
-        const { altText, caption, height, maxWidth, showCaption, src, width } = serializedNode;
+        const { altText, caption, height, maxWidth, position, showCaption, src, width } = serializedNode;
         const node = $createImageNode({
             altText,
             height,
             maxWidth,
+            position,
             showCaption,
             src,
             width,
@@ -43,14 +82,25 @@ export class ImageNode extends DecoratorNode {
         }
         return node;
     }
+    /**
+     * Exports this image node to DOM.
+     * @returns DOM export output containing the image wrapper.
+     */
     exportDOM() {
+        const wrapper = document.createElement('span');
+        wrapper.className = `editor-image position-${this.__position || 'center'}`;
         const element = document.createElement('img');
         element.setAttribute('src', this.__src);
         element.setAttribute('alt', this.__altText);
         element.setAttribute('width', this.__width.toString());
         element.setAttribute('height', this.__height.toString());
-        return { element };
+        wrapper.appendChild(element);
+        return { element: wrapper };
     }
+    /**
+     * Defines DOM import conversions for image elements.
+     * @returns DOM conversion map for image imports.
+     */
     static importDOM() {
         return {
             img: () => ({
@@ -59,7 +109,20 @@ export class ImageNode extends DecoratorNode {
             }),
         };
     }
-    constructor(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key) {
+    /**
+     * Creates an image node instance.
+     * @param src Image source URL.
+     * @param altText Accessible alt text.
+     * @param maxWidth Maximum rendered image width.
+     * @param width Initial image width.
+     * @param height Initial image height.
+     * @param showCaption Whether the caption editor is visible.
+     * @param caption Nested caption editor.
+     * @param position Image alignment position.
+     * @param captionsEnabled Whether captions are enabled.
+     * @param key Optional Lexical node key.
+     */
+    constructor(src, altText, maxWidth, width, height, showCaption, caption, position, captionsEnabled, key) {
         super(key);
         this.__src = src;
         this.__altText = altText;
@@ -68,14 +131,20 @@ export class ImageNode extends DecoratorNode {
         this.__height = height || 'inherit';
         this.__showCaption = showCaption || false;
         this.__caption = caption || createEditor();
+        this.__position = position || 'center';
         this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
     }
+    /**
+     * Serializes this image node.
+     * @returns Serialized image node payload.
+     */
     exportJSON() {
         return {
             altText: this.getAltText(),
             caption: this.__caption.toJSON(),
             height: this.__height === 'inherit' ? 0 : this.__height,
             maxWidth: this.__maxWidth,
+            position: this.__position,
             showCaption: this.__showCaption,
             src: this.getSrc(),
             type: 'image',
@@ -83,42 +152,107 @@ export class ImageNode extends DecoratorNode {
             width: this.__width === 'inherit' ? 0 : this.__width,
         };
     }
+    /**
+     * Updates the stored image dimensions.
+     * @param width Next image width.
+     * @param height Next image height.
+     */
     setWidthAndHeight(width, height) {
         const writable = this.getWritable();
         writable.__width = width;
         writable.__height = height;
     }
+    /**
+     * Updates caption visibility for this image.
+     * @param showCaption Whether the caption should be shown.
+     */
     setShowCaption(showCaption) {
         const writable = this.getWritable();
         writable.__showCaption = showCaption;
     }
+    /**
+     * Gets the current image alignment position.
+     * @returns Current image position.
+     */
+    getPosition() {
+        return this.__position;
+    }
+    /**
+     * Updates the image alignment position.
+     * @param position Next image position.
+     */
+    setPosition(position) {
+        const writable = this.getWritable();
+        writable.__position = position || 'center';
+    }
     // View
+    /**
+     * Creates the DOM wrapper for this image node.
+     * @param config Lexical editor config.
+     * @returns Image wrapper element.
+     */
     createDOM(config) {
         const span = document.createElement('span');
         const theme = config.theme;
-        const className = theme.image;
+        const className = `${theme.image} position-${this.__position || 'center'}`;
         if (className !== undefined) {
             span.className = className;
         }
         return span;
     }
-    updateDOM() {
+    /**
+     * Updates the DOM wrapper when node state changes.
+     * @param prevNode Previous image node state.
+     * @param dom Existing image wrapper element.
+     * @param config Lexical editor config.
+     * @returns False because the existing DOM element is reused.
+     */
+    updateDOM(prevNode, dom, config) {
+        const position = this.__position;
+        if (position !== prevNode.__position) {
+            const className = `${config.theme.image} position-${position || 'center'}`;
+            if (className !== undefined) {
+                dom.className = className;
+            }
+        }
         return false;
     }
+    /**
+     * Gets the image source URL.
+     * @returns Image source URL.
+     */
     getSrc() {
         return this.__src;
     }
+    /**
+     * Gets the image alt text.
+     * @returns Image alt text.
+     */
     getAltText() {
         return this.__altText;
     }
+    /**
+     * Renders the React decorator for this image node.
+     * @returns Image decorator element.
+     */
     decorate() {
         return (React.createElement(Suspense, { fallback: null },
             React.createElement(ImageComponent, { altText: this.__altText, caption: this.__caption, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), resizable: true, showCaption: this.__showCaption, src: this.__src, width: this.__width })));
     }
 }
-export function $createImageNode({ altText, caption, captionsEnabled, height, key, maxWidth = 500, showCaption, src, width, }) {
-    return $applyNodeReplacement(new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key));
+/**
+ * Creates and inserts a replacement image node.
+ * @param payload Image node creation payload.
+ * @returns Created image node.
+ */
+export function $createImageNode({ altText, caption, captionsEnabled, height, key, maxWidth = 500, position, showCaption, src, width, }) {
+    return $applyNodeReplacement(new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, position || 'center', captionsEnabled, key));
 }
+/**
+ * Checks whether a Lexical node is an ImageNode.
+ * @param node Node to test.
+ * @returns True when the node is an ImageNode.
+ */
 export function $isImageNode(node) {
     return node instanceof ImageNode;
 }

package/dist/esm/components/TextEditorV2/nodes/ImageNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageNode.js","sourceRoot":"","sources":["../../../../../src/components/TextEditorV2/nodes/ImageNode.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ImageNode.js","sourceRoot":"","sources":["../../../../../src/components/TextEditorV2/nodes/ImageNode.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/TextEditorV2/nodes/InlineImageComponent.d.ts

@@ -1,11 +1,11 @@
 import type { Position } from './InlineImageNode';
 import type { LexicalEditor, NodeKey } from 'lexical';
 import * as React from 'react';
-export declare function UpdateInlineImageDialog({ activeEditor, nodeKey, onClose, }: {
-    activeEditor: LexicalEditor;
-    nodeKey: NodeKey;
-    onClose(): void;
-}): React.JSX.Element;
+/**
+ * Renders an inline image node with selection, resize, and caption behavior.
+ * @param props Inline image component props.
+ * @returns Inline image decorator element.
+ */
 export default function InlineImageComponent({ altText, caption, height, nodeKey, position, showCaption, src, width, }: {
     altText: string;
     caption: LexicalEditor;

package/dist/esm/components/TextEditorV2/nodes/InlineImageComponent.js

@@ -7,19 +7,19 @@ import { mergeRegister } from '@lexical/utils';
 import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from 'lexical';
 import * as React from 'react';
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
-import useModal from '../hooks/useModal';
 import FloatingLinkEditorPlugin from '../plugins/FloatingLinkEditorPlugin';
 import FloatingTextFormatToolbarPlugin from '../plugins/FloatingTextFormatToolbarPlugin';
 import LinkPlugin from '../plugins/LinkPlugin';
-import Button from '../ui/Button';
 import ContentEditable from '../ui/ContentEditable';
-import { DialogActions } from '../ui/Dialog';
+import ImageResizer from '../ui/ImageResizer';
 import Placeholder from '../ui/Placeholder';
-import Select from '../ui/Select';
-import TextInput from '../ui/TextInput';
 import { $isInlineImageNode } from './InlineImageNode';
 import { LexicalErrorBoundary } from '../shared/LexicalErrorBoundary';
 const imageCache = new Set();
+/**
+ * Suspends rendering until an image source has loaded.
+ * @param src Image source URL to preload.
+ */
 function useSuspenseImage(src) {
     if (!imageCache.has(src)) {
         throw new Promise((resolve) => {
@@ -32,6 +32,11 @@ function useSuspenseImage(src) {
         });
     }
 }
+/**
+ * Renders an image after ensuring its source is loaded.
+ * @param props Lazy image render props.
+ * @returns Rendered image element.
+ */
 function LazyImage({ altText, className, height, imageRef, position, src, width, }) {
     useSuspenseImage(src);
     return (React.createElement("img", { ref: imageRef, alt: altText, className: className || undefined, "data-position": position, draggable: 'false', src: src, style: {
@@ -40,48 +45,23 @@ function LazyImage({ altText, className, height, imageRef, position, src, width,
             width,
         } }));
 }
-export function UpdateInlineImageDialog({ activeEditor, nodeKey, onClose, }) {
-    const editorState = activeEditor.getEditorState();
-    const node = editorState.read(() => $getNodeByKey(nodeKey));
-    const [altText, setAltText] = useState(node.getAltText());
-    const [showCaption, setShowCaption] = useState(node.getShowCaption());
-    const [position, setPosition] = useState(node.getPosition());
-    const handleShowCaptionChange = (e) => {
-        setShowCaption(e.target.checked);
-    };
-    const handlePositionChange = (e) => {
-        setPosition(e.target.value);
-    };
-    const handleOnConfirm = () => {
-        const payload = { altText, position, showCaption };
-        if (node) {
-            activeEditor.update(() => {
-                node.update(payload);
-            });
-        }
-        onClose();
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: { marginBottom: '1em' } },
-            React.createElement(TextInput, { "data-test-id": 'image-modal-alt-text-input', label: 'Alt Text', onChange: setAltText, placeholder: 'Descriptive alternative text', value: altText })),
-        React.createElement(Select, { id: 'position-select', label: 'Position', name: 'position', onChange: handlePositionChange, style: { marginBottom: '1em', width: '208px' }, value: position },
-            React.createElement("option", { value: 'left' }, "Left"),
-            React.createElement("option", { value: 'right' }, "Right"),
-            React.createElement("option", { value: 'full' }, "Full Width")),
-        React.createElement("div", { className: 'Input__wrapper' },
-            React.createElement("input", { checked: showCaption, id: 'caption', onChange: handleShowCaptionChange, type: 'checkbox' }),
-            React.createElement("label", { htmlFor: 'caption' }, "Show Caption")),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { "data-test-id": 'image-modal-file-upload-btn', onClick: () => handleOnConfirm() }, "Confirm"))));
-}
+/**
+ * Renders an inline image node with selection, resize, and caption behavior.
+ * @param props Inline image component props.
+ * @returns Inline image decorator element.
+ */
 export default function InlineImageComponent({ altText, caption, height, nodeKey, position, showCaption, src, width, }) {
-    const [modal, showModal] = useModal();
     const imageRef = useRef(null);
-    const buttonRef = useRef(null);
     const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [isResizing, setIsResizing] = useState(false);
     const [editor] = useLexicalComposerContext();
     const [selection, setSelection] = useState(null);
     const activeEditorRef = useRef(null);
+    /**
+     * Removes the selected inline image when delete or backspace is pressed.
+     * @param payload Keyboard event from the editor command.
+     * @returns False to allow other command handlers to continue.
+     */
     const onDelete = useCallback((payload) => {
         if (isSelected && $isNodeSelection($getSelection())) {
             const event = payload;
@@ -93,27 +73,28 @@ export default function InlineImageComponent({ altText, caption, height, nodeKey
         }
         return false;
     }, [isSelected, nodeKey]);
+    /**
+     * Moves focus into the caption editor when enter is pressed on a selected image.
+     * @param event Keyboard event from the editor command.
+     * @returns True when focus moved into the caption editor.
+     */
     const onEnter = useCallback((event) => {
         const latestSelection = $getSelection();
-        const buttonElem = buttonRef.current;
-        if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
-            if (showCaption) {
-                // Move focus into nested editor
-                $setSelection(null);
-                event.preventDefault();
-                caption.focus();
-                return true;
-            }
-            else if (buttonElem !== null && buttonElem !== document.activeElement) {
-                event.preventDefault();
-                buttonElem.focus();
-                return true;
-            }
+        if (isSelected && showCaption && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+            // Move focus into nested editor
+            $setSelection(null);
+            event.preventDefault();
+            caption.focus();
+            return true;
         }
         return false;
     }, [caption, isSelected, showCaption]);
-    const onEscape = useCallback((event) => {
-        if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+    /**
+     * Restores focus from the caption editor back to the inline image node.
+     * @returns True when focus was restored to the parent editor.
+     */
+    const onEscape = useCallback(() => {
+        if (activeEditorRef.current === caption) {
             $setSelection(null);
             editor.update(() => {
                 setSelected(true);
@@ -137,6 +118,9 @@ export default function InlineImageComponent({ altText, caption, height, nodeKey
             return false;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, (payload) => {
             const event = payload;
+            if (isResizing) {
+                return true;
+            }
             if (event.target === imageRef.current) {
                 if (event.shiftKey) {
                     setSelected(!isSelected);
@@ -161,15 +145,32 @@ export default function InlineImageComponent({ altText, caption, height, nodeKey
             isMounted = false;
             unregister();
         };
-    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
-    const draggable = isSelected && $isNodeSelection(selection);
-    const isFocused = isSelected;
+    }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+    /**
+     * Persists resized image dimensions back to the Lexical node.
+     * @param nextWidth Next image width.
+     * @param nextHeight Next image height.
+     */
+    const onResizeEnd = (nextWidth, nextHeight) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isInlineImageNode(node)) {
+                node.setWidthAndHeight(nextWidth, nextHeight);
+            }
+        });
+        setIsResizing(false);
+    };
+    /**
+     * Marks the image as actively resizing.
+     */
+    const onResizeStart = () => {
+        setIsResizing(true);
+    };
+    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+    const isFocused = isSelected || isResizing;
     return (React.createElement(Suspense, { fallback: null },
         React.createElement(React.Fragment, null,
             React.createElement("div", { draggable: draggable },
-                React.createElement("button", { ref: buttonRef, className: 'image-edit-button', onClick: () => {
-                        showModal('Update Inline Image', (onClose) => (React.createElement(UpdateInlineImageDialog, { activeEditor: editor, nodeKey: nodeKey, onClose: onClose })));
-                    }, type: 'button' }, "Edit"),
                 React.createElement(LazyImage, { altText: altText, className: isFocused ? `focused ${$isNodeSelection(selection) ? 'draggable' : ''}` : null, height: height, imageRef: imageRef, position: position, src: src, width: width })),
             showCaption && (React.createElement("div", { className: 'image-caption-container' },
                 React.createElement(LexicalNestedComposer, { initialEditor: caption },
@@ -179,7 +180,7 @@ export default function InlineImageComponent({ altText, caption, height, nodeKey
                             console.log('FloatingLinkEditorPlugin');
                         } }),
                     React.createElement(FloatingTextFormatToolbarPlugin, null),
-                    React.createElement(RichTextPlugin, { contentEditable: React.createElement(ContentEditable, { className: 'InlineImageNode__contentEditable' }), ErrorBoundary: LexicalErrorBoundary, placeholder: React.createElement(Placeholder, { className: 'InlineImageNode__placeholder' }, "Enter a caption...") }))))),
-        modal));
+                    React.createElement(RichTextPlugin, { contentEditable: React.createElement(ContentEditable, { className: 'InlineImageNode__contentEditable' }), ErrorBoundary: LexicalErrorBoundary, placeholder: React.createElement(Placeholder, { className: 'InlineImageNode__placeholder' }, "Enter a caption...") })))),
+            $isNodeSelection(selection) && isFocused && (React.createElement(ImageResizer, { editor: editor, imageRef: imageRef, onResizeEnd: onResizeEnd, onResizeStart: onResizeStart })))));
 }
 //# sourceMappingURL=InlineImageComponent.js.map