@webiny/lexical-nodes 6.0.0-beta.0 → 6.0.0-rc.0

package/components/ImageNode/ImageComponent.js

@@ -1,29 +1,3 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ImageComponent;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-require("./ImageComponent.css");
-var _LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlugin");
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _LexicalErrorBoundary = _interopRequireDefault(require("@lexical/react/LexicalErrorBoundary"));
-var _LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin");
-var _LexicalNestedComposer = require("@lexical/react/LexicalNestedComposer");
-var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
-var _useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
-var _utils = require("@lexical/utils");
-var _lexical = require("lexical");
-var _Placeholder = require("./Placeholder");
-var _ImageResizer = require("./ImageResizer");
-var _SharedHistoryContext = require("./SharedHistoryContext");
-var _ImageNode = require("../../ImageNode");
-var _ContentEditable = require("./ContentEditable");
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -31,29 +5,37 @@ var _ContentEditable = require("./ContentEditable");
  * LICENSE file in the root directory of this source tree.
  *
  */
-
-var imageCache = new Set();
+import * as React from "react";
+import { Suspense, useCallback, useEffect, useRef, useState } from "react";
+import { 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";
+const imageCache = new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
-    throw new Promise(function (resolve) {
-      var img = new Image();
+    throw new Promise(resolve => {
+      const img = new Image();
       img.src = src;
-      img.onload = function () {
+      img.onload = () => {
         imageCache.add(src);
         resolve(null);
       };
     });
   }
 }
-function LazyImage(_ref) {
-  var id = _ref.id,
-    altText = _ref.altText,
-    className = _ref.className,
-    imageRef = _ref.imageRef,
-    src = _ref.src,
-    width = _ref.width,
-    height = _ref.height,
-    maxWidth = _ref.maxWidth;
+function LazyImage({
+  id,
+  altText,
+  className,
+  imageRef,
+  src,
+  width,
+  height,
+  maxWidth
+}) {
   useSuspenseImage(src);
   return /*#__PURE__*/React.createElement("img", {
     id: id,
@@ -62,102 +44,54 @@ function LazyImage(_ref) {
     alt: altText,
     ref: imageRef,
     style: {
-      height: height,
-      maxWidth: maxWidth,
-      width: width
+      height,
+      maxWidth,
+      width
     },
     draggable: "false"
   });
 }
-function ImageComponent(_ref2) {
-  var id = _ref2.id,
-    src = _ref2.src,
-    altText = _ref2.altText,
-    nodeKey = _ref2.nodeKey,
-    width = _ref2.width,
-    height = _ref2.height,
-    maxWidth = _ref2.maxWidth,
-    resizable = _ref2.resizable,
-    showCaption = _ref2.showCaption,
-    caption = _ref2.caption,
-    captionsEnabled = _ref2.captionsEnabled;
-  var imageRef = (0, _react.useRef)(null);
-  var buttonRef = (0, _react.useRef)(null);
-  var _useLexicalNodeSelect = (0, _useLexicalNodeSelection.useLexicalNodeSelection)(nodeKey),
-    _useLexicalNodeSelect2 = (0, _slicedToArray2.default)(_useLexicalNodeSelect, 3),
-    isSelected = _useLexicalNodeSelect2[0],
-    setSelected = _useLexicalNodeSelect2[1],
-    clearSelection = _useLexicalNodeSelect2[2];
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isResizing = _useState2[0],
-    setIsResizing = _useState2[1];
-  var _useLexicalComposerCo = (0, _LexicalComposerContext.useLexicalComposerContext)(),
-    _useLexicalComposerCo2 = (0, _slicedToArray2.default)(_useLexicalComposerCo, 1),
-    editor = _useLexicalComposerCo2[0];
-  var _useState3 = (0, _react.useState)(null),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    selection = _useState4[0],
-    setSelection = _useState4[1];
-  var activeEditorRef = (0, _react.useRef)(null);
-  var onDelete = (0, _react.useCallback)(function (payload) {
-    if (isSelected && (0, _lexical.$isNodeSelection)((0, _lexical.$getSelection)())) {
-      var event = payload;
+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();
-      var node = (0, _lexical.$getNodeByKey)(nodeKey);
-      if ((0, _ImageNode.$isImageNode)(node)) {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
         node.remove();
       }
       setSelected(false);
     }
     return false;
   }, [isSelected, nodeKey, setSelected]);
-  var onEnter = (0, _react.useCallback)(function (event) {
-    var latestSelection = (0, _lexical.$getSelection)();
-    var buttonElem = buttonRef.current;
-    if (isSelected && (0, _lexical.$isNodeSelection)(latestSelection) && latestSelection.getNodes().length === 1) {
-      if (showCaption) {
-        // Move focus into nested editor
-        (0, _lexical.$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.useCallback)(function (event) {
-    if (activeEditorRef.current === caption || buttonRef.current === event.target) {
-      (0, _lexical.$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.useEffect)(function () {
-    var isMounted = true;
-    var unregister = (0, _utils.mergeRegister)(editor.registerUpdateListener(function (_ref3) {
-      var editorState = _ref3.editorState;
+  useEffect(() => {
+    let isMounted = true;
+    const unregister = mergeRegister(editor.registerUpdateListener(({
+      editorState
+    }) => {
       if (isMounted) {
-        setSelection(editorState.read(function () {
-          return (0, _lexical.$getSelection)();
-        }));
+        setSelection(editorState.read(() => $getSelection()));
       }
-    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_, activeEditor) {
+    }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor) => {
       activeEditorRef.current = activeEditor;
       return false;
-    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.CLICK_COMMAND, function (payload) {
-      var event = payload;
+    }, COMMAND_PRIORITY_LOW), editor.registerCommand(CLICK_COMMAND, payload => {
+      const event = payload;
       if (isResizing) {
         return true;
       }
@@ -171,7 +105,7 @@ function ImageComponent(_ref2) {
         return true;
       }
       return false;
-    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.DRAGSTART_COMMAND, function (event) {
+    }, 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).
@@ -179,77 +113,49 @@ function ImageComponent(_ref2) {
         return true;
       }
       return false;
-    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_DELETE_COMMAND, onDelete, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_BACKSPACE_COMMAND, onDelete, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ENTER_COMMAND, onEnter, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.KEY_ESCAPE_COMMAND, onEscape, _lexical.COMMAND_PRIORITY_LOW));
-    return function () {
+    }, 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, onEnter, onEscape, setSelected]);
-  var setShowCaption = function setShowCaption() {
-    editor.update(function () {
-      var node = (0, _lexical.$getNodeByKey)(nodeKey);
-      if ((0, _ImageNode.$isImageNode)(node)) {
-        node.setShowCaption(true);
-      }
-    });
-  };
-  var onResizeEnd = function onResizeEnd(nextWidth, nextHeight) {
+  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, setSelected]);
+  const onResizeEnd = (nextWidth, nextHeight) => {
     // Delay hiding the resize bars for click case
-    setTimeout(function () {
+    setTimeout(() => {
       setIsResizing(false);
     }, 200);
-    editor.update(function () {
-      var node = (0, _lexical.$getNodeByKey)(nodeKey);
-      if ((0, _ImageNode.$isImageNode)(node)) {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
         node.setWidthAndHeight(nextWidth, nextHeight);
       }
     });
   };
-  var onResizeStart = function onResizeStart() {
+  const onResizeStart = () => {
     setIsResizing(true);
   };
-  var _useSharedHistoryCont = (0, _SharedHistoryContext.useSharedHistoryContext)(),
-    historyState = _useSharedHistoryCont.historyState;
-  var draggable = isSelected && (0, _lexical.$isNodeSelection)(selection) && !isResizing;
-  var isFocused = isSelected || isResizing;
-  return /*#__PURE__*/React.createElement(_react.Suspense, {
+  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 ".concat((0, _lexical.$isNodeSelection)(selection) ? "draggable" : "") : null,
+    className: isFocused ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}` : null,
     src: src,
     altText: altText,
     imageRef: imageRef,
     width: width,
     height: height,
     maxWidth: maxWidth
-  })), showCaption && /*#__PURE__*/React.createElement("div", {
-    className: "image-caption-container"
-  }, /*#__PURE__*/React.createElement(_LexicalNestedComposer.LexicalNestedComposer, {
-    initialEditor: caption
-  }, /*#__PURE__*/React.createElement(_LexicalAutoFocusPlugin.AutoFocusPlugin, null), /*#__PURE__*/React.createElement(_LexicalHistoryPlugin.HistoryPlugin, {
-    externalHistoryState: historyState
-  }), /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(_ContentEditable.LexicalContentEditable, {
-      className: "ImageNode__contentEditable"
-    }),
-    placeholder: /*#__PURE__*/React.createElement(_Placeholder.Placeholder, {
-      className: "ImageNode__placeholder"
-    }, "Enter a caption..."),
-    ErrorBoundary: _LexicalErrorBoundary.default
-  }))), resizable && (0, _lexical.$isNodeSelection)(selection) && isFocused && /*#__PURE__*/React.createElement(_ImageResizer.ImageResizer, {
-    showCaption: showCaption,
-    setShowCaption: setShowCaption,
+  })), resizable && $isNodeSelection(selection) && isFocused ? /*#__PURE__*/React.createElement(ImageResizer, {
     editor: editor,
-    buttonRef: buttonRef,
     imageRef: imageRef,
     maxWidth: maxWidth,
     onResizeStart: onResizeStart,
-    onResizeEnd: onResizeEnd,
-    captionsEnabled: captionsEnabled
-  })));
+    onResizeEnd: onResizeEnd
+  }) : null));
 }
 
 //# sourceMappingURL=ImageComponent.js.map

package/components/ImageNode/ImageComponent.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","React","_LexicalAutoFocusPlugin","_LexicalComposerContext","_LexicalErrorBoundary","_interopRequireDefault","_LexicalHistoryPlugin","_LexicalNestedComposer","_LexicalRichTextPlugin","_useLexicalNodeSelection","_utils","_lexical","_Placeholder","_ImageResizer","_SharedHistoryContext","_ImageNode","_ContentEditable","imageCache","Set","useSuspenseImage","src","has","Promise","resolve","img","Image","onload","add","LazyImage","_ref","id","altText","className","imageRef","width","height","maxWidth","createElement","undefined","alt","ref","style","draggable","ImageComponent","_ref2","nodeKey","resizable","showCaption","caption","captionsEnabled","useRef","buttonRef","_useLexicalNodeSelect","useLexicalNodeSelection","_useLexicalNodeSelect2","_slicedToArray2","default","isSelected","setSelected","clearSelection","_useState","useState","_useState2","isResizing","setIsResizing","_useLexicalComposerCo","useLexicalComposerContext","_useLexicalComposerCo2","editor","_useState3","_useState4","selection","setSelection","activeEditorRef","onDelete","useCallback","payload","$isNodeSelection","$getSelection","event","preventDefault","node","$getNodeByKey","$isImageNode","remove","onEnter","latestSelection","buttonElem","current","getNodes","length","$setSelection","focus","document","activeElement","onEscape","target","update","parentRootElement","getRootElement","useEffect","isMounted","unregister","mergeRegister","registerUpdateListener","_ref3","editorState","read","registerCommand","SELECTION_CHANGE_COMMAND","_","activeEditor","COMMAND_PRIORITY_LOW","CLICK_COMMAND","shiftKey","DRAGSTART_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","setShowCaption","onResizeEnd","nextWidth","nextHeight","setTimeout","setWidthAndHeight","onResizeStart","_useSharedHistoryCont","useSharedHistoryContext","historyState","isFocused","Suspense","fallback","Fragment","concat","LexicalNestedComposer","initialEditor","AutoFocusPlugin","HistoryPlugin","externalHistoryState","RichTextPlugin","contentEditable","LexicalContentEditable","placeholder","Placeholder","ErrorBoundary","LexicalErrorBoundary","ImageResizer"],"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 { GridSelection, LexicalEditor, NodeKey, NodeSelection, RangeSelection } from \"lexical\";\n\nimport \"./ImageComponent.css\";\n\nimport { AutoFocusPlugin } from \"@lexical/react/LexicalAutoFocusPlugin\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport LexicalErrorBoundary from \"@lexical/react/LexicalErrorBoundary\";\nimport { HistoryPlugin } from \"@lexical/react/LexicalHistoryPlugin\";\nimport { LexicalNestedComposer } from \"@lexical/react/LexicalNestedComposer\";\nimport { RichTextPlugin } from \"@lexical/react/LexicalRichTextPlugin\";\nimport { useLexicalNodeSelection } from \"@lexical/react/useLexicalNodeSelection\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n    $getNodeByKey,\n    $getSelection,\n    $isNodeSelection,\n    $setSelection,\n    CLICK_COMMAND,\n    COMMAND_PRIORITY_LOW,\n    DRAGSTART_COMMAND,\n    KEY_BACKSPACE_COMMAND,\n    KEY_DELETE_COMMAND,\n    KEY_ENTER_COMMAND,\n    KEY_ESCAPE_COMMAND,\n    SELECTION_CHANGE_COMMAND\n} from \"lexical\";\nimport { Placeholder } from \"./Placeholder\";\nimport { ImageResizer } from \"./ImageResizer\";\nimport { useSharedHistoryContext } from \"./SharedHistoryContext\";\nimport { $isImageNode } from \"~/ImageNode\";\nimport { LexicalContentEditable } from \"./ContentEditable\";\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}): 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    caption: LexicalEditor;\n    height: \"inherit\" | number;\n    maxWidth: number;\n    nodeKey: NodeKey;\n    resizable: boolean;\n    showCaption: boolean;\n    src: string;\n    width: \"inherit\" | number;\n    captionsEnabled: boolean;\n}\n\nexport default function ImageComponent({\n    id,\n    src,\n    altText,\n    nodeKey,\n    width,\n    height,\n    maxWidth,\n    resizable,\n    showCaption,\n    caption,\n    captionsEnabled\n}: ImageComponentProps): JSX.Element {\n    const imageRef = useRef<null | HTMLImageElement>(null);\n    const buttonRef = useRef<HTMLButtonElement | null>(null);\n    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);\n    const [isResizing, setIsResizing] = useState<boolean>(false);\n    const [editor] = useLexicalComposerContext();\n    const [selection, setSelection] = useState<\n        RangeSelection | NodeSelection | GridSelection | null\n    >(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    const onEnter = useCallback(\n        (event: KeyboardEvent) => {\n            const latestSelection = $getSelection();\n            const buttonElem = buttonRef.current;\n            if (\n                isSelected &&\n                $isNodeSelection(latestSelection) &&\n                latestSelection.getNodes().length === 1\n            ) {\n                if (showCaption) {\n                    // Move focus into nested editor\n                    $setSelection(null);\n                    event.preventDefault();\n                    caption.focus();\n                    return true;\n                } else if (buttonElem !== null && buttonElem !== document.activeElement) {\n                    event.preventDefault();\n                    buttonElem.focus();\n                    return true;\n                }\n            }\n            return false;\n        },\n        [caption, isSelected, showCaption]\n    );\n\n    const onEscape = useCallback(\n        (event: KeyboardEvent) => {\n            if (activeEditorRef.current === caption || buttonRef.current === event.target) {\n                $setSelection(null);\n                editor.update(() => {\n                    setSelected(true);\n                    const parentRootElement = editor.getRootElement();\n                    if (parentRootElement !== null) {\n                        parentRootElement.focus();\n                    }\n                });\n                return true;\n            }\n            return false;\n        },\n        [caption, editor, 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            editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),\n            editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)\n        );\n        return () => {\n            isMounted = false;\n            unregister();\n        };\n    }, [\n        clearSelection,\n        editor,\n        isResizing,\n        isSelected,\n        nodeKey,\n        onDelete,\n        onEnter,\n        onEscape,\n        setSelected\n    ]);\n\n    const setShowCaption = () => {\n        editor.update(() => {\n            const node = $getNodeByKey(nodeKey);\n            if ($isImageNode(node)) {\n                node.setShowCaption(true);\n            }\n        });\n    };\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 { historyState } = useSharedHistoryContext();\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                {showCaption && (\n                    <div className=\"image-caption-container\">\n                        <LexicalNestedComposer initialEditor={caption}>\n                            <AutoFocusPlugin />\n                            <HistoryPlugin externalHistoryState={historyState} />\n                            <RichTextPlugin\n                                contentEditable={\n                                    <LexicalContentEditable className=\"ImageNode__contentEditable\" />\n                                }\n                                placeholder={\n                                    <Placeholder className=\"ImageNode__placeholder\">\n                                        Enter a caption...\n                                    </Placeholder>\n                                }\n                                ErrorBoundary={LexicalErrorBoundary}\n                            />\n                        </LexicalNestedComposer>\n                    </div>\n                )}\n                {resizable && $isNodeSelection(selection) && isFocused && (\n                    <ImageResizer\n                        showCaption={showCaption}\n                        setShowCaption={setShowCaption}\n                        editor={editor}\n                        buttonRef={buttonRef}\n                        imageRef={imageRef}\n                        maxWidth={maxWidth}\n                        onResizeStart={onResizeStart}\n                        onResizeEnd={onResizeEnd}\n                        captionsEnabled={captionsEnabled}\n                    />\n                )}\n            </>\n        </Suspense>\n    );\n}\n"],"mappings":"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","ignoreList":[]}
+{"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}): 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): 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":[]}

package/components/ImageNode/ImageResizer.d.ts

@@ -5,20 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-/// <reference types="react" />
 import type { LexicalEditor } from "lexical";
-export declare function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled }: {
+export declare function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor }: {
     editor: LexicalEditor;
-    buttonRef: {
-        current: null | HTMLButtonElement;
-    };
     imageRef: {
         current: null | HTMLElement;
     };
     maxWidth?: number;
     onResizeEnd: (width: "inherit" | number, height: "inherit" | number) => void;
     onResizeStart: () => void;
-    setShowCaption: (show: boolean) => void;
-    showCaption: boolean;
-    captionsEnabled: boolean;
 }): JSX.Element;