@team-monolith/cds 1.70.3 → 1.71.0

package/dist/patterns/LexicalEditor/Plugins.js

@@ -8,7 +8,7 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { ContentEditable } from "@lexical/react/LexicalContentEditable";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { CUSTOM_TRANSFORMERS } from "./plugins/MarkdownTransformers";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
@@ -22,9 +22,9 @@ import ImagesPlugin from "./plugins/ImagesPlugin";
 import { TablePlugin } from "@lexical/react/LexicalTablePlugin";
 import hr from "./hr.svg";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
-import LexicalClickableLinkPlugin from "@lexical/react/LexicalClickableLinkPlugin";
+import { ClickableLinkPlugin } from "@lexical/react/LexicalClickableLinkPlugin";
 import FloatingLinkEditorPlugin from "./plugins/FloatingLinkEditorPlugin";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
@@ -47,7 +47,7 @@ export default function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.d.ts

@@ -1,3 +1,4 @@
+/** @jsxImportSource @emotion/react */
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -8,11 +9,12 @@
 /// <reference types="react" />
 import type { LexicalCommand, NodeKey } from "lexical";
 export declare const RIGHT_CLICK_IMAGE_COMMAND: LexicalCommand<MouseEvent>;
-export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, }: {
+export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, }: {
     altText: string;
     height: "inherit" | number;
     maxWidth: number;
     nodeKey: NodeKey;
+    resizable: boolean;
     src: string;
     width: "inherit" | number;
 }): JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageComponent.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
@@ -9,8 +9,10 @@ import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
 import styled from "@emotion/styled";
 import { InsertImageDialog } from "../../components/InsertImageDialog";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { ImageNotAvailable } from "./ImageNotAvailable";
+import ImageResizer from "./ImageResizer";
+import { css } from "@emotion/react";
 const imageCache = new Set();
 export const RIGHT_CLICK_IMAGE_COMMAND = createCommand("RIGHT_CLICK_IMAGE_COMMAND");
 function useSuspenseImage(src) {
@@ -22,10 +24,15 @@ function useSuspenseImage(src) {
                 imageCache.add(src);
                 resolve(null);
             };
+            img.onerror = () => {
+                imageCache.add(src);
+            };
         });
     }
 }
-function LazyImage({ altText, className, imageRef, src, width, height, maxWidth, }) {
+function LazyImage({ altText, className, imageRef, src, width, height, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+maxWidth, onError, }) {
     useSuspenseImage(src);
     return (_jsx("img", { className: className || undefined, src: src, alt: altText, ref: imageRef, style: {
             height,
@@ -35,27 +42,33 @@ function LazyImage({ altText, className, imageRef, src, width, height, maxWidth,
             // fixme: maxWidth를 수정할 수 있게 되면 원복합니다.
             maxWidth: "100%",
             width,
-        }, draggable: "false" }));
+        }, onError: onError, draggable: "false" }));
 }
