@team-monolith/cds 1.3.2 → 1.4.0

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

@@ -0,0 +1,201 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { setFloatingElemPositionForLinkEditor } from "../../utils/setFloatingElemPositionForLinkEditor";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+import styled from "@emotion/styled";
+import { CloseFillIcon, CheckLineIcon, EditLineIcon, DeleteBinLineIcon } from "../../../../icons";
+import Input from "../../../../components/Input";
+export function FloatingLinkEditor(props) {
+    const { editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode, } = props;
+    const editorRef = useRef(null);
+    const inputRef = useRef(null);
+    const [linkUrl, setLinkUrl] = useState("");
+    const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
+    const [lastSelection, setLastSelection] = useState(null);
+    const updateLinkEditor = useCallback(() => {
+        var _a, _b;
+        const selection = $getSelection();
+        if ($isRangeSelection(selection)) {
+            const node = getSelectedNode(selection);
+            const linkParent = $findMatchingParent(node, $isLinkNode);
+            if (linkParent) {
+                setLinkUrl(linkParent.getURL());
+            }
+            else if ($isLinkNode(node)) {
+                setLinkUrl(node.getURL());
+            }
+            else {
+                setLinkUrl("");
+            }
+        }
+        const editorElem = editorRef.current;
+        const nativeSelection = window.getSelection();
+        const activeElement = document.activeElement;
+        if (editorElem === null) {
+            return;
+        }
+        const rootElement = editor.getRootElement();
+        if (selection !== null &&
+            nativeSelection !== null &&
+            rootElement !== null &&
+            rootElement.contains(nativeSelection.anchorNode) &&
+            editor.isEditable()) {
+            const domRect = (_b = (_a = nativeSelection.focusNode) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+            if (domRect) {
+                domRect.y += 40;
+                setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
+            }
+            setLastSelection(selection);
+        }
+        else if (!activeElement || activeElement.className !== "link-input") {
+            if (rootElement !== null) {
+                setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
+            }
+            setLastSelection(null);
+            setIsLinkEditMode(false);
+            setLinkUrl("");
+        }
+        return true;
+    }, [anchorElem, editor, setIsLinkEditMode]);
+    useEffect(() => {
+        const scrollerElem = anchorElem.parentElement;
+        const update = () => {
+            editor.getEditorState().read(() => {
+                updateLinkEditor();
+            });
+        };
+        window.addEventListener("resize", update);
+        if (scrollerElem) {
+            scrollerElem.addEventListener("scroll", update);
+        }
+        return () => {
+            window.removeEventListener("resize", update);
+            if (scrollerElem) {
+                scrollerElem.removeEventListener("scroll", update);
+            }
+        };
+    }, [anchorElem.parentElement, editor, updateLinkEditor]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateLinkEditor();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateLinkEditor();
+            return true;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, () => {
+            if (isLink) {
+                setIsLink(false);
+                return true;
+            }
+            return false;
+        }, COMMAND_PRIORITY_HIGH));
+    }, [editor, updateLinkEditor, setIsLink, isLink]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            updateLinkEditor();
+        });
+    }, [editor, updateLinkEditor]);
+    useEffect(() => {
+        if (isLinkEditMode && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isLinkEditMode, isLink]);
+    const monitorInputInteraction = (event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            handleLinkSubmission();
+        }
+        else if (event.key === "Escape") {
+            event.preventDefault();
+            setIsLinkEditMode(false);
+        }
+    };
+    const handleLinkSubmission = () => {
+        if (lastSelection !== null) {
+            if (linkUrl !== "") {
+                editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(editedLinkUrl));
+            }
+            setEditedLinkUrl("https://");
+            setIsLinkEditMode(false);
+        }
+    };
+    return (_jsx(Container, Object.assign({ ref: editorRef }, { children: !isLink ? null : isLinkEditMode ? (_jsxs(_Fragment, { children: [_jsx(StyledInput, { className: "link-input", fullWidth: true, color: "default", size: "small", ref: inputRef, value: editedLinkUrl, onChange: (event) => {
+                        setEditedLinkUrl(event.target.value);
+                    }, inputProps: {
+                        onKeyDown: (event) => {
+                            monitorInputInteraction(event);
+                        },
+                    } }), _jsxs(Buttons, { children: [_jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
+                                event.preventDefault();
+                                setIsLinkEditMode(false);
+                            } }, { children: _jsx(CloseFillIcon, {}) })), _jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
+                                event.preventDefault();
+                                handleLinkSubmission();
+                            } }, { children: _jsx(CheckLineIcon, {}) }))] })] })) : (_jsxs(_Fragment, { children: [_jsx(Link, Object.assign({ href: sanitizeUrl(linkUrl), target: "_blank", rel: "noopener noreferrer" }, { children: linkUrl })), _jsxs(Buttons, { children: [_jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
+                                event.preventDefault();
+                                setEditedLinkUrl(linkUrl);
+                                setIsLinkEditMode(true);
+                            } }, { children: _jsx(EditLineIcon, {}) })), _jsx(Button, Object.assign({ tabIndex: 0, onClick: (event) => {
+                                event.preventDefault();
+                                editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+                            } }, { children: _jsx(DeleteBinLineIcon, {}) }))] })] })) })));
+}
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  will-change: transform;
+
+  display: flex;
+  padding: 0px 4px;
+  align-items: center;
+  gap: 4px;
+
+  border-radius: 8px;
+  // 메뉴가 활성화되지 않아도 클릭한 영역을 따라 다니도록 개발되었습니다.
+  // border가 있으면 활성화되지 않은 상태에서도 노출되므로 border를 제거합니다.
+  /* border: 1px solid #e8e8eb; */
+  background: ${({ theme }) => theme.color.background.neutralBase};
+  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
+
+  width: 400px;
+`;
+const Buttons = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const Button = styled.button `
+  // reset
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+
+  padding: 8px 4px;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const Link = styled.a `
+  width: 100%;
+  padding: 0px 8px;
+
+  /* Default/Paragraph/16px-Rg */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px; /* 150% */
+`;
+const StyledInput = styled(Input) `
+  margin: 4px 0px;
+`;

