@webiny/lexical-nodes 0.0.0-unstable.06b2ede40f

package/QuoteNode.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["$applyNodeReplacement","findTypographyStyleByHtmlTag","addClassNamesToElement","QuoteNode","BaseQuoteNode","getStyleId","constructor","options","key","__styleId","styleId","__className","className","setStyleId","setClassName","getClassName","setDefaultTypography","themeEmotionMap","typographyStyle","id","getType","clone","node","getKey","createDOM","config","element","updateElementWithThemeClasses","theme","exportDOM","editor","base","classList","add","importDomConversionMap","conversion","convertBlockquoteElement","priority","importDOM","blockquote","importJSON","serializedNode","$createQuoteNode","setFormat","format","setIndent","indent","setDirection","direction","styles","exportJSON","type","emotionMap","$isQuoteNode"],"sources":["QuoteNode.ts"],"sourcesContent":["import type {\n    DOMConversion,\n    DOMConversionMap,\n    DOMExportOutput,\n    EditorConfig,\n    LexicalEditor,\n    LexicalNode,\n    NodeKey,\n    Spread\n} from \"lexical\";\nimport { $applyNodeReplacement } from \"lexical\";\nimport type { EditorTheme, ThemeEmotionMap } from \"@webiny/lexical-theme\";\nimport { findTypographyStyleByHtmlTag } from \"@webiny/lexical-theme\";\nimport { addClassNamesToElement } from \"@lexical/utils\";\nimport type { SerializedQuoteNode as BaseSerializedQuoteNode } from \"@lexical/rich-text\";\nimport { QuoteNode as BaseQuoteNode } from \"@lexical/rich-text\";\nimport type { ThemeStyleValue, TypographyStylesNode } from \"~/types\";\nimport { getStyleId } from \"~/utils/getStyleId\";\n\nexport type SerializedQuoteNode = Spread<\n    {\n        styleId?: string;\n        styles?: ThemeStyleValue[];\n        className?: string;\n        type: \"wby-quote\";\n    },\n    BaseSerializedQuoteNode\n>;\n\ninterface QuoteNodeOptions {\n    className?: string;\n    styleId?: string;\n    key?: NodeKey;\n}\n\nexport class QuoteNode extends BaseQuoteNode implements TypographyStylesNode {\n    private __styleId: string | undefined;\n    private __className: string | undefined;\n\n    constructor(options: QuoteNodeOptions = {}) {\n        super(options.key);\n        this.__styleId = options?.styleId;\n        this.__className = options?.className;\n    }\n\n    getStyleId(): string | undefined {\n        return this.__styleId;\n    }\n\n    setStyleId(styleId: string | undefined) {\n        this.__styleId = styleId;\n    }\n\n    setClassName(className: string | undefined) {\n        this.__className = className;\n    }\n\n    getClassName(): string | undefined {\n        return this.__className;\n    }\n\n    private setDefaultTypography(themeEmotionMap: ThemeEmotionMap) {\n        // For some time in v5 we had `quoteblock` as tag name :facepalm: We must not break it.\n        const typographyStyle = findTypographyStyleByHtmlTag(\n            [\"blockquote\", \"quoteblock\"],\n            themeEmotionMap\n        );\n\n        if (typographyStyle) {\n            this.__styleId = typographyStyle.id;\n            this.__className = typographyStyle.className;\n        }\n    }\n\n    static override getType(): string {\n        return \"wby-quote\";\n    }\n\n    static override clone(node: QuoteNode): QuoteNode {\n        return new QuoteNode({\n            styleId: node.getStyleId(),\n            className: node.getClassName(),\n            key: node.getKey()\n        });\n    }\n\n    override createDOM(config: EditorConfig): HTMLElement {\n        const element = super.createDOM(config);\n        return this.updateElementWithThemeClasses(element, config.theme as EditorTheme);\n    }\n\n    override exportDOM(editor: LexicalEditor): DOMExportOutput {\n        const base = super.exportDOM(editor);\n\n        const element = base.element as HTMLElement;\n        if (element && this.__className) {\n            element.classList.add(this.__className);\n        }\n\n        return { ...base, element };\n    }\n\n    static importDomConversionMap(): DOMConversion<HTMLElement> | null {\n        return {\n            conversion: convertBlockquoteElement,\n            priority: 0\n        };\n    }\n\n    static override importDOM(): DOMConversionMap | null {\n        return {\n            blockquote: () => {\n                return this.importDomConversionMap();\n            }\n        };\n    }\n\n    static override importJSON(serializedNode: SerializedQuoteNode): QuoteNode {\n        const node = $createQuoteNode();\n        node.setFormat(serializedNode.format);\n        node.setIndent(serializedNode.indent);\n        node.setDirection(serializedNode.direction);\n\n        const styleId = getStyleId({\n            styleId: serializedNode.styleId,\n            styles: serializedNode.styles\n        });\n\n        node.setStyleId(styleId);\n        node.setClassName(serializedNode.className);\n\n        return node;\n    }\n\n    override exportJSON(): SerializedQuoteNode {\n        return {\n            ...super.exportJSON(),\n            type: \"wby-quote\",\n            className: this.__className,\n            styleId: this.__styleId\n        };\n    }\n\n    protected updateElementWithThemeClasses(element: HTMLElement, theme: EditorTheme): HTMLElement {\n        if (!theme?.emotionMap) {\n            return element;\n        }\n\n        if (!this.__styleId || !this.__className) {\n            this.setDefaultTypography(theme.emotionMap);\n        }\n\n        if (this.__className) {\n            addClassNamesToElement(element, this.__className);\n        }\n\n        return element;\n    }\n}\n\nfunction convertBlockquoteElement() {\n    const node = $createQuoteNode();\n    return {\n        node\n    };\n}\n\nexport function $createQuoteNode(styleId?: string, key?: NodeKey): QuoteNode {\n    return $applyNodeReplacement(new QuoteNode({ styleId, key }));\n}\n\nexport function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode {\n    return node instanceof QuoteNode;\n}\n"],"mappings":"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","ignoreList":[]}

