@webiny/lexical-nodes 6.3.0-beta.4 → 6.4.0-beta.0

package/components/ImageNode/ImageComponent.js

@@ -1,161 +1,131 @@
-/**
- * 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 * as React from "react";
-import { Suspense, useCallback, useEffect, useRef, useState } from "react";
-import { mergeRegister } from "lexical";
+import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, SELECTION_CHANGE_COMMAND, mergeRegister } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { $getNodeByKey, $getSelection, $isNodeSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
 import { ImageResizer } from "./ImageResizer.js";
 import { $isImageNode } from "../../ImageNode.js";
+import * as __rspack_external_react from "react";
 const imageCache = new Set();
 function useSuspenseImage(src) {
-  if (!imageCache.has(src)) {
-    throw new Promise(resolve => {
-      const img = new Image();
-      img.src = src;
-      img.onload = () => {
-        imageCache.add(src);
-        resolve(null);
-      };
+    if (!imageCache.has(src)) throw new Promise((resolve)=>{
+        const img = new Image();
+        img.src = src;
+        img.onload = ()=>{
+            imageCache.add(src);
+            resolve(null);
+        };
     });
-  }
 }
-function LazyImage({
-  id,
-  altText,
-  className,
-  imageRef,
-  src,
-  width,
-  height,
-  maxWidth
-}) {
-  useSuspenseImage(src);
-  return /*#__PURE__*/React.createElement("img", {
-    id: id,
-    className: className || undefined,
-    src: src,
-    alt: altText,
-    ref: imageRef,
-    style: {
-      height,
-      maxWidth,
-      width
-    },
-    draggable: "false"
-  });
+function LazyImage({ id, altText, className, imageRef, src, width, height, maxWidth }) {
+    useSuspenseImage(src);
+    return /*#__PURE__*/ __rspack_external_react.createElement("img", {
+        id: id,
+        className: className || void 0,
+        src: src,
+        alt: altText,
+        ref: imageRef,
+        style: {
+            height,
+            maxWidth,
+            width
+        },
+        draggable: "false"
+    });
 }
-export default function ImageComponent({
-  id,
-  src,
-  altText,
-  nodeKey,
-  width,
-  height,
-  maxWidth,
-  resizable
-}) {
-  const imageRef = 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);
-  const onDelete = useCallback(payload => {
-    if (isSelected && $isNodeSelection($getSelection())) {
-      const event = payload;
-      event.preventDefault();
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.remove();
-      }
-      setSelected(false);
-    }
-    return false;
-  }, [isSelected, nodeKey, setSelected]);
-  useEffect(() => {
-    let isMounted = true;
-    const unregister = mergeRegister(editor.registerUpdateListener(({
-      editorState
-    }) => {
-      if (isMounted) {
-        setSelection(editorState.read(() => $getSelection()));
-      }
-    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
-      activeEditorRef.current = activeEditor;
-      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);
-        } else {
-          clearSelection();
-          setSelected(true);
+function ImageComponent({ id, src, altText, nodeKey, width, height, maxWidth, resizable }) {
+    const imageRef = (0, __rspack_external_react.useRef)(null);
+    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+    const [isResizing, setIsResizing] = (0, __rspack_external_react.useState)(false);
+    const [editor] = useLexicalComposerContext();
+    const [selection, setSelection] = (0, __rspack_external_react.useState)(null);
+    const activeEditorRef = (0, __rspack_external_react.useRef)(null);
+    const onDelete = (0, __rspack_external_react.useCallback)((payload)=>{
+        if (isSelected && $isNodeSelection($getSelection())) {
+            const event = payload;
+            event.preventDefault();
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) node.remove();
+            setSelected(false);
         }
-        return true;
-      }
-      return false;
-    }, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, 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;
-    }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
-    return () => {
-      isMounted = false;
-      unregister();
+        return false;
+    }, [
+        isSelected,
+        nodeKey,
+        setSelected
+    ]);
+    (0, __rspack_external_react.useEffect)(()=>{
+        let isMounted = true;
+        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState })=>{
+            if (isMounted) setSelection(editorState.read(()=>$getSelection()));
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor)=>{
+            activeEditorRef.current = activeEditor;
+            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);
+                else {
+                    clearSelection();
+                    setSelected(true);
+                }
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DRAGSTART_COMMAND, (event)=>{
+            if (event.target === imageRef.current) {
+                event.preventDefault();
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW));
+        return ()=>{
+            isMounted = false;
+            unregister();
+        };
+    }, [
+        clearSelection,
+        editor,
+        isResizing,
+        isSelected,
+        nodeKey,
+        onDelete,
+        setSelected
+    ]);
+    const onResizeEnd = (nextWidth, nextHeight)=>{
+        setTimeout(()=>{
+            setIsResizing(false);
+        }, 200);
+        editor.update(()=>{
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) node.setWidthAndHeight(nextWidth, nextHeight);
+        });
     };
