phx-react 1.3.1569 → 1.3.1571

package/dist/cjs/components/TextEditorV2/nodes/ImageComponent.js

@@ -0,0 +1,212 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RIGHT_CLICK_IMAGE_COMMAND = void 0;
+exports.default = ImageComponent;
+var tslib_1 = require("tslib");
+var LexicalAutoFocusPlugin_1 = require("@lexical/react/LexicalAutoFocusPlugin");
+var LexicalCollaborationContext_1 = require("@lexical/react/LexicalCollaborationContext");
+var LexicalCollaborationPlugin_1 = require("@lexical/react/LexicalCollaborationPlugin");
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
+var LexicalHashtagPlugin_1 = require("@lexical/react/LexicalHashtagPlugin");
+var LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
+var LexicalNestedComposer_1 = require("@lexical/react/LexicalNestedComposer");
+var LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+var useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
+var utils_1 = require("@lexical/utils");
+var lexical_1 = require("lexical");
+var React = tslib_1.__importStar(require("react"));
+var react_1 = require("react");
+var SettingsContext_1 = require("../context/SettingsContext");
+var SharedHistoryContext_1 = require("../context/SharedHistoryContext");
+var collaboration_1 = require("../lib/collaboration");
+var EmojisPlugin_1 = tslib_1.__importDefault(require("../plugins/EmojisPlugin"));
+var KeywordsPlugin_1 = tslib_1.__importDefault(require("../plugins/KeywordsPlugin"));
+var LinkPlugin_1 = tslib_1.__importDefault(require("../plugins/LinkPlugin"));
+var MentionsPlugin_1 = tslib_1.__importDefault(require("../plugins/MentionsPlugin"));
+var TreeViewPlugin_1 = tslib_1.__importDefault(require("../plugins/TreeViewPlugin"));
+var ContentEditable_1 = tslib_1.__importDefault(require("../ui/ContentEditable"));
+var ImageResizer_1 = tslib_1.__importDefault(require("../ui/ImageResizer"));
+var Placeholder_1 = tslib_1.__importDefault(require("../ui/Placeholder"));
+var ImageNode_1 = require("./ImageNode");
+var imageCache = new Set();
+exports.RIGHT_CLICK_IMAGE_COMMAND = (0, lexical_1.createCommand)('RIGHT_CLICK_IMAGE_COMMAND');
+function useSuspenseImage(src) {
+    if (!imageCache.has(src)) {
+        throw new Promise(function (resolve) {
+            var img = new Image();
+            img.src = src;
+            img.onload = function () {
+                imageCache.add(src);
+                resolve(null);
+            };
+        });
+    }
+}
+function LazyImage(_a) {
+    var altText = _a.altText, className = _a.className, height = _a.height, imageRef = _a.imageRef, maxWidth = _a.maxWidth, src = _a.src, width = _a.width;
+    useSuspenseImage(src);
+    return (React.createElement("img", { ref: imageRef, alt: altText, className: className || undefined, draggable: 'false', src: src, style: {
+            height: height,
+            maxWidth: maxWidth,
+            width: width,
+        } }));
+}
+function ImageComponent(_a) {
+    var altText = _a.altText, caption = _a.caption, height = _a.height, maxWidth = _a.maxWidth, nodeKey = _a.nodeKey, resizable = _a.resizable, showCaption = _a.showCaption, src = _a.src, width = _a.width;
+    var imageRef = (0, react_1.useRef)(null);
+    var buttonRef = (0, react_1.useRef)(null);
+    var _b = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey), isSelected = _b[0], setSelected = _b[1], clearSelection = _b[2];
+    var _c = (0, react_1.useState)(false), isResizing = _c[0], setIsResizing = _c[1];
+    var isCollabActive = (0, LexicalCollaborationContext_1.useCollaborationContext)().isCollabActive;
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    var _d = (0, react_1.useState)(null), selection = _d[0], setSelection = _d[1];
+    var activeEditorRef = (0, react_1.useRef)(null);
+    var onDelete = (0, react_1.useCallback)(function (payload) {
+        if (isSelected && (0, lexical_1.$isNodeSelection)((0, lexical_1.$getSelection)())) {
+            var event_1 = payload;
+            event_1.preventDefault();
+            var node = (0, lexical_1.$getNodeByKey)(nodeKey);
+            if ((0, ImageNode_1.$isImageNode)(node)) {
+                node.remove();
+            }
+        }
+        return false;
+    }, [isSelected, nodeKey]);
+    var onEnter = (0, react_1.useCallback)(function (event) {
+        var latestSelection = (0, lexical_1.$getSelection)();
+        var buttonElem = buttonRef.current;
+        if (isSelected && (0, lexical_1.$isNodeSelection)(latestSelection) && latestSelection.getNodes().length === 1) {
+            if (showCaption) {
+                // Move focus into nested editor
+                (0, lexical_1.$setSelection)(null);
+                event.preventDefault();
+                caption.focus();
+                return true;
+            }
+            else if (buttonElem !== null && buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [caption, isSelected, showCaption]);
+    var onEscape = (0, react_1.useCallback)(function (event) {
+        if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+            (0, lexical_1.$setSelection)(null);
+            editor.update(function () {
+                setSelected(true);
+                var parentRootElement = editor.getRootElement();
+                if (parentRootElement !== null) {
+                    parentRootElement.focus();
+                }
+            });
+            return true;
+        }
+        return false;
+    }, [caption, editor, setSelected]);
+    var onClick = (0, react_1.useCallback)(function (payload) {
+        var event = payload;
+        if (isResizing) {
+            return true;
+        }
+        if (event.target === imageRef.current) {
+            if (event.shiftKey) {
+                setSelected(!isSelected);
+            }
+            else {
+                clearSelection();
+                setSelected(true);
+            }
+            return true;
+        }
+        return false;
+    }, [isResizing, isSelected, setSelected, clearSelection]);
+    var onRightClick = (0, react_1.useCallback)(function (event) {
+        editor.getEditorState().read(function () {
+            var latestSelection = (0, lexical_1.$getSelection)();
+            var domElement = event.target;
+            if (domElement.tagName === 'IMG' &&
+                (0, lexical_1.$isRangeSelection)(latestSelection) &&
+                latestSelection.getNodes().length === 1) {
+                editor.dispatchCommand(exports.RIGHT_CLICK_IMAGE_COMMAND, event);
+            }
+        });
+    }, [editor]);
+    (0, react_1.useEffect)(function () {
+        var isMounted = true;
+        var rootElement = editor.getRootElement();
+        var unregister = (0, utils_1.mergeRegister)(editor.registerUpdateListener(function (_a) {
+            var editorState = _a.editorState;
+            if (isMounted) {
+                setSelection(editorState.read(function () { return (0, lexical_1.$getSelection)(); }));
+            }
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, function (_, activeEditor) {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.CLICK_COMMAND, onClick, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(exports.RIGHT_CLICK_IMAGE_COMMAND, onClick, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.DRAGSTART_COMMAND, function (event) {
+            if (event.target === imageRef.current) {
+                // TODO This is just a temporary workaround for FF to behave like other browsers.
+                // Ideally, this handles drag & drop too (and all browsers).
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_DELETE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_BACKSPACE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ENTER_COMMAND, onEnter, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, onEscape, lexical_1.COMMAND_PRIORITY_LOW));
+        rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('contextmenu', onRightClick);
+        return function () {
+            isMounted = false;
+            unregister();
+            rootElement === null || rootElement === void 0 ? void 0 : rootElement.removeEventListener('contextmenu', onRightClick);
+        };
+    }, [
+        clearSelection,
+        editor,
+        isResizing,
+        isSelected,
+        nodeKey,
+        onDelete,
+        onEnter,
+        onEscape,
+        onClick,
+        onRightClick,
+        setSelected,
+    ]);
+    var onResizeEnd = function (nextWidth, nextHeight) {
+        // Delay hiding the resize bars for click case
+        setTimeout(function () {
+            setIsResizing(false);
+        }, 200);
+        editor.update(function () {
+            var node = (0, lexical_1.$getNodeByKey)(nodeKey);
+            if ((0, ImageNode_1.$isImageNode)(node)) {
+                node.setWidthAndHeight(nextWidth, nextHeight);
+            }
+        });
+    };
+    var onResizeStart = function () {
+        setIsResizing(true);
+    };
+    var historyState = (0, SharedHistoryContext_1.useSharedHistoryContext)().historyState;
+    var showNestedEditorTreeView = (0, SettingsContext_1.useSettings)().settings.showNestedEditorTreeView;
+    var draggable = isSelected && (0, lexical_1.$isNodeSelection)(selection) && !isResizing;
+    var isFocused = isSelected || isResizing;
+    return (React.createElement(react_1.Suspense, { fallback: null },
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { draggable: draggable },
+                React.createElement(LazyImage, { altText: altText, className: isFocused ? "focused ".concat((0, lexical_1.$isNodeSelection)(selection) ? 'draggable' : '') : null, height: height, imageRef: imageRef, maxWidth: maxWidth, src: src, width: width })),
+            showCaption && (React.createElement("div", { className: 'image-caption-container' },
+                React.createElement(LexicalNestedComposer_1.LexicalNestedComposer, { initialEditor: caption },
+                    React.createElement(LexicalAutoFocusPlugin_1.AutoFocusPlugin, null),
+                    React.createElement(MentionsPlugin_1.default, null),
+                    React.createElement(LinkPlugin_1.default, null),
+                    React.createElement(EmojisPlugin_1.default, null),
+                    React.createElement(LexicalHashtagPlugin_1.HashtagPlugin, null),
+                    React.createElement(KeywordsPlugin_1.default, null),
+                    isCollabActive ? (React.createElement(LexicalCollaborationPlugin_1.CollaborationPlugin, { id: caption.getKey(), providerFactory: collaboration_1.createWebsocketProvider, shouldBootstrap: true })) : (React.createElement(LexicalHistoryPlugin_1.HistoryPlugin, { externalHistoryState: historyState })),
+                    React.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: React.createElement(ContentEditable_1.default, { className: 'ImageNode__contentEditable' }), ErrorBoundary: LexicalErrorBoundary_1.default, placeholder: React.createElement(Placeholder_1.default, { className: 'ImageNode__placeholder' }, "Enter a caption...") }),
+                    showNestedEditorTreeView === true ? React.createElement(TreeViewPlugin_1.default, null) : null))),
+            resizable && (0, lexical_1.$isNodeSelection)(selection) && isFocused && (React.createElement(ImageResizer_1.default, { editor: editor, imageRef: imageRef, maxWidth: maxWidth, onResizeEnd: onResizeEnd, onResizeStart: onResizeStart })))));
+}
+//# sourceMappingURL=ImageComponent.js.map

package/dist/cjs/components/TextEditorV2/nodes/ImageComponent.js.map

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

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+import * as React from 'react';
+export interface ImagePayload {
+    altText: string;
+    caption?: LexicalEditor;
+    height?: number;
+    key?: NodeKey;
+    maxWidth?: number;
+    showCaption?: boolean;
+    src: string;
+    width?: number;
+    captionsEnabled?: boolean;
+}
+export type SerializedImageNode = Spread<{
+    altText: string;
+    caption: SerializedEditor;
+    height?: number;
+    maxWidth: number;
+    showCaption: boolean;
+    src: string;
+    width?: number;
+}, SerializedLexicalNode>;
+export declare class ImageNode extends DecoratorNode<React.JSX.Element> {
+    __src: string;
+    __altText: string;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    __maxWidth: number;
+    __showCaption: boolean;
+    __caption: LexicalEditor;
+    __captionsEnabled: boolean;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportDOM(): DOMExportOutput;
+    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);
+    exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    setShowCaption(showCaption: boolean): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    getAltText(): string;
+    decorate(): React.JSX.Element;
+}
+export declare function $createImageNode({ altText, caption, captionsEnabled, height, key, maxWidth, showCaption, src, width, }: ImagePayload): ImageNode;
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

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

@@ -0,0 +1,136 @@
+"use strict";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageNode = void 0;
+exports.$createImageNode = $createImageNode;
+exports.$isImageNode = $isImageNode;
+var tslib_1 = require("tslib");
+var lexical_1 = require("lexical");
+var React = tslib_1.__importStar(require("react"));
+var react_1 = require("react");
+var ImageComponent = React.lazy(
+// @ts-ignore
+function () { return Promise.resolve().then(function () { return tslib_1.__importStar(require('./ImageComponent')); }); });
+function convertImageElement(domNode) {
+    if (domNode instanceof HTMLImageElement) {
+        var altText = domNode.alt, height = domNode.height, src = domNode.src, width = domNode.width;
+        var node = $createImageNode({ altText: altText, height: height, src: src, width: width });
+        return { node: node };
+    }
+    return null;
+}
+var ImageNode = /** @class */ (function (_super) {
+    tslib_1.__extends(ImageNode, _super);
+    function ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key) {
+        var _this = _super.call(this, key) || this;
+        _this.__src = src;
+        _this.__altText = altText;
+        _this.__maxWidth = maxWidth;
+        _this.__width = width || 'inherit';
+        _this.__height = height || 'inherit';
+        _this.__showCaption = showCaption || false;
+        _this.__caption = caption || (0, lexical_1.createEditor)();
+        _this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
+        return _this;
+    }
+    ImageNode.getType = function () {
+        return 'image';
+    };
+    ImageNode.clone = function (node) {
+        return new ImageNode(node.__src, node.__altText, node.__maxWidth, node.__width, node.__height, node.__showCaption, node.__caption, node.__captionsEnabled, node.__key);
+    };
+    ImageNode.importJSON = function (serializedNode) {
+        var altText = serializedNode.altText, caption = serializedNode.caption, height = serializedNode.height, maxWidth = serializedNode.maxWidth, showCaption = serializedNode.showCaption, src = serializedNode.src, width = serializedNode.width;
+        var node = $createImageNode({
+            altText: altText,
+            height: height,
+            maxWidth: maxWidth,
+            showCaption: showCaption,
+            src: src,
+            width: width,
+        });
+        var nestedEditor = node.__caption;
+        var editorState = nestedEditor.parseEditorState(caption.editorState);
+        if (!editorState.isEmpty()) {
+            nestedEditor.setEditorState(editorState);
+        }
+        return node;
+    };
+    ImageNode.prototype.exportDOM = function () {
+        var 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: element };
+    };
+    ImageNode.importDOM = function () {
+        return {
+            img: function () { return ({
+                conversion: convertImageElement,
+                priority: 0,
+            }); },
+        };
+    };
+    ImageNode.prototype.exportJSON = function () {
+        return {
+            altText: this.getAltText(),
+            caption: this.__caption.toJSON(),
+            height: this.__height === 'inherit' ? 0 : this.__height,
+            maxWidth: this.__maxWidth,
+            showCaption: this.__showCaption,
+            src: this.getSrc(),
+            type: 'image',
+            version: 1,
+            width: this.__width === 'inherit' ? 0 : this.__width,
+        };
+    };
+    ImageNode.prototype.setWidthAndHeight = function (width, height) {
+        var writable = this.getWritable();
+        writable.__width = width;
+        writable.__height = height;
+    };
+    ImageNode.prototype.setShowCaption = function (showCaption) {
+        var writable = this.getWritable();
+        writable.__showCaption = showCaption;
+    };
+    // View
+    ImageNode.prototype.createDOM = function (config) {
+        var span = document.createElement('span');
+        var theme = config.theme;
+        var className = theme.image;
+        if (className !== undefined) {
+            span.className = className;
+        }
+        return span;
+    };
+    ImageNode.prototype.updateDOM = function () {
+        return false;
+    };
+    ImageNode.prototype.getSrc = function () {
+        return this.__src;
+    };
+    ImageNode.prototype.getAltText = function () {
+        return this.__altText;
+    };
+    ImageNode.prototype.decorate = function () {
+        return (React.createElement(react_1.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 })));
+    };
+    return ImageNode;
+}(lexical_1.DecoratorNode));
+exports.ImageNode = ImageNode;
+function $createImageNode(_a) {
+    var altText = _a.altText, caption = _a.caption, captionsEnabled = _a.captionsEnabled, height = _a.height, key = _a.key, _b = _a.maxWidth, maxWidth = _b === void 0 ? 500 : _b, showCaption = _a.showCaption, src = _a.src, width = _a.width;
+    return (0, lexical_1.$applyNodeReplacement)(new ImageNode(src, altText, maxWidth, width, height, showCaption, caption, captionsEnabled, key));
+}
+function $isImageNode(node) {
+    return node instanceof ImageNode;
+}
+//# sourceMappingURL=ImageNode.js.map

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

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

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