package/dist/patterns/LexicalEditor/plugins/FloatingLinkEditorPlugin/index.d.ts

@@ -0,0 +1,6 @@
+import { Dispatch } from "react";
+export default function FloatingLinkEditorPlugin({ anchorElem, isLinkEditMode, setIsLinkEditMode, }: {
+    anchorElem?: HTMLElement;
+    isLinkEditMode: boolean;
+    setIsLinkEditMode: Dispatch<boolean>;
+}): JSX.Element | null;

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { $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 { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { FloatingLinkEditor } from "./FloatingLinkEditor";
+function useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode) {
+    const [activeEditor, setActiveEditor] = useState(editor);
+    const [isLink, setIsLink] = useState(false);
+    useEffect(() => {
+        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) {
+                    setIsLink(true);
+                }
+                else {
+                    setIsLink(false);
+                }
+            }
+        }
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, COMMAND_PRIORITY_CRITICAL), editor.registerCommand(CLICK_COMMAND, (payload) => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const node = getSelectedNode(selection);
+                const linkNode = $findMatchingParent(node, $isLinkNode);
+                if ($isLinkNode(linkNode) && (payload.metaKey || payload.ctrlKey)) {
+                    window.open(linkNode.getURL(), "_blank");
+                    return true;
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor]);
+    return createPortal(_jsx(FloatingLinkEditor, { editor: activeEditor, isLink: isLink, anchorElem: anchorElem, setIsLink: setIsLink, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode }), anchorElem);
+}
+export default function FloatingLinkEditorPlugin({ anchorElem = document.body, isLinkEditMode, setIsLinkEditMode, }) {
+    const [editor] = useLexicalComposerContext();
+    return useFloatingLinkEditorToolbar(editor, anchorElem, isLinkEditMode, setIsLinkEditMode);
+}