-  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, setSelected]);
-  const onResizeEnd = (nextWidth, nextHeight) => {
-    // Delay hiding the resize bars for click case
-    setTimeout(() => {
-      setIsResizing(false);
-    }, 200);
-    editor.update(() => {
-      const node = $getNodeByKey(nodeKey);
-      if ($isImageNode(node)) {
-        node.setWidthAndHeight(nextWidth, nextHeight);
-      }
-    });
-  };
-  const onResizeStart = () => {
-    setIsResizing(true);
-  };
-  const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
-  const isFocused = isSelected || isResizing;
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    draggable: draggable
-  }, /*#__PURE__*/React.createElement(LazyImage, {
-    id: id,
-    className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
-    src: src,
-    altText: altText,
-    imageRef: imageRef,
-    width: width,
-    height: height,
-    maxWidth: maxWidth
-  })), resizable && $isNodeSelection(selection) && isFocused ? /*#__PURE__*/React.createElement(ImageResizer, {
-    editor: editor,
-    imageRef: imageRef,
-    maxWidth: maxWidth,
-    onResizeStart: onResizeStart,
-    onResizeEnd: onResizeEnd
-  }) : null));
+    const onResizeStart = ()=>{
+        setIsResizing(true);
+    };
+    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+    const isFocused = isSelected || isResizing;
+    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Suspense, {
+        fallback: null
+    }, /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        draggable: draggable
+    }, /*#__PURE__*/ __rspack_external_react.createElement(LazyImage, {
+        id: id,
+        className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
+        src: src,
+        altText: altText,
+        imageRef: imageRef,
+        width: width,
+        height: height,
+        maxWidth: maxWidth
+    })), resizable && $isNodeSelection(selection) && isFocused ? /*#__PURE__*/ __rspack_external_react.createElement(ImageResizer, {
+        editor: editor,
+        imageRef: imageRef,
+        maxWidth: maxWidth,
+        onResizeStart: onResizeStart,
+        onResizeEnd: onResizeEnd
+    }) : null));
 }
+export default ImageComponent;
 
 //# sourceMappingURL=ImageComponent.js.map