@@ -0,0 +1,18 @@
+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;
+export default function InlineImageComponent({ altText, caption, height, nodeKey, position, showCaption, src, width, }: {
+    altText: string;
+    caption: LexicalEditor;
+    height: 'inherit' | number;
+    nodeKey: NodeKey;
+    showCaption: boolean;
+    src: string;
+    width: 'inherit' | number;
+    position: Position;
+}): React.JSX.Element;

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

@@ -0,0 +1,194 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateInlineImageDialog = UpdateInlineImageDialog;
+exports.default = InlineImageComponent;
+var tslib_1 = require("tslib");
+var LexicalAutoFocusPlugin_1 = require("@lexical/react/LexicalAutoFocusPlugin");
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
+var LexicalNestedComposer_1 = require("@lexical/react/LexicalNestedComposer");
+var LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
+var useLexicalNodeSelection_1 = require("@lexical/react/useLexicalNodeSelection");
+var utils_1 = require("@lexical/utils");
+var lexical_1 = require("lexical");
+var React = tslib_1.__importStar(require("react"));
+var react_1 = require("react");
+var useModal_1 = tslib_1.__importDefault(require("../hooks/useModal"));
+var FloatingLinkEditorPlugin_1 = tslib_1.__importDefault(require("../plugins/FloatingLinkEditorPlugin"));
+var FloatingTextFormatToolbarPlugin_1 = tslib_1.__importDefault(require("../plugins/FloatingTextFormatToolbarPlugin"));
+var LinkPlugin_1 = tslib_1.__importDefault(require("../plugins/LinkPlugin"));
+var Button_1 = tslib_1.__importDefault(require("../ui/Button"));
+var ContentEditable_1 = tslib_1.__importDefault(require("../ui/ContentEditable"));
+var Dialog_1 = require("../ui/Dialog");
+var Placeholder_1 = tslib_1.__importDefault(require("../ui/Placeholder"));
+var Select_1 = tslib_1.__importDefault(require("../ui/Select"));
+var TextInput_1 = tslib_1.__importDefault(require("../ui/TextInput"));
+var InlineImageNode_1 = require("./InlineImageNode");
+var imageCache = new Set();
+function useSuspenseImage(src) {
+    if (!imageCache.has(src)) {
+        throw new Promise(function (resolve) {
+            var img = new Image();
+            img.src = src;
+            img.onload = function () {
+                imageCache.add(src);
+                resolve(null);
+            };
+        });
+    }
+}
+function LazyImage(_a) {
+    var altText = _a.altText, className = _a.className, height = _a.height, imageRef = _a.imageRef, position = _a.position, src = _a.src, width = _a.width;
+    useSuspenseImage(src);
+    return (React.createElement("img", { ref: imageRef, alt: altText, className: className || undefined, "data-position": position, draggable: 'false', src: src, style: {
+            display: 'block',
+            height: height,
+            width: width,
+        } }));
+}
+function UpdateInlineImageDialog(_a) {
+    var activeEditor = _a.activeEditor, nodeKey = _a.nodeKey, onClose = _a.onClose;
+    var editorState = activeEditor.getEditorState();
+    var node = editorState.read(function () { return (0, lexical_1.$getNodeByKey)(nodeKey); });
+    var _b = (0, react_1.useState)(node.getAltText()), altText = _b[0], setAltText = _b[1];
+    var _c = (0, react_1.useState)(node.getShowCaption()), showCaption = _c[0], setShowCaption = _c[1];
+    var _d = (0, react_1.useState)(node.getPosition()), position = _d[0], setPosition = _d[1];
+    var handleShowCaptionChange = function (e) {
+        setShowCaption(e.target.checked);
+    };
+    var handlePositionChange = function (e) {
+        setPosition(e.target.value);
+    };
+    var handleOnConfirm = function () {
+        var payload = { altText: altText, position: position, showCaption: showCaption };
+        if (node) {
+            activeEditor.update(function () {
+                node.update(payload);
+            });
+        }
+        onClose();
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { marginBottom: '1em' } },
+            React.createElement(TextInput_1.default, { "data-test-id": 'image-modal-alt-text-input', label: 'Alt Text', onChange: setAltText, placeholder: 'Descriptive alternative text', value: altText })),
+        React.createElement(Select_1.default, { 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(Dialog_1.DialogActions, null,
+            React.createElement(Button_1.default, { "data-test-id": 'image-modal-file-upload-btn', onClick: function () { return handleOnConfirm(); } }, "Confirm"))));
+}
+function InlineImageComponent(_a) {
+    var altText = _a.altText, caption = _a.caption, height = _a.height, nodeKey = _a.nodeKey, position = _a.position, showCaption = _a.showCaption, src = _a.src, width = _a.width;
+    var _b = (0, useModal_1.default)(), modal = _b[0], showModal = _b[1];
+    var imageRef = (0, react_1.useRef)(null);
+    var buttonRef = (0, react_1.useRef)(null);
+    var _c = (0, useLexicalNodeSelection_1.useLexicalNodeSelection)(nodeKey), isSelected = _c[0], setSelected = _c[1], clearSelection = _c[2];
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    var _d = (0, react_1.useState)(null), selection = _d[0], setSelection = _d[1];
+    var activeEditorRef = (0, react_1.useRef)(null);
+    var onDelete = (0, react_1.useCallback)(function (payload) {
+        if (isSelected && (0, lexical_1.$isNodeSelection)((0, lexical_1.$getSelection)())) {
+            var event_1 = payload;
+            event_1.preventDefault();
+            var node = (0, lexical_1.$getNodeByKey)(nodeKey);
+            if ((0, InlineImageNode_1.$isInlineImageNode)(node)) {
+                node.remove();
+            }
+        }
+        return false;
+    }, [isSelected, nodeKey]);
+    var onEnter = (0, react_1.useCallback)(function (event) {
+        var latestSelection = (0, lexical_1.$getSelection)();
+        var buttonElem = buttonRef.current;
+        if (isSelected && (0, lexical_1.$isNodeSelection)(latestSelection) && latestSelection.getNodes().length === 1) {
+            if (showCaption) {
+                // Move focus into nested editor
+                (0, lexical_1.$setSelection)(null);
+                event.preventDefault();
+                caption.focus();
+                return true;
+            }
+            else if (buttonElem !== null && buttonElem !== document.activeElement) {
+                event.preventDefault();
+                buttonElem.focus();
+                return true;
+            }
+        }
+        return false;
+    }, [caption, isSelected, showCaption]);
+    var onEscape = (0, react_1.useCallback)(function (event) {
+        if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+            (0, lexical_1.$setSelection)(null);
+            editor.update(function () {
+                setSelected(true);
+                var parentRootElement = editor.getRootElement();
+                if (parentRootElement !== null) {
+                    parentRootElement.focus();
+                }
+            });
+            return true;
+        }
+        return false;
+    }, [caption, editor, setSelected]);
+    (0, react_1.useEffect)(function () {
+        var isMounted = true;
+        var unregister = (0, utils_1.mergeRegister)(editor.registerUpdateListener(function (_a) {
+            var editorState = _a.editorState;
+            if (isMounted) {
+                setSelection(editorState.read(function () { return (0, lexical_1.$getSelection)(); }));
+            }
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, function (_, activeEditor) {
+            activeEditorRef.current = activeEditor;
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.CLICK_COMMAND, function (payload) {
+            var event = payload;
+            if (event.target === imageRef.current) {
+                if (event.shiftKey) {
+                    setSelected(!isSelected);
+                }
+                else {
+                    clearSelection();
+                    setSelected(true);
+                }
+                return true;
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.DRAGSTART_COMMAND, function (event) {
+            if (event.target === imageRef.current) {
+                // TODO This is just a temporary workaround for FF to behave like other browsers.
+                // Ideally, this handles drag & drop too (and all browsers).
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_DELETE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_BACKSPACE_COMMAND, onDelete, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ENTER_COMMAND, onEnter, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, onEscape, lexical_1.COMMAND_PRIORITY_LOW));
+        return function () {
+            isMounted = false;
+            unregister();
+        };
+    }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+    var draggable = isSelected && (0, lexical_1.$isNodeSelection)(selection);
+    var isFocused = isSelected;
+    return (React.createElement(react_1.Suspense, { fallback: null },
+        React.createElement(React.Fragment, null,
+            React.createElement("div", { draggable: draggable },
+                React.createElement("button", { ref: buttonRef, className: 'image-edit-button', onClick: function () {
+                        showModal('Update Inline Image', function (onClose) { return (React.createElement(UpdateInlineImageDialog, { activeEditor: editor, nodeKey: nodeKey, onClose: onClose })); });
+                    }, type: 'button' }, "Edit"),
+                React.createElement(LazyImage, { altText: altText, className: isFocused ? "focused ".concat((0, lexical_1.$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_1.LexicalNestedComposer, { initialEditor: caption },
+                    React.createElement(LexicalAutoFocusPlugin_1.AutoFocusPlugin, null),
+                    React.createElement(LinkPlugin_1.default, null),
+                    React.createElement(FloatingLinkEditorPlugin_1.default, { isLinkEditMode: false, setIsLinkEditMode: function () {
+                            console.log('FloatingLinkEditorPlugin');
+                        } }),
+                    React.createElement(FloatingTextFormatToolbarPlugin_1.default, null),
+                    React.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: React.createElement(ContentEditable_1.default, { className: 'InlineImageNode__contentEditable' }), ErrorBoundary: LexicalErrorBoundary_1.default, placeholder: React.createElement(Placeholder_1.default, { className: 'InlineImageNode__placeholder' }, "Enter a caption...") }))))),
+        modal));
+}
+//# sourceMappingURL=InlineImageComponent.js.map