@webiny/lexical-nodes 5.38.0-beta.0

package/components/ImageNode/ImageComponent.js

@@ -0,0 +1,254 @@
+"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"));
+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.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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(_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;
+  useSuspenseImage(src);
+  return /*#__PURE__*/React.createElement("img", {
+    id: id,
+    className: className || undefined,
+    src: src,
+    alt: altText,
+    ref: imageRef,
+    style: {
+      height: height,
+      maxWidth: maxWidth,
+      width: 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;
+      event.preventDefault();
+      var node = (0, _lexical.$getNodeByKey)(nodeKey);
+      if ((0, _ImageNode.$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;
+      if (isMounted) {
+        setSelection(editorState.read(function () {
+          return (0, _lexical.$getSelection)();
+        }));
+      }
+    }), editor.registerCommand(_lexical.SELECTION_CHANGE_COMMAND, function (_, activeEditor) {
+      activeEditorRef.current = activeEditor;
+      return false;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.CLICK_COMMAND, 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;
+    }, _lexical.COMMAND_PRIORITY_LOW), editor.registerCommand(_lexical.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.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 () {
+      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) {
+    // Delay hiding the resize bars for click case
+    setTimeout(function () {
+      setIsResizing(false);
+    }, 200);
+    editor.update(function () {
+      var node = (0, _lexical.$getNodeByKey)(nodeKey);
+      if ((0, _ImageNode.$isImageNode)(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  var onResizeStart = function 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, {
+    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,
+    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,
+    editor: editor,
+    buttonRef: buttonRef,
+    imageRef: imageRef,
+    maxWidth: maxWidth,
+    onResizeStart: onResizeStart,
+    onResizeEnd: onResizeEnd,
+    captionsEnabled: captionsEnabled
+  })));
+}
+
+//# sourceMappingURL=ImageComponent.js.map

package/components/ImageNode/ImageComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","_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\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}: {\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}): 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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"}

package/components/ImageNode/ImageResizer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ *
+ */
+/// <reference types="react" />
+/// <reference types="web" />
+/// <reference types="react" />
+import type { LexicalEditor } from "lexical";
+export declare function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled }: {
+    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;

package/components/ImageNode/ImageResizer.js

@@ -0,0 +1,215 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ImageResizer = ImageResizer;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * 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.
+ *
+ */
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+var Direction = {
+  east: 1 << 0,
+  north: 1 << 3,
+  south: 1 << 1,
+  west: 1 << 2
+};
+function ImageResizer(_ref) {
+  var onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    buttonRef = _ref.buttonRef,
+    imageRef = _ref.imageRef,
+    maxWidth = _ref.maxWidth,
+    editor = _ref.editor,
+    showCaption = _ref.showCaption,
+    setShowCaption = _ref.setShowCaption,
+    captionsEnabled = _ref.captionsEnabled;
+  var controlWrapperRef = (0, React.useRef)(null);
+  var userSelect = (0, React.useRef)({
+    priority: "",
+    value: "default"
+  });
+  var positioningRef = (0, React.useRef)({
+    currentHeight: 0,
+    currentWidth: 0,
+    direction: 0,
+    isResizing: false,
+    ratio: 0,
+    startHeight: 0,
+    startWidth: 0,
+    startX: 0,
+    startY: 0
+  });
+  var editorRootElement = editor.getRootElement();
+  // Find max width, accounting for editor padding.
+  var maxWidthContainer = maxWidth ? maxWidth : editorRootElement !== null ? editorRootElement.getBoundingClientRect().width - 20 : 100;
+  var maxHeightContainer = editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;
+  var minWidth = 100;
+  var minHeight = 100;
+  var setStartCursor = function setStartCursor(direction) {
+    var ew = direction === Direction.east || direction === Direction.west;
+    var ns = direction === Direction.north || direction === Direction.south;
+    var nwse = direction & Direction.north && direction & Direction.west || direction & Direction.south && direction & Direction.east;
+    var cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "".concat(cursorDir, "-resize"), "important");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "".concat(cursorDir, "-resize"), "important");
+      userSelect.current.value = document.body.style.getPropertyValue("-webkit-user-select");
+      userSelect.current.priority = document.body.style.getPropertyPriority("-webkit-user-select");
+      document.body.style.setProperty("-webkit-user-select", "none", "important");
+    }
+  };
+  var setEndCursor = function setEndCursor() {
+    if (editorRootElement !== null) {
+      editorRootElement.style.setProperty("cursor", "text");
+    }
+    if (document.body !== null) {
+      document.body.style.setProperty("cursor", "default");
+      document.body.style.setProperty("-webkit-user-select", userSelect.current.value, userSelect.current.priority);
+    }
+  };
+  var handlePointerDown = function handlePointerDown(event, direction) {
+    if (!editor.isEditable()) {
+      return;
+    }
+    var image = imageRef.current;
+    var controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null) {
+      var _image$getBoundingCli = image.getBoundingClientRect(),
+        _width = _image$getBoundingCli.width,
+        _height = _image$getBoundingCli.height;
+      var positioning = positioningRef.current;
+      positioning.startWidth = _width;
+      positioning.startHeight = _height;
+      positioning.ratio = _width / _height;
+      positioning.currentWidth = _width;
+      positioning.currentHeight = _height;
+      positioning.startX = event.clientX;
+      positioning.startY = event.clientY;
+      positioning.isResizing = true;
+      positioning.direction = direction;
+      setStartCursor(direction);
+      onResizeStart();
+      controlWrapper.classList.add("image-control-wrapper--resizing");
+      image.style.height = "".concat(_height, "px");
+      image.style.width = "".concat(_width, "px");
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
+    }
+  };
+  var handlePointerMove = function handlePointerMove(event) {
+    var image = imageRef.current;
+    var positioning = positioningRef.current;
+    var isHorizontal = positioning.direction & (Direction.east | Direction.west);
+    var isVertical = positioning.direction & (Direction.south | Direction.north);
+    if (image !== null && positioning.isResizing) {
+      // Corner cursor
+      if (isHorizontal && isVertical) {
+        var diff = Math.floor(positioning.startX - event.clientX);
+        diff = positioning.direction & Direction.east ? -diff : diff;
+        var _width2 = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+        var _height2 = _width2 / positioning.ratio;
+        image.style.width = "".concat(_width2, "px");
+        image.style.height = "".concat(_height2, "px");
+        positioning.currentHeight = _height2;
+        positioning.currentWidth = _width2;
+      } else if (isVertical) {
+        var _diff = Math.floor(positioning.startY - event.clientY);
+        _diff = positioning.direction & Direction.south ? -_diff : _diff;
+        var _height3 = clamp(positioning.startHeight + _diff, minHeight, maxHeightContainer);
+        image.style.height = "".concat(_height3, "px");
+        positioning.currentHeight = _height3;
+      } else {
+        var _diff2 = Math.floor(positioning.startX - event.clientX);
+        _diff2 = positioning.direction & Direction.east ? -_diff2 : _diff2;
+        var _width3 = clamp(positioning.startWidth + _diff2, minWidth, maxWidthContainer);
+        image.style.width = "".concat(_width3, "px");
+        positioning.currentWidth = _width3;
+      }
+    }
+  };
+  var handlePointerUp = function handlePointerUp() {
+    var image = imageRef.current;
+    var positioning = positioningRef.current;
+    var controlWrapper = controlWrapperRef.current;
+    if (image !== null && controlWrapper !== null && positioning.isResizing) {
+      var _width4 = positioning.currentWidth;
+      var _height4 = positioning.currentHeight;
+      positioning.startWidth = 0;
+      positioning.startHeight = 0;
+      positioning.ratio = 0;
+      positioning.startX = 0;
+      positioning.startY = 0;
+      positioning.currentWidth = 0;
+      positioning.currentHeight = 0;
+      positioning.isResizing = false;
+      controlWrapper.classList.remove("image-control-wrapper--resizing");
+      setEndCursor();
+      onResizeEnd(_width4, _height4);
+      document.removeEventListener("pointermove", handlePointerMove);
+      document.removeEventListener("pointerup", handlePointerUp);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    ref: controlWrapperRef
+  }, !showCaption && captionsEnabled && /*#__PURE__*/React.createElement("button", {
+    className: "image-caption-button",
+    ref: buttonRef,
+    onClick: function onClick() {
+      setShowCaption(!showCaption);
+    }
+  }, "Add Caption"), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-n",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.north);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-ne",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.north | Direction.east);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-e",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.east);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-se",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.south | Direction.east);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-s",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.south);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-sw",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.south | Direction.west);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-w",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.west);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "image-resizer image-resizer-nw",
+    onPointerDown: function onPointerDown(event) {
+      handlePointerDown(event, Direction.north | Direction.west);
+    }
+  }));
+}
+
+//# sourceMappingURL=ImageResizer.js.map