package/components/ImageNode/ImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Suspense","useCallback","useEffect","useRef","useState","mergeRegister","useLexicalComposerContext","useLexicalNodeSelection","$getNodeByKey","$getSelection","$isNodeSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","DRAGSTART_COMMAND","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","SELECTION_CHANGE_COMMAND","ImageResizer","$isImageNode","imageCache","Set","useSuspenseImage","src","has","Promise","resolve","img","Image","onload","add","LazyImage","id","altText","className","imageRef","width","height","maxWidth","createElement","undefined","alt","ref","style","draggable","ImageComponent","nodeKey","resizable","isSelected","setSelected","clearSelection","isResizing","setIsResizing","editor","selection","setSelection","activeEditorRef","onDelete","payload","event","preventDefault","node","remove","isMounted","unregister","registerUpdateListener","editorState","read","registerCommand","_","activeEditor","current","target","shiftKey","onResizeEnd","nextWidth","nextHeight","setTimeout","update","setWidthAndHeight","onResizeStart","isFocused","fallback","Fragment"],"sources":["ImageComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { LexicalEditor, NodeKey, BaseSelection } from \"lexical\";\nimport { mergeRegister } from \"lexical\";\n\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport {\n    $getNodeByKey,\n    $getSelection,\n    $isNodeSelection,\n    CLICK_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    DRAGSTART_COMMAND,\n    KEY_BACKSPACE_COMMAND,\n    KEY_DELETE_COMMAND,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { ImageResizer } from \"./ImageResizer.js\";\nimport { $isImageNode } from \"~/ImageNode.js\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n    if (!imageCache.has(src)) {\n        throw new Promise(resolve => {\n            const img = new Image();\n            img.src = src;\n            img.onload = () => {\n                imageCache.add(src);\n                resolve(null);\n            };\n        });\n    }\n}\n\nfunction LazyImage({\n    id,\n    altText,\n    className,\n    imageRef,\n    src,\n    width,\n    height,\n    maxWidth\n}: {\n    id: string;\n    altText: string;\n    className: string | null;\n    height: \"inherit\" | number;\n    imageRef: { current: null | HTMLImageElement };\n    maxWidth: number;\n    src: string;\n    width: \"inherit\" | number;\n}): React.JSX.Element {\n    useSuspenseImage(src);\n    return (\n        <img\n            id={id}\n            className={className || undefined}\n            src={src}\n            alt={altText}\n            ref={imageRef}\n            style={{\n                height,\n                maxWidth,\n                width\n            }}\n            draggable=\"false\"\n        />\n    );\n}\n\ninterface ImageComponentProps {\n    id: string;\n    altText: string;\n    height: \"inherit\" | number;\n    maxWidth: number;\n    nodeKey: NodeKey;\n    resizable: boolean;\n    src: string;\n    width: \"inherit\" | number;\n}\n\nexport default function ImageComponent({\n    id,\n    src,\n    altText,\n    nodeKey,\n    width,\n    height,\n    maxWidth,\n    resizable\n}: ImageComponentProps): React.JSX.Element {\n    const imageRef = useRef<null | HTMLImageElement>(null);\n    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);\n    const [isResizing, setIsResizing] = useState<boolean>(false);\n    const [editor] = useLexicalComposerContext();\n    const [selection, setSelection] = useState<BaseSelection | null>(null);\n    const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n    const onDelete = useCallback(\n        (payload: KeyboardEvent) => {\n            if (isSelected && $isNodeSelection($getSelection())) {\n                const event: KeyboardEvent = payload;\n                event.preventDefault();\n                const node = $getNodeByKey(nodeKey);\n                if ($isImageNode(node)) {\n                    node.remove();\n                }\n                setSelected(false);\n            }\n            return false;\n        },\n        [isSelected, nodeKey, setSelected]\n    );\n\n    useEffect(() => {\n        let isMounted = true;\n        const unregister = mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                if (isMounted) {\n                    setSelection(editorState.read(() => $getSelection()));\n                }\n            }),\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                (_, activeEditor) => {\n                    activeEditorRef.current = activeEditor;\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand<MouseEvent>(\n                CLICK_COMMAND,\n                payload => {\n                    const event = payload;\n                    if (isResizing) {\n                        return true;\n                    }\n                    if (event.target === imageRef.current) {\n                        if (event.shiftKey) {\n                            setSelected(!isSelected);\n                        } else {\n                            clearSelection();\n                            setSelected(true);\n                        }\n                        return true;\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                DRAGSTART_COMMAND,\n                event => {\n                    if (event.target === imageRef.current) {\n                        // TODO This is just a temporary workaround for FF to behave like other browsers.\n                        // Ideally, this handles drag & drop too (and all browsers).\n                        event.preventDefault();\n                        return true;\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n            editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW)\n        );\n        return () => {\n            isMounted = false;\n            unregister();\n        };\n    }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, setSelected]);\n\n    const onResizeEnd = (nextWidth: \"inherit\" | number, nextHeight: \"inherit\" | number) => {\n        // Delay hiding the resize bars for click case\n        setTimeout(() => {\n            setIsResizing(false);\n        }, 200);\n\n        editor.update(() => {\n            const node = $getNodeByKey(nodeKey);\n            if ($isImageNode(node)) {\n                node.setWidthAndHeight(nextWidth, nextHeight);\n            }\n        });\n    };\n\n    const onResizeStart = () => {\n        setIsResizing(true);\n    };\n\n    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n    const isFocused = isSelected || isResizing;\n    return (\n        <Suspense fallback={null}>\n            <>\n                <div draggable={draggable}>\n                    <LazyImage\n                        id={id}\n                        className={\n                            isFocused\n                                ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n                                : null\n                        }\n                        src={src}\n                        altText={altText}\n                        imageRef={imageRef}\n                        width={width}\n                        height={height}\n                        maxWidth={maxWidth}\n                    />\n                </div>\n                {resizable && $isNodeSelection(selection) && isFocused ? (\n                    <ImageResizer\n                        editor={editor}\n                        imageRef={imageRef}\n                        maxWidth={maxWidth}\n                        onResizeStart={onResizeStart}\n                        onResizeEnd={onResizeEnd}\n                    />\n                ) : null}\n            </>\n        </Suspense>\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"components/ImageNode/ImageComponent.js","sources":["../../../src/components/ImageNode/ImageComponent.tsx"],"sourcesContent":["/**\n * Copyright (c) Meta Platforms, Inc. and affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\nimport * as React from \"react\";\nimport { Suspense, useCallback, useEffect, useRef, useState } from \"react\";\n\nimport type { LexicalEditor, NodeKey, BaseSelection } from \"lexical\";\nimport { mergeRegister } from \"lexical\";\n\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport {\n    $getNodeByKey,\n    $getSelection,\n    $isNodeSelection,\n    CLICK_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    DRAGSTART_COMMAND,\n    KEY_BACKSPACE_COMMAND,\n    KEY_DELETE_COMMAND,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { ImageResizer } from \"./ImageResizer.js\";\nimport { $isImageNode } from \"~/ImageNode.js\";\n\nconst imageCache = new Set();\n\nfunction useSuspenseImage(src: string) {\n    if (!imageCache.has(src)) {\n        throw new Promise(resolve => {\n            const img = new Image();\n            img.src = src;\n            img.onload = () => {\n                imageCache.add(src);\n                resolve(null);\n            };\n        });\n    }\n}\n\nfunction LazyImage({\n    id,\n    altText,\n    className,\n    imageRef,\n    src,\n    width,\n    height,\n    maxWidth\n}: {\n    id: string;\n    altText: string;\n    className: string | null;\n    height: \"inherit\" | number;\n    imageRef: { current: null | HTMLImageElement };\n    maxWidth: number;\n    src: string;\n    width: \"inherit\" | number;\n}): React.JSX.Element {\n    useSuspenseImage(src);\n    return (\n        <img\n            id={id}\n            className={className || undefined}\n            src={src}\n            alt={altText}\n            ref={imageRef}\n            style={{\n                height,\n                maxWidth,\n                width\n            }}\n            draggable=\"false\"\n        />\n    );\n}\n\ninterface ImageComponentProps {\n    id: string;\n    altText: string;\n    height: \"inherit\" | number;\n    maxWidth: number;\n    nodeKey: NodeKey;\n    resizable: boolean;\n    src: string;\n    width: \"inherit\" | number;\n}\n\nexport default function ImageComponent({\n    id,\n    src,\n    altText,\n    nodeKey,\n    width,\n    height,\n    maxWidth,\n    resizable\n}: ImageComponentProps): React.JSX.Element {\n    const imageRef = useRef<null | HTMLImageElement>(null);\n    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);\n    const [isResizing, setIsResizing] = useState<boolean>(false);\n    const [editor] = useLexicalComposerContext();\n    const [selection, setSelection] = useState<BaseSelection | null>(null);\n    const activeEditorRef = useRef<LexicalEditor | null>(null);\n\n    const onDelete = useCallback(\n        (payload: KeyboardEvent) => {\n            if (isSelected && $isNodeSelection($getSelection())) {\n                const event: KeyboardEvent = payload;\n                event.preventDefault();\n                const node = $getNodeByKey(nodeKey);\n                if ($isImageNode(node)) {\n                    node.remove();\n                }\n                setSelected(false);\n            }\n            return false;\n        },\n        [isSelected, nodeKey, setSelected]\n    );\n\n    useEffect(() => {\n        let isMounted = true;\n        const unregister = mergeRegister(\n            editor.registerUpdateListener(({ editorState }) => {\n                if (isMounted) {\n                    setSelection(editorState.read(() => $getSelection()));\n                }\n            }),\n            editor.registerCommand(\n                SELECTION_CHANGE_COMMAND,\n                (_, activeEditor) => {\n                    activeEditorRef.current = activeEditor;\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand<MouseEvent>(\n                CLICK_COMMAND,\n                payload => {\n                    const event = payload;\n                    if (isResizing) {\n                        return true;\n                    }\n                    if (event.target === imageRef.current) {\n                        if (event.shiftKey) {\n                            setSelected(!isSelected);\n                        } else {\n                            clearSelection();\n                            setSelected(true);\n                        }\n                        return true;\n                    }\n\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(\n                DRAGSTART_COMMAND,\n                event => {\n                    if (event.target === imageRef.current) {\n                        // TODO This is just a temporary workaround for FF to behave like other browsers.\n                        // Ideally, this handles drag & drop too (and all browsers).\n                        event.preventDefault();\n                        return true;\n                    }\n                    return false;\n                },\n                COMMAND_PRIORITY_LOW\n            ),\n            editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),\n            editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW)\n        );\n        return () => {\n            isMounted = false;\n            unregister();\n        };\n    }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, setSelected]);\n\n    const onResizeEnd = (nextWidth: \"inherit\" | number, nextHeight: \"inherit\" | number) => {\n        // Delay hiding the resize bars for click case\n        setTimeout(() => {\n            setIsResizing(false);\n        }, 200);\n\n        editor.update(() => {\n            const node = $getNodeByKey(nodeKey);\n            if ($isImageNode(node)) {\n                node.setWidthAndHeight(nextWidth, nextHeight);\n            }\n        });\n    };\n\n    const onResizeStart = () => {\n        setIsResizing(true);\n    };\n\n    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;\n    const isFocused = isSelected || isResizing;\n    return (\n        <Suspense fallback={null}>\n            <>\n                <div draggable={draggable}>\n                    <LazyImage\n                        id={id}\n                        className={\n                            isFocused\n                                ? `focused ${$isNodeSelection(selection) ? \"draggable\" : \"\"}`\n                                : null\n                        }\n                        src={src}\n                        altText={altText}\n                        imageRef={imageRef}\n                        width={width}\n                        height={height}\n                        maxWidth={maxWidth}\n                    />\n                </div>\n                {resizable && $isNodeSelection(selection) && isFocused ? (\n                    <ImageResizer\n                        editor={editor}\n                        imageRef={imageRef}\n                        maxWidth={maxWidth}\n                        onResizeStart={onResizeStart}\n                        onResizeEnd={onResizeEnd}\n                    />\n                ) : null}\n            </>\n        </Suspense>\n    );\n}\n"],"names":["imageCache","Set","useSuspenseImage","src","Promise","resolve","img","Image","LazyImage","id","altText","className","imageRef","width","height","maxWidth","undefined","ImageComponent","nodeKey","resizable","useRef","isSelected","setSelected","clearSelection","useLexicalNodeSelection","isResizing","setIsResizing","useState","editor","useLexicalComposerContext","selection","setSelection","activeEditorRef","onDelete","useCallback","payload","$isNodeSelection","$getSelection","event","node","$getNodeByKey","$isImageNode","useEffect","isMounted","unregister","mergeRegister","editorState","SELECTION_CHANGE_COMMAND","_","activeEditor","COMMAND_PRIORITY_LOW","CLICK_COMMAND","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","onResizeEnd","nextWidth","nextHeight","setTimeout","onResizeStart","draggable","isFocused","Suspense","ImageResizer"],"mappings":"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"}