package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/FloatingTextFormatPopup.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface FloatingTestFormatPopupProps {
+    className?: string;
+    isBold?: boolean;
+    isItalic?: boolean;
+    isUnderline?: boolean;
+    isStrikethrough?: boolean;
+    isCode?: boolean;
+    isLink?: boolean;
+    insertLink?: () => void;
+}
+declare const _default: import("react").ForwardRefExoticComponent<FloatingTestFormatPopupProps & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/FloatingTextFormatPopup.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { FORMAT_TEXT_COMMAND } from "lexical";
+import { forwardRef } from "react";
+import styled from "@emotion/styled";
+import { BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, CodeFillIcon, LinkIcon, } from "../../../../icons";
+function FloatingTextFormatPopup(props, ref) {
+    const { className, isBold, isItalic, isUnderline, isStrikethrough, isCode, isLink, insertLink, } = props;
+    const [editor] = useLexicalComposerContext();
+    return (_jsx(Container, Object.assign({ ref: ref, className: className }, { children: editor.isEditable() && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ type: "button", onClick: () => {
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "bold");
+                    }, active: Boolean(isBold), "aria-label": "Format text as bold" }, { children: _jsx(BoldIcon, {}) })), _jsx(IconButton, Object.assign({ type: "button", onClick: () => {
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "italic");
+                    }, active: Boolean(isItalic), "aria-label": "Format text as italics" }, { children: _jsx(ItalicIcon, {}) })), _jsx(IconButton, Object.assign({ type: "button", onClick: () => {
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "underline");
+                    }, active: Boolean(isUnderline), "aria-label": "Format text to underlined" }, { children: _jsx(UnderlineIcon, {}) })), _jsx(IconButton, Object.assign({ type: "button", onClick: () => {
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "strikethrough");
+                    }, active: Boolean(isStrikethrough), "aria-label": "Format text with a strikethrough" }, { children: _jsx(StrikethroughIcon, {}) })), _jsx(IconButton, Object.assign({ type: "button", onClick: () => {
+                        editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
+                    }, active: Boolean(isCode), "aria-label": "Insert code block" }, { children: _jsx(CodeFillIcon, {}) })), _jsx(IconButton, Object.assign({ type: "button", onClick: insertLink, active: Boolean(isLink), "aria-label": "Insert link" }, { children: _jsx(LinkIcon, {}) }))] })) })));
+}
+export default forwardRef(FloatingTextFormatPopup);
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  will-change: transform;
+
+  display: inline-flex;
+  padding: 0px 4px;
+  align-items: flex-start;
+  gap: 4px;
+
+  border-radius: 8px;
+  border: 1px solid #e8e8eb;
+  background: ${({ theme }) => theme.color.background.neutralBase};
+  box-shadow: 0px 3px 15px -3px rgba(13, 20, 33, 0.13);
+`;
+const IconButton = styled.button `
+  border: none;
+  outline: none;
+
+  display: flex;
+  padding: 8px 4px;
+  align-items: center;
+  gap: 4px;
+
+  background: #fff;
+
+  svg {
+    width: 18px;
+    height: 18px;
+    ${({ theme, active }) => active && `color: ${theme.color.foreground.primary};`}
+  }
+
+  &:hover {
+    background: ${({ theme }) => theme.color.background.neutralAlt};
+  }
+`;

package/dist/patterns/LexicalEditor/plugins/FloatingTextFormatToolbarPlugin/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export default function FloatingTextFormatToolbarPlugin({ anchorElem, }: {
+    anchorElem?: HTMLElement;
+}): JSX.Element | null;

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

@@ -0,0 +1,190 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { $isCodeHighlightNode } from "@lexical/code";
+import { $isLinkNode, TOGGLE_LINK_COMMAND } from "@lexical/link";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister } from "@lexical/utils";
+import { $getSelection, $isParagraphNode, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, } from "lexical";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { getDOMRangeRect } from "../../utils/getDOMRangeRect";
+import { getSelectedNode } from "../../utils/getSelectedNode";
+import { setFloatingElemPosition } from "../../utils/setFloatingElemPosition";
+import FloatingTextFormatPopup from "./FloatingTextFormatPopup";
+function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItalic, isUnderline, isCode, isStrikethrough, }) {
+    const popupCharStylesEditorRef = useRef(null);
+    const insertLink = useCallback(() => {
+        if (!isLink) {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, "https://codle.io");
+        }
+        else {
+            editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+        }
+    }, [editor, isLink]);
+    function mouseMoveListener(e) {
+        if ((popupCharStylesEditorRef === null || popupCharStylesEditorRef === void 0 ? void 0 : popupCharStylesEditorRef.current) &&
+            (e.buttons === 1 || e.buttons === 3)) {
+            if (popupCharStylesEditorRef.current.style.pointerEvents !== "none") {
+                const x = e.clientX;
+                const y = e.clientY;
+                const elementUnderMouse = document.elementFromPoint(x, y);
+                if (!popupCharStylesEditorRef.current.contains(elementUnderMouse)) {
+                    // Mouse is not over the target element => not a normal click, but probably a drag
+                    popupCharStylesEditorRef.current.style.pointerEvents = "none";
+                }
+            }
+        }
+    }
+    function mouseUpListener(e) {
+        if (popupCharStylesEditorRef === null || popupCharStylesEditorRef === void 0 ? void 0 : popupCharStylesEditorRef.current) {
+            if (popupCharStylesEditorRef.current.style.pointerEvents !== "auto") {
+                popupCharStylesEditorRef.current.style.pointerEvents = "auto";
+            }
+        }
+    }
+    useEffect(() => {
+        if (popupCharStylesEditorRef === null || popupCharStylesEditorRef === void 0 ? void 0 : popupCharStylesEditorRef.current) {
+            document.addEventListener("mousemove", mouseMoveListener);
+            document.addEventListener("mouseup", mouseUpListener);
+            return () => {
+                document.removeEventListener("mousemove", mouseMoveListener);
+                document.removeEventListener("mouseup", mouseUpListener);
+            };
+        }
+    }, [popupCharStylesEditorRef]);
+    const updateTextFormatFloatingToolbar = useCallback(() => {
+        const selection = $getSelection();
+        const popupCharStylesEditorElem = popupCharStylesEditorRef.current;
+        const nativeSelection = window.getSelection();
+        if (popupCharStylesEditorElem === null) {
+            return;
+        }
+        const rootElement = editor.getRootElement();
+        if (selection !== null &&
+            nativeSelection !== null &&
+            !nativeSelection.isCollapsed &&
+            rootElement !== null &&
+            rootElement.contains(nativeSelection.anchorNode)) {
+            const rangeRect = getDOMRangeRect(nativeSelection, rootElement);
+            setFloatingElemPosition(rangeRect, popupCharStylesEditorElem, anchorElem, isLink);
+        }
+    }, [editor, anchorElem, isLink]);
+    useEffect(() => {
+        const scrollerElem = anchorElem.parentElement;
+        const update = () => {
+            editor.getEditorState().read(() => {
+                updateTextFormatFloatingToolbar();
+            });
+        };
+        window.addEventListener("resize", update);
+        if (scrollerElem) {
+            scrollerElem.addEventListener("scroll", update);
+        }
+        return () => {
+            window.removeEventListener("resize", update);
+            if (scrollerElem) {
+                scrollerElem.removeEventListener("scroll", update);
+            }
+        };
+    }, [editor, updateTextFormatFloatingToolbar, anchorElem]);
+    useEffect(() => {
+        editor.getEditorState().read(() => {
+            updateTextFormatFloatingToolbar();
+        });
+        return mergeRegister(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateTextFormatFloatingToolbar();
+            });
+        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+            updateTextFormatFloatingToolbar();
+            return false;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor, updateTextFormatFloatingToolbar]);
+    return (_jsx(FloatingTextFormatPopup, { ref: popupCharStylesEditorRef, isBold: isBold, isItalic: isItalic, isUnderline: isUnderline, isStrikethrough: isStrikethrough, isCode: isCode, isLink: isLink, insertLink: insertLink }));
+}
+function useFloatingTextFormatToolbar(editor, anchorElem) {
+    const [isText, setIsText] = useState(false);
+    const [isLink, setIsLink] = useState(false);
+    const [isBold, setIsBold] = useState(false);
+    const [isItalic, setIsItalic] = useState(false);
+    const [isUnderline, setIsUnderline] = useState(false);
+    const [isStrikethrough, setIsStrikethrough] = useState(false);
+    const [isCode, setIsCode] = useState(false);
+    const updatePopup = useCallback(() => {
+        editor.getEditorState().read(() => {
+            // Should not to pop up the floating toolbar when using IME input
+            if (editor.isComposing()) {
+                return;
+            }
+            const selection = $getSelection();
+            const nativeSelection = window.getSelection();
+            const rootElement = editor.getRootElement();
+            if (nativeSelection !== null &&
+                (!$isRangeSelection(selection) ||
+                    rootElement === null ||
+                    !rootElement.contains(nativeSelection.anchorNode))) {
+                setIsText(false);
+                return;
+            }
+            if (!$isRangeSelection(selection)) {
+                return;
+            }
+            const node = getSelectedNode(selection);
+            // Update text format
+            setIsBold(selection.hasFormat("bold"));
+            setIsItalic(selection.hasFormat("italic"));
+            setIsUnderline(selection.hasFormat("underline"));
+            setIsStrikethrough(selection.hasFormat("strikethrough"));
+            setIsCode(selection.hasFormat("code"));
+            // Update links
+            const parent = node.getParent();
+            if ($isLinkNode(parent) || $isLinkNode(node)) {
+                setIsLink(true);
+            }
+            else {
+                setIsLink(false);
+            }
+            if (!$isCodeHighlightNode(selection.anchor.getNode()) &&
+                selection.getTextContent() !== "") {
+                setIsText($isTextNode(node) || $isParagraphNode(node));
+            }
+            else {
+                setIsText(false);
+            }
+            const rawTextContent = selection.getTextContent().replace(/\n/g, "");
+            if (!selection.isCollapsed() && rawTextContent === "") {
+                setIsText(false);
+                return;
+            }
+        });
+    }, [editor]);
+    useEffect(() => {
+        document.addEventListener("selectionchange", updatePopup);
+        return () => {
+            document.removeEventListener("selectionchange", updatePopup);
+        };
+    }, [updatePopup]);
+    useEffect(() => {
+        return mergeRegister(editor.registerUpdateListener(() => {
+            updatePopup();
+        }), editor.registerRootListener(() => {
+            if (editor.getRootElement() === null) {
+                setIsText(false);
+            }
+        }));
+    }, [editor, updatePopup]);
+    if (!isText) {
+        return null;
+    }
+    return createPortal(_jsx(TextFormatFloatingToolbar, { editor: editor, anchorElem: anchorElem, isLink: isLink, isBold: isBold, isItalic: isItalic, isStrikethrough: isStrikethrough, isUnderline: isUnderline, isCode: isCode }), anchorElem);
+}
+export default function FloatingTextFormatToolbarPlugin({ anchorElem = document.body, }) {
+    const [editor] = useLexicalComposerContext();
+    return useFloatingTextFormatToolbar(editor, anchorElem);
+}

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.d.ts

@@ -0,0 +1,7 @@
+import { LexicalEditor } from "lexical";
+export interface InsertImageDialogProps {
+    open: boolean;
+    activeEditor: LexicalEditor;
+    onClose: () => void;
+}
+export declare function InsertImageDialog(props: InsertImageDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { INSERT_IMAGE_COMMAND } from ".";
+import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
+import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
+import styled from "@emotion/styled";
+import { AlertDialog, AlertDialogContent, AlertDialogTitle } from "../../../../components/AlertDialog";
+import { ImageFillIcon } from "../../../../icons";
+import Button from "../../../../components/Button";
+export function InsertImageDialog(props) {
+    const { open, activeEditor, onClose } = props;
+    const [mode, setMode] = useState(null);
+    const hasModifier = useRef(false);
+    useEffect(() => {
+        hasModifier.current = false;
+        const handler = (e) => {
+            hasModifier.current = e.altKey;
+        };
+        document.addEventListener("keydown", handler);
+        return () => {
+            document.removeEventListener("keydown", handler);
+        };
+    }, [activeEditor]);
+    const onClick = (payload) => {
+        activeEditor.dispatchCommand(INSERT_IMAGE_COMMAND, payload);
+        onClose();
+    };
+    const handleOnClose = () => {
+        setMode(null);
+        onClose();
+    };
+    return (_jsxs(AlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, {}), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(AlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC785\uB825\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL \uC785\uB825\uD558\uAE30", onClick: () => setMode("url") }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC62C\uB9AC\uAE30", onClick: () => setMode("file") })] }) })), mode === "url" && _jsx(InsertImageUriDialogBody, { onClick: onClick }), mode === "file" && _jsx(InsertImageUploadedDialogBody, { onClick: onClick })] })));
+}
+const Buttons = styled.div `
+  display: flex;
+  flex-direction: column;
+  margin-top: 20px;
+  gap: 20px;
+`;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -0,0 +1,5 @@
+import { InsertImagePayload } from ".";
+export interface InsertImageUploadedDialogBodyProps {
+    onClick: (payload: InsertImagePayload) => void;
+}
+export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -0,0 +1,49 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
+import { AlertDialogContent, AlertDialogActions } from "../../../../components/AlertDialog";
+import Button from "../../../../components/Button";
+import Input from "../../../../components/Input";
+export function InsertImageUploadedDialogBody(props) {
+    const { onClick } = props;
+    const [src, setSrc] = useState("");
+    const [altText, setAltText] = useState("");
+    const inputRef = useRef(null);
+    const cdsContext = useContext(CodleDesignSystemContext);
+    const isDisabled = src === "";
+    return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uC62C\uB9AC\uAE30", onClick: () => {
+                                var _a;
+                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                            } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                                var _a, _b;
+                                const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                if (!file)
+                                    return;
+                                const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                                if (uploadByFile) {
+                                    setSrc(yield uploadByFile(file));
+                                }
+                            }) }), _jsx(Input, { fullWidth: true, label: "\uC124\uBA85", placeholder: "\uC774\uBBF8\uC9C0\uC5D0 \uB300\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
+                                setAltText(e.target.value);
+                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { label: "\uD655\uC778", size: "large", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+}
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 10px;
+`;
+const HiddenInput = styled.input `
+  display: none;
+`;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -0,0 +1,5 @@
+import { InsertImagePayload } from ".";
+export interface InsertImageUriDialogBodyProps {
+    onClick: (payload: InsertImagePayload) => void;
+}
+export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;