package/components/ImageNode/ImageResizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","_interopRequireWildcard","require","clamp","value","min","max","Math","Direction","east","north","south","west","ImageResizer","_ref","onResizeStart","onResizeEnd","buttonRef","imageRef","maxWidth","editor","showCaption","setShowCaption","captionsEnabled","controlWrapperRef","useRef","userSelect","priority","positioningRef","currentHeight","currentWidth","direction","isResizing","ratio","startHeight","startWidth","startX","startY","editorRootElement","getRootElement","maxWidthContainer","getBoundingClientRect","width","maxHeightContainer","height","minWidth","minHeight","setStartCursor","ew","ns","nwse","cursorDir","style","setProperty","concat","document","body","current","getPropertyValue","getPropertyPriority","setEndCursor","handlePointerDown","event","isEditable","image","controlWrapper","_image$getBoundingCli","positioning","clientX","clientY","classList","add","addEventListener","handlePointerMove","handlePointerUp","isHorizontal","isVertical","diff","floor","remove","removeEventListener","createElement","ref","className","onClick","onPointerDown"],"sources":["ImageResizer.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 */\n\nimport type { LexicalEditor } from \"lexical\";\n\nimport * as React from \"react\";\nimport { useRef } from \"react\";\n\nfunction clamp(value: number, min: number, max: number) {\n    return Math.min(Math.max(value, min), max);\n}\n\nconst Direction = {\n    east: 1 << 0,\n    north: 1 << 3,\n    south: 1 << 1,\n    west: 1 << 2\n};\n\nexport function ImageResizer({\n    onResizeStart,\n    onResizeEnd,\n    buttonRef,\n    imageRef,\n    maxWidth,\n    editor,\n    showCaption,\n    setShowCaption,\n    captionsEnabled\n}: {\n    editor: LexicalEditor;\n    buttonRef: { current: null | HTMLButtonElement };\n    imageRef: { current: null | HTMLElement };\n    maxWidth?: number;\n    onResizeEnd: (width: \"inherit\" | number, height: \"inherit\" | number) => void;\n    onResizeStart: () => void;\n    setShowCaption: (show: boolean) => void;\n    showCaption: boolean;\n    captionsEnabled: boolean;\n}): JSX.Element {\n    const controlWrapperRef = useRef<HTMLDivElement>(null);\n    const userSelect = useRef({\n        priority: \"\",\n        value: \"default\"\n    });\n    const positioningRef = useRef<{\n        currentHeight: \"inherit\" | number;\n        currentWidth: \"inherit\" | number;\n        direction: number;\n        isResizing: boolean;\n        ratio: number;\n        startHeight: number;\n        startWidth: number;\n        startX: number;\n        startY: number;\n    }>({\n        currentHeight: 0,\n        currentWidth: 0,\n        direction: 0,\n        isResizing: false,\n        ratio: 0,\n        startHeight: 0,\n        startWidth: 0,\n        startX: 0,\n        startY: 0\n    });\n    const editorRootElement = editor.getRootElement();\n    // Find max width, accounting for editor padding.\n    const maxWidthContainer = maxWidth\n        ? maxWidth\n        : editorRootElement !== null\n        ? editorRootElement.getBoundingClientRect().width - 20\n        : 100;\n    const maxHeightContainer =\n        editorRootElement !== null ? editorRootElement.getBoundingClientRect().height - 20 : 100;\n\n    const minWidth = 100;\n    const minHeight = 100;\n\n    const setStartCursor = (direction: number) => {\n        const ew = direction === Direction.east || direction === Direction.west;\n        const ns = direction === Direction.north || direction === Direction.south;\n        const nwse =\n            (direction & Direction.north && direction & Direction.west) ||\n            (direction & Direction.south && direction & Direction.east);\n\n        const cursorDir = ew ? \"ew\" : ns ? \"ns\" : nwse ? \"nwse\" : \"nesw\";\n\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", `${cursorDir}-resize`, \"important\");\n            userSelect.current.value = document.body.style.getPropertyValue(\"-webkit-user-select\");\n            userSelect.current.priority =\n                document.body.style.getPropertyPriority(\"-webkit-user-select\");\n            document.body.style.setProperty(\"-webkit-user-select\", `none`, \"important\");\n        }\n    };\n\n    const setEndCursor = () => {\n        if (editorRootElement !== null) {\n            editorRootElement.style.setProperty(\"cursor\", \"text\");\n        }\n        if (document.body !== null) {\n            document.body.style.setProperty(\"cursor\", \"default\");\n            document.body.style.setProperty(\n                \"-webkit-user-select\",\n                userSelect.current.value,\n                userSelect.current.priority\n            );\n        }\n    };\n\n    const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>, direction: number) => {\n        if (!editor.isEditable()) {\n            return;\n        }\n\n        const image = imageRef.current;\n        const controlWrapper = controlWrapperRef.current;\n\n        if (image !== null && controlWrapper !== null) {\n            const { width, height } = image.getBoundingClientRect();\n            const positioning = positioningRef.current;\n            positioning.startWidth = width;\n            positioning.startHeight = height;\n            positioning.ratio = width / height;\n            positioning.currentWidth = width;\n            positioning.currentHeight = height;\n            positioning.startX = event.clientX;\n            positioning.startY = event.clientY;\n            positioning.isResizing = true;\n            positioning.direction = direction;\n\n            setStartCursor(direction);\n            onResizeStart();\n\n            controlWrapper.classList.add(\"image-control-wrapper--resizing\");\n            image.style.height = `${height}px`;\n            image.style.width = `${width}px`;\n\n            document.addEventListener(\"pointermove\", handlePointerMove);\n            document.addEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    const handlePointerMove = (event: PointerEvent) => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n\n        const isHorizontal = positioning.direction & (Direction.east | Direction.west);\n        const isVertical = positioning.direction & (Direction.south | Direction.north);\n\n        if (image !== null && positioning.isResizing) {\n            // Corner cursor\n            if (isHorizontal && isVertical) {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                const height = width / positioning.ratio;\n                image.style.width = `${width}px`;\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n                positioning.currentWidth = width;\n            } else if (isVertical) {\n                let diff = Math.floor(positioning.startY - event.clientY);\n                diff = positioning.direction & Direction.south ? -diff : diff;\n\n                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);\n\n                image.style.height = `${height}px`;\n                positioning.currentHeight = height;\n            } else {\n                let diff = Math.floor(positioning.startX - event.clientX);\n                diff = positioning.direction & Direction.east ? -diff : diff;\n\n                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);\n\n                image.style.width = `${width}px`;\n                positioning.currentWidth = width;\n            }\n        }\n    };\n    const handlePointerUp = () => {\n        const image = imageRef.current;\n        const positioning = positioningRef.current;\n        const controlWrapper = controlWrapperRef.current;\n        if (image !== null && controlWrapper !== null && positioning.isResizing) {\n            const width = positioning.currentWidth;\n            const height = positioning.currentHeight;\n            positioning.startWidth = 0;\n            positioning.startHeight = 0;\n            positioning.ratio = 0;\n            positioning.startX = 0;\n            positioning.startY = 0;\n            positioning.currentWidth = 0;\n            positioning.currentHeight = 0;\n            positioning.isResizing = false;\n\n            controlWrapper.classList.remove(\"image-control-wrapper--resizing\");\n\n            setEndCursor();\n            onResizeEnd(width, height);\n\n            document.removeEventListener(\"pointermove\", handlePointerMove);\n            document.removeEventListener(\"pointerup\", handlePointerUp);\n        }\n    };\n    return (\n        <div ref={controlWrapperRef}>\n            {!showCaption && captionsEnabled && (\n                <button\n                    className=\"image-caption-button\"\n                    ref={buttonRef}\n                    onClick={() => {\n                        setShowCaption(!showCaption);\n                    }}\n                >\n                    Add Caption\n                </button>\n            )}\n            <div\n                className=\"image-resizer image-resizer-n\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-ne\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-e\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-se\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.east);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-s\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-sw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.south | Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-w\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.west);\n                }}\n            />\n            <div\n                className=\"image-resizer image-resizer-nw\"\n                onPointerDown={event => {\n                    handlePointerDown(event, Direction.north | Direction.west);\n                }}\n            />\n        </div>\n    );\n}\n"],"mappings":"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"}

package/components/ImageNode/Placeholder.css

@@ -0,0 +1,20 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.Placeholder__root {
+  font-size: 15px;
+  margin-top: -20px;
+  color: #999;
+  overflow: hidden;
+  position: relative;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+  pointer-events: none;
+}

package/components/ImageNode/Placeholder.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 "./Placeholder.css";
+import * as React from "react";
+import { ReactNode } from "react";
+export declare function Placeholder({ children, className, styles }: {
+    children: ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+}): JSX.Element;