package/README.md

@@ -0,0 +1,6 @@
+# @webiny/lexical-nodes
+
+[![](https://img.shields.io/npm/dw/@webiny/lexical-nodes.svg)](https://www.npmjs.com/package/@webiny/llexical-lexical-nodes)
+[![](https://img.shields.io/npm/v/@webiny/lexical-nodes.svg)](https://www.npmjs.com/package/@webiny/lexical-nodes)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

package/components/ImageNode/ContentEditable.css

@@ -0,0 +1,22 @@
+/**
+ * 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.
+ *
+ *
+ */
+.ContentEditable__root {
+    border: 0;
+    font-size: 15px;
+    display: block;
+    position: relative;
+    outline: 0;
+    padding: 8px 28px 40px;
+}
+@media (max-width: 1025px) {
+    .ContentEditable__root {
+        padding-left: 8px;
+        padding-right: 8px;
+    }
+}

package/components/ImageNode/ContentEditable.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="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.
+ *
+ */
+import "./ContentEditable.css";
+export declare function LexicalContentEditable({ className }: {
+    className?: string;
+}): JSX.Element;

package/components/ImageNode/ContentEditable.js

@@ -0,0 +1,19 @@
+/**
+ * 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 "./ContentEditable.css";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import * as React from "react";
+export function LexicalContentEditable({
+  className
+}) {
+  return /*#__PURE__*/React.createElement(ContentEditable, {
+    className: className || "ContentEditable__root"
+  });
+}
+
+//# sourceMappingURL=ContentEditable.js.map

package/components/ImageNode/ContentEditable.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ContentEditable","React","LexicalContentEditable","className","createElement"],"sources":["ContentEditable.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 \"./ContentEditable.css\";\n\nimport { ContentEditable } from \"@lexical/react/LexicalContentEditable\";\nimport * as React from \"react\";\n\nexport function LexicalContentEditable({ className }: { className?: string }): JSX.Element {\n    return <ContentEditable className={className || \"ContentEditable__root\"} />;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,eAAe,QAAQ,uCAAuC;AACvE,OAAO,KAAKC,KAAK,MAAM,OAAO;AAE9B,OAAO,SAASC,sBAAsBA,CAAC;EAAEC;AAAkC,CAAC,EAAe;EACvF,oBAAOF,KAAA,CAAAG,aAAA,CAACJ,eAAe;IAACG,SAAS,EAAEA,SAAS,IAAI;EAAwB,CAAE,CAAC;AAC/E","ignoreList":[]}

package/components/ImageNode/ImageComponent.css

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+.ImageNode__contentEditable {
+    min-height: 20px;
+    border: 0px;
+    resize: none;
+    cursor: text;
+    caret-color: rgb(5, 5, 5);
+    display: block;
+    position: relative;
+    outline: 0px;
+    padding: 10px;
+    user-select: text;
+    font-size: 12px;
+    width: calc(100% - 20px);
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.ImageNode__placeholder {
+    font-size: 12px;
+    color: #888;
+    overflow: hidden;
+    position: absolute;
+    text-overflow: ellipsis;
+    top: 10px;
+    left: 10px;
+    user-select: none;
+    white-space: nowrap;
+    display: inline-block;
+    pointer-events: none;
+}
+
+.image-control-wrapper--resizing {
+    touch-action: none;
+}

package/components/ImageNode/ImageComponent.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { LexicalEditor, NodeKey } from "lexical";
+import "./ImageComponent.css";
+interface ImageComponentProps {
+    id: string;
+    altText: string;
+    caption: LexicalEditor;
+    height: "inherit" | number;
+    maxWidth: number;
+    nodeKey: NodeKey;
+    resizable: boolean;
+    showCaption: boolean;
+    src: string;
+    width: "inherit" | number;
+    captionsEnabled: boolean;
+}
+export default function ImageComponent({ id, src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled }: ImageComponentProps): JSX.Element;
+export {};

package/components/ImageNode/ImageComponent.js

@@ -0,0 +1,235 @@
+/**
+ * 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 "./ImageComponent.css";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
+import { mergeRegister } from "@lexical/utils";
+import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, CLICK_COMMAND, COMMAND_PRIORITY_LOW, DRAGSTART_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
+import { Placeholder } from "./Placeholder";
+import { ImageResizer } from "./ImageResizer";
+import { useSharedHistoryContext } from "./SharedHistoryContext";
+import { $isImageNode } from "../../ImageNode";
+import { LexicalContentEditable } from "./ContentEditable";
+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);
+      };
+    });
+  }
+}
+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"
+  });
+}
+export default function ImageComponent({
+  id,
+  src,
+  altText,
+  nodeKey,
+  width,
+  height,
+  maxWidth,
+  resizable,
+  showCaption,
+  caption,
+  captionsEnabled
+}) {
+  const imageRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const [isResizing, setIsResizing] = useState(false);
+  const [editor] = useLexicalComposerContext();
+  const [selection, setSelection] = useState(null);
+  const activeEditorRef = useRef(null);
+  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]);
+  const onEnter = useCallback(event => {
+    const latestSelection = $getSelection();
+    const buttonElem = buttonRef.current;
+    if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+      if (showCaption) {
+        // Move focus into nested editor
+        $setSelection(null);
+        event.preventDefault();
+        caption.focus();
+        return true;
+      } else if (buttonElem !== null && buttonElem !== document.activeElement) {
+        event.preventDefault();
+        buttonElem.focus();
+        return true;
+      }
+    }
+    return false;
+  }, [caption, isSelected, showCaption]);
+  const onEscape = useCallback(event => {
+    if (activeEditorRef.current === caption || buttonRef.current === event.target) {
+      $setSelection(null);
+      editor.update(() => {
+        setSelected(true);
+        const parentRootElement = editor.getRootElement();
+        if (parentRootElement !== null) {
+          parentRootElement.focus();
+        }
+      });
+      return true;
+    }
+    return false;
+  }, [caption, editor, 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);
+        }
+        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), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
+    return () => {
+      isMounted = false;
+      unregister();
+    };
+  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  const setShowCaption = () => {
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
+        node.setShowCaption(true);
+      }
+    });
+  };
+  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 {
+    historyState
+  } = useSharedHistoryContext();
+  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
+  })), showCaption && /*#__PURE__*/React.createElement("div", {
+    className: "image-caption-container"
+  }, /*#__PURE__*/React.createElement(LexicalNestedComposer, {
+    initialEditor: caption
+  }, /*#__PURE__*/React.createElement(AutoFocusPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, {
+    externalHistoryState: historyState
+  }), /*#__PURE__*/React.createElement(RichTextPlugin, {
+    contentEditable: /*#__PURE__*/React.createElement(LexicalContentEditable, {
+      className: "ImageNode__contentEditable"
+    }),
+    placeholder: /*#__PURE__*/React.createElement(Placeholder, {
+      className: "ImageNode__placeholder"
+    }, "Enter a caption..."),
+    ErrorBoundary: LexicalErrorBoundary
+  }))), resizable && $isNodeSelection(selection) && isFocused && /*#__PURE__*/React.createElement(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","Suspense","useCallback","useEffect","useRef","useState","AutoFocusPlugin","useLexicalComposerContext","LexicalErrorBoundary","HistoryPlugin","LexicalNestedComposer","RichTextPlugin","useLexicalNodeSelection","mergeRegister","$getNodeByKey","$getSelection","$isNodeSelection","$setSelection","CLICK_COMMAND","COMMAND_PRIORITY_LOW","DRAGSTART_COMMAND","KEY_BACKSPACE_COMMAND","KEY_DELETE_COMMAND","KEY_ENTER_COMMAND","KEY_ESCAPE_COMMAND","SELECTION_CHANGE_COMMAND","Placeholder","ImageResizer","useSharedHistoryContext","$isImageNode","LexicalContentEditable","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","showCaption","caption","captionsEnabled","buttonRef","isSelected","setSelected","clearSelection","isResizing","setIsResizing","editor","selection","setSelection","activeEditorRef","onDelete","payload","event","preventDefault","node","remove","onEnter","latestSelection","buttonElem","current","getNodes","length","focus","document","activeElement","onEscape","target","update","parentRootElement","getRootElement","isMounted","unregister","registerUpdateListener","editorState","read","registerCommand","_","activeEditor","shiftKey","setShowCaption","onResizeEnd","nextWidth","nextHeight","setTimeout","setWidthAndHeight","onResizeStart","historyState","isFocused","fallback","Fragment","initialEditor","externalHistoryState","contentEditable","placeholder","ErrorBoundary"],"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\";\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<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    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":[]}

package/components/ImageNode/ImageResizer.d.ts

@@ -0,0 +1,24 @@
+/**
+ * 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" />
+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;