-export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, }) {
+export default function ImageComponent({ src, altText, nodeKey, width, height, maxWidth, resizable, }) {
     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 [isLoadError, setIsLoadError] = useState(false);
+    const $onDelete = useCallback((payload) => {
+        const deleteSelection = $getSelection();
+        if (isSelected && $isNodeSelection(deleteSelection)) {
             const event = payload;
             event.preventDefault();
-            const node = $getNodeByKey(nodeKey);
-            if ($isImageNode(node)) {
-                node.remove();
-            }
+            editor.update(() => {
+                deleteSelection.getNodes().forEach((node) => {
+                    if ($isImageNode(node)) {
+                        node.remove();
+                    }
+                });
+            });
         }
         return false;
-    }, [isSelected, nodeKey]);
-    const onEnter = useCallback((event) => {
+    }, [editor, isSelected]);
+    const $onEnter = useCallback((event) => {
         const latestSelection = $getSelection();
         const buttonElem = buttonRef.current;
         if (isSelected &&
@@ -69,7 +82,7 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
         }
         return false;
     }, [isSelected]);
-    const onEscape = useCallback((event) => {
+    const $onEscape = useCallback((event) => {
         if (buttonRef.current === event.target) {
             $setSelection(null);
             editor.update(() => {
@@ -85,6 +98,9 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
     }, [editor, setSelected]);
     const onClick = useCallback((payload) => {
         const event = payload;
+        if (isResizing) {
+            return true;
+        }
         if (event.target === imageRef.current) {
             if (event.shiftKey) {
                 setSelected(!isSelected);
@@ -96,7 +112,7 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
             return true;
         }
         return false;
-    }, [isSelected, setSelected, clearSelection]);
+    }, [isResizing, isSelected, setSelected, clearSelection]);
     const onRightClick = useCallback((event) => {
         editor.getEditorState().read(() => {
             const latestSelection = $getSelection();
@@ -126,7 +142,7 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
                 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));
+        }, 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));
         rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener("contextmenu", onRightClick);
         return () => {
             isMounted = false;
@@ -136,27 +152,46 @@ export default function ImageComponent({ src, altText, nodeKey, width, height, m
     }, [
         clearSelection,
         editor,
+        isResizing,
         isSelected,
         nodeKey,
-        onDelete,
-        onEnter,
-        onEscape,
+        $onDelete,
+        $onEnter,
+        $onEscape,
         onClick,
         onRightClick,
         setSelected,
     ]);
-    const draggable = isSelected && $isNodeSelection(selection);
-    const isFocused = isSelected;
+    const onResizeEnd = (nextWidth, nextHeight) => {
+        // Delay hiding the resize bars for click case
+        setTimeout(() => {
+            setIsResizing(false);
+        }, 200);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if ($isImageNode(node)) {
+                node.setWidthAndHeight(nextWidth, nextHeight);
+            }
+        });
+    };
+    const onResizeStart = () => {
+        setIsResizing(true);
+    };
+    const draggable = isSelected && $isNodeSelection(selection) && !isResizing;
+    const isFocused = isSelected || isResizing;
     const [open, setOpen] = useState(false);
     const isEditable = useLexicalEditable();
     if (!isEditable) {
-        return (_jsx(Suspense, Object.assign({ fallback: _jsx(ImageNotAvailable, {}) }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: _jsx(LazyImage, { className: isFocused
+        return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: isLoadError ? (_jsx(ImageNotAvailable, {})) : (_jsx(LazyImage, { className: isFocused
                         ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
-                        : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })));
+                        : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true) })) })) })));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, Object.assign({ fallback: _jsx(ImageNotAvailable, {}) }, { children: _jsx("div", Object.assign({ draggable: draggable }, { children: _jsx(LazyImage, { className: isFocused
-                                    ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
-                                    : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth }) })) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx("div", Object.assign({ draggable: draggable, css: css `
+              // ImageResizer를 위한 relative 설정입니다.
+              position: relative;
+            ` }, { children: isLoadError ? (_jsx(ImageNotAvailable, {})) : (_jsxs(_Fragment, { children: [_jsx(LazyImage, { className: isFocused
+                                            ? `focused ${$isNodeSelection(selection) ? "draggable" : ""}`
+                                            : null, src: src, altText: altText, imageRef: imageRef, width: width, height: height, maxWidth: maxWidth, onError: () => setIsLoadError(true) }), resizable && $isNodeSelection(selection) && isFocused && (_jsx(ImageResizer, { showCaption: false, setShowCaption: () => { }, editor: editor, buttonRef: buttonRef, imageRef: imageRef, maxWidth: maxWidth, onResizeStart: onResizeStart, onResizeEnd: onResizeEnd, captionsEnabled: false }))] })) })) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setOpen(true);
                         }, buttonProps: {
                             "aria-label": "이미지 수정하기",

package/dist/patterns/LexicalEditor/nodes/ImageNode/ImageNode.js

@@ -2,10 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { $applyNodeReplacement, createEditor, DecoratorNode } from "lexical";
 import * as React from "react";
 import { Suspense } from "react";
-const ImageComponent = React.lazy(
-// @ts-ignore
-() => import("./ImageComponent"));
-function convertImageElement(domNode) {
+const ImageComponent = React.lazy(() => import("./ImageComponent"));
+function $convertImageElement(domNode) {
     if (domNode instanceof HTMLImageElement) {
         const { alt: altText, src, width, height } = domNode;
         const node = $createImageNode({ altText, height, src, width });
@@ -47,8 +45,9 @@ export class ImageNode extends DecoratorNode {
     }
     static importDOM() {
         return {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             img: (node) => ({
-                conversion: convertImageElement,
+                conversion: $convertImageElement,
                 priority: 0,
             }),
         };
@@ -61,7 +60,7 @@ export class ImageNode extends DecoratorNode {
         this.__width = width || "inherit";
         this.__height = height || "inherit";
         this.__showCaption = showCaption || false;
-        this.__caption = caption || createEditor();
+        this.__caption = caption || createEditor({ nodes: [] });
         this.__captionsEnabled = captionsEnabled || captionsEnabled === undefined;
     }
     exportJSON() {
@@ -114,7 +113,7 @@ export class ImageNode extends DecoratorNode {
         return this.__altText;
     }
     decorate() {
-        return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey() }) })));
+        return (_jsx(Suspense, Object.assign({ fallback: null }, { children: _jsx(ImageComponent, { src: this.__src, altText: this.__altText, width: this.__width, height: this.__height, maxWidth: this.__maxWidth, nodeKey: this.getKey(), resizable: true }) })));
     }
 }
 export function $createImageNode({ altText, height, maxWidth = 500, captionsEnabled, src, width, showCaption, caption, key, }) {

package/dist/patterns/LexicalEditor/nodes/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 default 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/dist/patterns/LexicalEditor/nodes/ImageNode/ImageResizer.js

@@ -0,0 +1,233 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateZoomLevel } from "@lexical/utils";
+import { useRef } from "react";
+import styled from "@emotion/styled";
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+const Direction = {
+    east: 1 << 0,
+    north: 1 << 3,
+    south: 1 << 1,
+    west: 1 << 2,
+};
+export default function ImageResizer({ onResizeStart, onResizeEnd, buttonRef, imageRef, maxWidth, editor, showCaption, setShowCaption, captionsEnabled, }) {
+    const controlWrapperRef = useRef(null);
+    const userSelect = useRef({
+        priority: "",
+        value: "default",
+    });
+    const positioningRef = useRef({
+        currentHeight: 0,
+        currentWidth: 0,
+        direction: 0,
+        isResizing: false,
+        ratio: 0,
+        startHeight: 0,
+        startWidth: 0,
+        startX: 0,
+        startY: 0,
+    });
+    const editorRootElement = editor.getRootElement();
+    // Find max width, accounting for editor padding.
+    const maxWidthContainer = maxWidth
+        ? maxWidth
+        : editorRootElement !== null
+            ? editorRootElement.getBoundingClientRect().width - 20
+            : 100;
+    const maxHeightContainer = editorRootElement !== null
+        ? editorRootElement.getBoundingClientRect().height - 20
+        : 100;
+    const minWidth = 100;
+    const minHeight = 100;
+    const setStartCursor = (direction) => {
+        const ew = direction === Direction.east || direction === Direction.west;
+        const ns = direction === Direction.north || direction === Direction.south;
+        const nwse = (direction & Direction.north && direction & Direction.west) ||
+            (direction & Direction.south && direction & Direction.east);
+        const cursorDir = ew ? "ew" : ns ? "ns" : nwse ? "nwse" : "nesw";
+        if (editorRootElement !== null) {
+            editorRootElement.style.setProperty("cursor", `${cursorDir}-resize`, "important");
+        }
+        if (document.body !== null) {
+            document.body.style.setProperty("cursor", `${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");
+        }
+    };
+    const 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);
+        }
+    };
+    const handlePointerDown = (event, direction) => {
+        if (!editor.isEditable()) {
+            return;
+        }
+        const image = imageRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null) {
+            event.preventDefault();
+            const { width, height } = image.getBoundingClientRect();
+            const zoom = calculateZoomLevel(image);
+            const positioning = positioningRef.current;
+            positioning.startWidth = width;
+            positioning.startHeight = height;
+            positioning.ratio = width / height;
+            positioning.currentWidth = width;
+            positioning.currentHeight = height;
+            positioning.startX = event.clientX / zoom;
+            positioning.startY = event.clientY / zoom;
+            positioning.isResizing = true;
+            positioning.direction = direction;
+            setStartCursor(direction);
+            onResizeStart();
+            controlWrapper.classList.add("image-control-wrapper--resizing");
+            image.style.height = `${height}px`;
+            image.style.width = `${width}px`;
+            document.addEventListener("pointermove", handlePointerMove);
+            document.addEventListener("pointerup", handlePointerUp);
+        }
+    };
+    const handlePointerMove = (event) => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const isHorizontal = positioning.direction & (Direction.east | Direction.west);
+        const isVertical = positioning.direction & (Direction.south | Direction.north);
+        if (image !== null && positioning.isResizing) {
+            const zoom = calculateZoomLevel(image);
+            // Corner cursor
+            if (isHorizontal && isVertical) {
+                let diff = Math.floor(positioning.startX - event.clientX / zoom);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                const height = width / positioning.ratio;
+                image.style.width = `${width}px`;
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+                positioning.currentWidth = width;
+            }
+            else if (isVertical) {
+                let diff = Math.floor(positioning.startY - event.clientY / zoom);
+                diff = positioning.direction & Direction.south ? -diff : diff;
+                const height = clamp(positioning.startHeight + diff, minHeight, maxHeightContainer);
+                image.style.height = `${height}px`;
+                positioning.currentHeight = height;
+            }
+            else {
+                let diff = Math.floor(positioning.startX - event.clientX / zoom);
+                diff = positioning.direction & Direction.east ? -diff : diff;
+                const width = clamp(positioning.startWidth + diff, minWidth, maxWidthContainer);
+                image.style.width = `${width}px`;
+                positioning.currentWidth = width;
+            }
+        }
+    };
+    const handlePointerUp = () => {
+        const image = imageRef.current;
+        const positioning = positioningRef.current;
+        const controlWrapper = controlWrapperRef.current;
+        if (image !== null && controlWrapper !== null && positioning.isResizing) {
+            const width = positioning.currentWidth;
+            const height = 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(width, height);
+            document.removeEventListener("pointermove", handlePointerMove);
+            document.removeEventListener("pointerup", handlePointerUp);
+        }
+    };
+    return (_jsxs(Container, Object.assign({ ref: controlWrapperRef }, { children: [!showCaption && captionsEnabled && (_jsx("button", Object.assign({ className: "image-caption-button", ref: buttonRef, onClick: () => {
+                    setShowCaption(!showCaption);
+                } }, { children: "Add Caption" }))), _jsx("div", { className: "image-resizer image-resizer-n", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north);
+                } }), _jsx("div", { className: "image-resizer image-resizer-ne", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-e", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-se", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.east);
+                } }), _jsx("div", { className: "image-resizer image-resizer-s", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south);
+                } }), _jsx("div", { className: "image-resizer image-resizer-sw", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.south | Direction.west);
+                } }), _jsx("div", { className: "image-resizer image-resizer-w", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.west);
+                } }), _jsx("div", { className: "image-resizer image-resizer-nw", onPointerDown: (event) => {
+                    handlePointerDown(event, Direction.north | Direction.west);
+                } })] })));
+}
+const Container = styled.div `
+  &.image-control-wrapper--resizing {
+    touch-action: none;
+  }
+  .image-resizer {
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    background-color: rgb(60, 132, 244);
+    border: 1px solid #fff;
+  }
+
+  .image-resizer.image-resizer-n {
+    top: -6px;
+    left: 48%;
+    cursor: n-resize;
+  }
+
+  .image-resizer.image-resizer-ne {
+    top: -6px;
+    right: -6px;
+    cursor: ne-resize;
+  }
+
+  .image-resizer.image-resizer-e {
+    bottom: 48%;
+    right: -6px;
+    cursor: e-resize;
+  }
+
+  .image-resizer.image-resizer-se {
+    bottom: -2px;
+    right: -6px;
+    cursor: nwse-resize;
+  }
+
+  .image-resizer.image-resizer-s {
+    bottom: -2px;
+    left: 48%;
+    cursor: s-resize;
+  }
+
+  .image-resizer.image-resizer-sw {
+    bottom: -2px;
+    left: -6px;
+    cursor: sw-resize;
+  }
+
+  .image-resizer.image-resizer-w {
+    bottom: 48%;
+    left: -6px;
+    cursor: w-resize;
+  }
+
+  .image-resizer.image-resizer-nw {
+    top: -6px;
+    left: -6px;
+    cursor: nw-resize;
+  }
+`;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -17,7 +17,7 @@ import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
 import styled from "@emotion/styled";
 import SettingForm from "./SettingForm";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.js

@@ -4,7 +4,7 @@ import { $getNodeByKey } from "lexical";
 import { $isProblemSelectNode, } from "./ProblemSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { SelectBoxEdit, SelectBoxView } from "./SelectBox";
 import { css } from "@emotion/react";
 import SquareButton from "../../../../components/SquareButton";

package/dist/patterns/LexicalEditor/nodes/SelfEvaluationNode/EvaluationComponent/EvaluationComponent.js

@@ -4,7 +4,7 @@ import { $getNodeByKey } from "lexical";
 import { $isSelfEvaluationNode, } from "../SelfEvaluationNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { LexicalCustomConfigContext } from "../../../LexicalCustomConfigContext";
 import { Evaluation, SettingForm } from "./Evaluation";
 import { ICON_DATA } from "../iconData";

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/InputComponent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { $getNodeByKey } from "lexical";
 import { useContext, useState } from "react";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SelectComponent.js

@@ -4,7 +4,7 @@ import { $getNodeByKey } from "lexical";
 import { $isSheetSelectNode } from "../SheetSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
-import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import { LexicalCustomConfigContext } from "../../../LexicalCustomConfigContext";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -29,7 +29,7 @@ import styled from "@emotion/styled";
 import { useContextMenuOptions } from "./useContextMenuOptions";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { useTheme } from "@emotion/react";
-import { InsertImageDialog, } from "../../components/InsertImageDialog";
+import { InsertImageDialog } from "../../components/InsertImageDialog";
 import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
 export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
 function isOnMenu(element) {

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -29,7 +29,7 @@ import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin";
 import { INSERT_SHEET_SELECT_COMMAND } from "../SheetSelectPlugin";
 import { INSERT_SHEET_INPUT_COMMAND } from "../SheetInputPlugin";
 import { INSERT_SELF_EVALUATION_COMMAND } from "../SelfEvaluationPlugin";
-import { InsertImageDialog, } from "../../components/InsertImageDialog";
+import { InsertImageDialog } from "../../components/InsertImageDialog";
 import { INSERT_IMAGE_COMMAND } from "../ImagesPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/FloatingLinkEditor.js

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { sanitizeUrl } from "../../utils/url";
 import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND, } from "lexical";
 import { getSelectedNode } from "../../utils/getSelectedNode";
-import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { $createLinkNode, $isAutoLinkNode, $isLinkNode, TOGGLE_LINK_COMMAND, } from "@lexical/link";
 import { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 import styled from "@emotion/styled";
@@ -16,7 +16,7 @@ export function FloatingLinkEditor(props) {
     const [linkUrl, setLinkUrl] = useState("");
     const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
     const [lastSelection, setLastSelection] = useState(null);
-    const updateLinkEditor = useCallback(() => {
+    const $updateLinkEditor = useCallback(() => {
         var _a, _b;
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
@@ -31,6 +31,9 @@ export function FloatingLinkEditor(props) {
             else {
                 setLinkUrl("");
             }
+            if (isLinkEditMode) {
+                setEditedLinkUrl(linkUrl);
+            }
         }
         const editorElem = editorRef.current;
         const nativeSelection = window.getSelection();
@@ -60,12 +63,12 @@ export function FloatingLinkEditor(props) {
             setLinkUrl("");
         }
         return true;
-    }, [anchorElem, editor, setIsLinkEditMode]);
+    }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
     useEffect(() => {
         const scrollerElem = anchorElem.parentElement;
         const update = () => {
             editor.getEditorState().read(() => {
-                updateLinkEditor();
+                $updateLinkEditor();
             });
         };
         window.addEventListener("resize", update);
@@ -78,14 +81,14 @@ export function FloatingLinkEditor(props) {
                 scrollerElem.removeEventListener("scroll", update);
             }
         };
-    }, [anchorElem.parentElement, editor, updateLinkEditor]);
+    }, [anchorElem.parentElement, editor, $updateLinkEditor]);
     useEffect(() => {
         return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
-                updateLinkEditor();
+                $updateLinkEditor();
             });
         }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
-            updateLinkEditor();
+            $updateLinkEditor();
             return true;
         }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
             if (isLink) {
@@ -94,12 +97,12 @@ export function FloatingLinkEditor(props) {
             }
             return false;
         }, COMMAND_PRIORITY_HIGH));
-    }, [editor, updateLinkEditor, setIsLink, isLink]);
+    }, [editor, $updateLinkEditor, setIsLink, isLink]);
     useEffect(() => {
         editor.getEditorState().read(() => {
-            updateLinkEditor();
+            $updateLinkEditor();
         });
-    }, [editor, updateLinkEditor]);
+    }, [editor, $updateLinkEditor]);
     useEffect(() => {
         if (isLinkEditMode && inputRef.current) {
             inputRef.current.focus();
@@ -119,6 +122,20 @@ export function FloatingLinkEditor(props) {
         if (lastSelection !== null) {
             if (linkUrl !== "") {
                 editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+                editor.update(() => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        const parent = getSelectedNode(selection).getParent();
+                        if ($isAutoLinkNode(parent)) {
+                            const linkNode = $createLinkNode(parent.getURL(), {
+                                rel: parent.__rel,
+                                target: parent.__target,
+                                title: parent.__title,
+                            });
+                            parent.replace(linkNode, true);
+                        }
+                    }
+                });
             }
             setEditedLinkUrl("https://");
             setIsLinkEditMode(false);

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/index.js

@@ -9,7 +9,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { $isAutoLinkNode, $isLinkNode } from "@lexical/link";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
-import { $getSelection, $isRangeSelection, CLICK_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, } from "lexical";
+import { $getSelection, $isLineBreakNode, $isRangeSelection, CLICK_COMMAND, COMMAND_PRIORITY_CRITICAL, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, } from "lexical";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { getSelectedNode } from "../../utils/getSelectedNode";
@@ -18,14 +18,30 @@ function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsL
     const [activeEditor, setActiveEditor] = useState(editor);
     const [isLink, setIsLink] = useState(false);
     useEffect(() => {
-        function updateToolbar() {
+        function $updateToolbar() {
             const selection = $getSelection();
             if ($isRangeSelection(selection)) {
-                const node = getSelectedNode(selection);
-                const linkParent = $findMatchingParent(node, $isLinkNode);
-                const autoLinkParent = $findMatchingParent(node, $isAutoLinkNode);
-                // We don't want this menu to open for auto links.
-                if (linkParent !== null && autoLinkParent === null) {
+                const focusNode = getSelectedNode(selection);
+                const focusLinkNode = $findMatchingParent(focusNode, $isLinkNode);
+                const focusAutoLinkNode = $findMatchingParent(focusNode, $isAutoLinkNode);
+                if (!(focusLinkNode || focusAutoLinkNode)) {
+                    setIsLink(false);
+                    return;
+                }
+                const badNode = selection
+                    .getNodes()
+                    .filter((node) => !$isLineBreakNode(node))
+                    .find((node) => {
+                    const linkNode = $findMatchingParent(node, $isLinkNode);
+                    const autoLinkNode = $findMatchingParent(node, $isAutoLinkNode);
+                    return ((focusLinkNode && !focusLinkNode.is(linkNode)) ||
+                        (linkNode && !linkNode.is(focusLinkNode)) ||
+                        (focusAutoLinkNode && !focusAutoLinkNode.is(autoLinkNode)) ||
+                        (autoLinkNode &&
+                            (!autoLinkNode.is(focusAutoLinkNode) ||
+                                autoLinkNode.getIsUnlinked())));
+                });
+                if (!badNode) {
                     setIsLink(true);
                 }
                 else {
@@ -35,10 +51,10 @@ function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsL
         }
         return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
-                updateToolbar();
+                $updateToolbar();
             });
         }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
-            updateToolbar();
+            $updateToolbar();
             setActiveEditor(newEditor);
             return false;
         }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CLICK_COMMAND, (payload) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.70.3",
+  "version": "1.71.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -8,14 +8,14 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@lexical/react": "^0.12.4",
+    "@lexical/react": "^0.17.1",
     "@mui/material": "^5.13.6",
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
     "framer-motion": "^11.3.19",
     "hex-to-css-filter": "^5.4.0",
-    "lexical": "^0.12.4",
+    "lexical": "^0.17.1",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",