@team-monolith/cds 1.3.2 → 1.4.0

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

@@ -0,0 +1,214 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/**
+ * + 버튼을 눌러 컴포넌트를 추가하는 플러그인
+ * ComponentPickerPlugin과 동일한 메뉴가 노출됩니다.
+ */
+/** @jsxImportSource @emotion/react */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { $getNearestNodeFromDOMNode, $createParagraphNode, $isParagraphNode, $isElementNode, $isTextNode, $getSelection, $isRangeSelection, } from "lexical";
+import ReactDOM, { createPortal } from "react-dom";
+// LexicalNodeMenuPlugin는 특정 Node 옆에 메뉴를 노출시키는 플러그인
+// 공식 문서에는 아무 내용도 없음...
+import { LexicalNodeMenuPlugin } from "@lexical/react/LexicalNodeMenuPlugin";
+import { useDraggableBlockMenu } from "./useDraggableBlockMenu";
+import { css as cssToClassName } from "@emotion/css";
+import { ComponentPickerMenuList, getBaseOptions, } from "../ComponentPickerMenuPlugin";
+import { useFloatingMenu } from "./useFloatingMenu";
+import ComponentAdder from "./ComponentAdder";
+import styled from "@emotion/styled";
+import { getContextMenuOptions } from "./getContextMenuOptions";
+import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
+export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
+function isOnMenu(element) {
+    return !!element.closest(`.${COMPONENT_ADDER_MENU_CLASSNAME}`);
+}
+// https://github.com/facebook/lexical/blob/4d2e3102b90d09662cbd70b014464be0ff80c7a0/packages/lexical-react/src/LexicalTypeaheadMenuPlugin.tsx#L37
+function getTextUpToAnchor(selection) {
+    const anchor = selection.anchor;
+    if (anchor.type !== "text") {
+        return null;
+    }
+    const anchorNode = anchor.getNode();
+    if (!anchorNode.isSimpleText()) {
+        return null;
+    }
+    const anchorOffset = anchor.offset;
+    return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+export function ComponentAdderPlugin(props) {
+    const { anchorElem } = props;
+    const [editor] = useLexicalComposerContext();
+    const [nodeKey, setNodeKey] = useState(null);
+    const menuRef = useRef(null);
+    const { blockElem, setBlockElem } = useFloatingMenu({
+        anchorElem,
+        menuRef,
+        isOnMenu,
+    });
+    const [plusOrMenu, setPlusOrMenu] = useState("plus");
+    const [options, setOptions] = useState([]);
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    // EditorState의 Selection 을 추적하여
+    // Plus 및 Menu 버튼을 누르고 다른 곳을 클릭하면 메뉴를 닫습니다.
+    // 텍스트를 입력했다면 옵션 검색에 활용합니다.
+    useEffect(() => {
+        const updateListener = () => {
+            editor.getEditorState().read(() => {
+                var _a;
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    // 다른 노드를 선택하면 메뉴를 닫습니다. (nodeKey를 null로 변경)
+                    //   selection 에 포함된 모든 node가 nodeKey와 일치하지 않을 때
+                    //   비교할 때는 selection이 Nested 하게 있을 수 있어 Root 바로 아래의 Node를 찾아 비교합니다.
+                    const nodes = selection.getNodes();
+                    const isAllNodesNotMatched = nodes.every((node) => {
+                        const nodeAndParents = [node, ...node.getParents()];
+                        return (nodeAndParents[nodeAndParents.length - 2].getKey() !== nodeKey);
+                    });
+                    if (isAllNodesNotMatched) {
+                        setQuery("");
+                        setNodeKey(null);
+                        return;
+                    }
+                    // Plus 버튼을 누르고 있고
+                    // 같은 노드를 선택하고 있다면 텍스트를 검색합니다.
+                    if (plusOrMenu === "plus") {
+                        setQuery((_a = getTextUpToAnchor(selection)) !== null && _a !== void 0 ? _a : "");
+                    }
+                }
+                else {
+                    setQuery("");
+                    setNodeKey(null);
+                }
+            });
+        };
+        const removeUpdateListener = editor.registerUpdateListener(updateListener);
+        return () => {
+            removeUpdateListener();
+        };
+    }, [editor, nodeKey, plusOrMenu]);
+    const onSelectOption = useCallback((selectedOption, textNodeContainingQuery, closeMenu, matchingString) => {
+        editor.update(() => {
+            selectedOption.onSelect(matchingString);
+            setNodeKey(null);
+            closeMenu();
+        });
+    }, [editor]);
+    const [resolves, setResolves] = useState([]);
+    const onClose = () => __awaiter(this, void 0, void 0, function* () {
+        resolves.forEach((resolve) => resolve());
+        setResolves((newResolves) => {
+            return newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1);
+        });
+    });
+    const filteredOptions = options.filter((option) => {
+        const regex = new RegExp(query, "i");
+        return (regex.test(option.title) ||
+            option.keywords.some((keyword) => regex.test(keyword)));
+    });
+    const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
+          // TODO 어드민에서 기본 z-index가 1이라 추가함. 없앨 수도 있음
+          z-index: 1;
+        `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
+                    ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
+                    : null, onSelectOption: onSelectOption, onClose: () => {
+                    setNodeKey(null);
+                    onClose();
+                } }), createPortal(_jsxs(_Fragment, { children: [_jsx(ComponentAdder, { ref: menuRef, className: COMPONENT_ADDER_MENU_CLASSNAME, onPlusClick: () => __awaiter(this, void 0, void 0, function* () {
+                            if (!blockElem) {
+                                return;
+                            }
+                            let newNodeKey = null;
+                            editor.update(() => {
+                                const selectedNode = $getNearestNodeFromDOMNode(blockElem);
+                                if (selectedNode) {
+                                    if ($isParagraphNode(selectedNode) &&
+                                        selectedNode.isEmpty()) {
+                                        newNodeKey = selectedNode.getKey();
+                                        selectedNode.selectStart();
+                                    }
+                                    else {
+                                        const insertedNode = $createParagraphNode();
+                                        selectedNode.insertAfter(insertedNode);
+                                        insertedNode.selectStart();
+                                        newNodeKey = insertedNode.getKey();
+                                        insertedNode.selectStart();
+                                    }
+                                }
+                            });
+                            if (!newNodeKey) {
+                                return;
+                            }
+                            if (nodeKey === null) {
+                                setNodeKey(newNodeKey);
+                            }
+                            else {
+                                const promise = new Promise((resolve) => {
+                                    setResolves((newResolves) => [...newResolves, resolve]);
+                                });
+                                // TODO: LexicalNodeMenuPlugin에 기여
+                                // setNodeKey(newNodeKey) 만으로 새로운 위치에 모달이 열리지 않는 문제.
+                                setNodeKey(null);
+                                yield promise;
+                                setNodeKey(newNodeKey);
+                            }
+                            const baseOptions = getBaseOptions(editor, setOpen);
+                            setOptions(baseOptions);
+                            setPlusOrMenu("plus");
+                        }), onMenuClick: () => __awaiter(this, void 0, void 0, function* () {
+                            if (!blockElem) {
+                                return;
+                            }
+                            let newNode = null;
+                            editor.update(() => __awaiter(this, void 0, void 0, function* () {
+                                newNode = $getNearestNodeFromDOMNode(blockElem);
+                                if (!newNode) {
+                                    return;
+                                }
+                                if ($isElementNode(newNode)) {
+                                    newNode.selectStart();
+                                }
+                                else if ($isTextNode(newNode)) {
+                                    newNode.select();
+                                }
+                                const contextMenuOptions = getContextMenuOptions(editor, newNode, setOpen);
+                                setOptions(contextMenuOptions);
+                                if (nodeKey === null) {
+                                    setNodeKey(newNode.getKey());
+                                }
+                                else {
+                                    const promise = new Promise((resolve) => {
+                                        setResolves((newResolves) => [...newResolves, resolve]);
+                                    });
+                                    // TODO: LexicalNodeMenuPlugin에 기여
+                                    // setNodeKey(newNodeKey) 만으로 새로운 위치에 모달이 열리지 않는 문제.
+                                    setNodeKey(null);
+                                    yield promise;
+                                    setNodeKey(newNode.getKey());
+                                }
+                                setPlusOrMenu("menu");
+                            }));
+                        }), onMenuDragStart: onDragStart, onMenuDragEnd: onDragEnd }), _jsx(TargetLine, { ref: targetLineRef })] }), anchorElem)] }));
+}
+const TargetLine = styled.div `
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
+`;

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/getContextMenuOptions.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Context Menu (:: 버튼)
+ */
+import { LexicalEditor, LexicalNode } from "lexical";
+import { ComponentPickerOption } from "../ComponentPickerMenuPlugin";
+export declare function getContextMenuOptions(editor: LexicalEditor, node: LexicalNode, setOpen: (open: boolean) => void): ComponentPickerOption[];

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

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Context Menu (:: 버튼)
+ */
+import { $getSelection, $isRangeSelection, } from "lexical";
+import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
+import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { ListItemNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
+import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIcon, } from "../../../../icons";
+function getHeadingContextMenuOptions(editor, node, setOpen) {
+    return [
+        ...[1, 2, 3].map((n) => {
+            const titleMap = {
+                1: "큰 제목",
+                2: "중간 제목",
+                3: "작은 제목",
+            };
+            const iconMap = {
+                1: _jsx(H1Icon, {}),
+                2: _jsx(H2Icon, {}),
+                3: _jsx(H3Icon, {}),
+            };
+            return new ComponentPickerOption(titleMap[n], {
+                icon: iconMap[n],
+                keywords: ["heading", "header", `h${n}`, titleMap[n]],
+                onSelect: () => editor.update(() => {
+                    const selection = $getSelection();
+                    if ($isRangeSelection(selection)) {
+                        $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                    }
+                }),
+            });
+        }),
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                editor.update(() => {
+                    node.remove();
+                });
+            },
+        }),
+    ];
+}
+function getListContextMenuOptions(editor, node, setOpen) {
+    return [
+        new ComponentPickerOption("일반 목록", {
+            icon: _jsx(ListUnorderedIcon, {}),
+            keywords: ["bulleted list", "unordered list", "ul"],
+            onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption("숫자 목록", {
+            icon: _jsx(ListOrderedIcon, {}),
+            keywords: ["numbered list", "ordered list", "ol"],
+            onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
+        }),
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                editor.update(() => {
+                    node.remove();
+                });
+            },
+        }),
+    ];
+}
+export function getContextMenuOptions(editor, node, setOpen) {
+    if (node instanceof HeadingNode) {
+        return getHeadingContextMenuOptions(editor, node, setOpen);
+    }
+    else if (node instanceof ListNode || node instanceof ListItemNode) {
+        return getListContextMenuOptions(editor, node, setOpen);
+    }
+    else {
+        return [
+            ...getBaseOptions(editor, setOpen),
+            new ComponentPickerOption("블록 삭제", {
+                icon: _jsx(CloseFillIcon, {}),
+                keywords: [],
+                onSelect: () => {
+                    editor.update(() => {
+                        node.remove();
+                    });
+                },
+            }),
+        ];
+    }
+}

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

@@ -0,0 +1 @@
+export * from "./ComponentAdderPlugin";

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

@@ -0,0 +1 @@
+export * from "./ComponentAdderPlugin";

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/menu.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M9.41002 7.29999H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 7.29999H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M9.31004 12H9.30005" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 12H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M9.41002 16.7H9.40002" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+  <path d="M14.6 16.7H14.59" stroke="#363636" stroke-width="2.6" stroke-linecap="round"/>
+</svg>

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M12 7V12M12 12V17M12 12H17M12 12H7" stroke="#363636" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useDraggableBlockMenu.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ */
+/** @jsxImportSource @emotion/react */
+import { LexicalEditor } from "lexical";
+import { DragEvent as ReactDragEvent } from "react";
+export declare function getBlockElement(anchorElem: HTMLElement, editor: LexicalEditor, event: MouseEvent, useEdgeAsDefault?: boolean): HTMLElement | null;
+export declare function useDraggableBlockMenu(editor: LexicalEditor, anchorElem: HTMLElement, blockElem: HTMLElement | null, setBlockElem: (blockElem: HTMLElement | null) => void): {
+    onDragStart: (event: ReactDragEvent<HTMLDivElement>) => void;
+    onDragEnd: () => void;
+    targetLineRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,234 @@
+/**
+ * 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.
+ *
+ */
+/** @jsxImportSource @emotion/react */
+import { eventFiles } from "@lexical/rich-text";
+import { mergeRegister } from "@lexical/utils";
+import { $getNearestNodeFromDOMNode, $getNodeByKey, $getRoot, COMMAND_PRIORITY_HIGH, COMMAND_PRIORITY_LOW, DRAGOVER_COMMAND, DROP_COMMAND, } from "lexical";
+import { useEffect, useRef } from "react";
+import { isHTMLElement } from "../../utils/guard";
+import { Point } from "../../utils/point";
+import { Rect } from "../../utils/rect";
+const SPACE = 4;
+const TARGET_LINE_HALF_HEIGHT = 2;
+const DRAG_DATA_FORMAT = "application/x-lexical-drag-block";
+const TEXT_BOX_HORIZONTAL_PADDING = 28;
+const Downward = 1;
+const Upward = -1;
+const Indeterminate = 0;
+let prevIndex = Infinity;
+function getCurrentIndex(keysLength) {
+    if (keysLength === 0) {
+        return Infinity;
+    }
+    if (prevIndex >= 0 && prevIndex < keysLength) {
+        return prevIndex;
+    }
+    return Math.floor(keysLength / 2);
+}
+function getTopLevelNodeKeys(editor) {
+    return editor.getEditorState().read(() => $getRoot().getChildrenKeys());
+}
+function getCollapsedMargins(elem) {
+    const getMargin = (element, margin) => element ? parseFloat(window.getComputedStyle(element)[margin]) : 0;
+    const { marginTop, marginBottom } = window.getComputedStyle(elem);
+    const prevElemSiblingMarginBottom = getMargin(elem.previousElementSibling, "marginBottom");
+    const nextElemSiblingMarginTop = getMargin(elem.nextElementSibling, "marginTop");
+    const collapsedTopMargin = Math.max(parseFloat(marginTop), prevElemSiblingMarginBottom);
+    const collapsedBottomMargin = Math.max(parseFloat(marginBottom), nextElemSiblingMarginTop);
+    return { marginBottom: collapsedBottomMargin, marginTop: collapsedTopMargin };
+}
+export function getBlockElement(anchorElem, editor, event, useEdgeAsDefault = false) {
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const topLevelNodeKeys = getTopLevelNodeKeys(editor);
+    let blockElem = null;
+    editor.getEditorState().read(() => {
+        if (useEdgeAsDefault) {
+            const [firstNode, lastNode] = [
+                editor.getElementByKey(topLevelNodeKeys[0]),
+                editor.getElementByKey(topLevelNodeKeys[topLevelNodeKeys.length - 1]),
+            ];
+            const [firstNodeRect, lastNodeRect] = [
+                firstNode === null || firstNode === void 0 ? void 0 : firstNode.getBoundingClientRect(),
+                lastNode === null || lastNode === void 0 ? void 0 : lastNode.getBoundingClientRect(),
+            ];
+            if (firstNodeRect && lastNodeRect) {
+                if (event.y < firstNodeRect.top) {
+                    blockElem = firstNode;
+                }
+                else if (event.y > lastNodeRect.bottom) {
+                    blockElem = lastNode;
+                }
+                if (blockElem) {
+                    return;
+                }
+            }
+        }
+        let index = getCurrentIndex(topLevelNodeKeys.length);
+        let direction = Indeterminate;
+        while (index >= 0 && index < topLevelNodeKeys.length) {
+            const key = topLevelNodeKeys[index];
+            const elem = editor.getElementByKey(key);
+            if (elem === null) {
+                break;
+            }
+            const point = new Point(event.x, event.y);
+            const domRect = Rect.fromDOM(elem);
+            const { marginTop, marginBottom } = getCollapsedMargins(elem);
+            const rect = domRect.generateNewRect({
+                bottom: domRect.bottom + marginBottom,
+                left: anchorElementRect.left,
+                right: anchorElementRect.right,
+                top: domRect.top - marginTop,
+            });
+            const { result, reason: { isOnTopSide, isOnBottomSide }, } = rect.contains(point);
+            if (result) {
+                blockElem = elem;
+                prevIndex = index;
+                break;
+            }
+            if (direction === Indeterminate) {
+                if (isOnTopSide) {
+                    direction = Upward;
+                }
+                else if (isOnBottomSide) {
+                    direction = Downward;
+                }
+                else {
+                    // stop search block element
+                    direction = Infinity;
+                }
+            }
+            index += direction;
+        }
+    });
+    return blockElem;
+}
+function setDragImage(dataTransfer, draggableBlockElem) {
+    const { transform } = draggableBlockElem.style;
+    // Remove dragImage borders
+    draggableBlockElem.style.transform = "translateZ(0)";
+    dataTransfer.setDragImage(draggableBlockElem, 0, 0);
+    setTimeout(() => {
+        draggableBlockElem.style.transform = transform;
+    });
+}
+function setTargetLine(targetLineElem, targetBlockElem, mouseY, anchorElem) {
+    const { top: targetBlockElemTop, height: targetBlockElemHeight } = targetBlockElem.getBoundingClientRect();
+    const { top: anchorTop, width: anchorWidth } = anchorElem.getBoundingClientRect();
+    const { marginTop, marginBottom } = getCollapsedMargins(targetBlockElem);
+    let lineTop = targetBlockElemTop;
+    if (mouseY >= targetBlockElemTop) {
+        lineTop += targetBlockElemHeight + marginBottom / 2;
+    }
+    else {
+        lineTop -= marginTop / 2;
+    }
+    const top = lineTop - anchorTop - TARGET_LINE_HALF_HEIGHT;
+    const left = TEXT_BOX_HORIZONTAL_PADDING - SPACE;
+    targetLineElem.style.transform = `translate(${left}px, ${top}px)`;
+    targetLineElem.style.width = `${anchorWidth - (TEXT_BOX_HORIZONTAL_PADDING - SPACE) * 2}px`;
+    targetLineElem.style.opacity = ".4";
+}
+function hideTargetLine(targetLineElem) {
+    if (targetLineElem) {
+        targetLineElem.style.opacity = "0";
+        targetLineElem.style.transform = "translate(-10000px, -10000px)";
+    }
+}
+export function useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem) {
+    const targetLineRef = useRef(null);
+    const isDraggingBlockRef = useRef(false);
+    useEffect(() => {
+        function onDragover(event) {
+            if (!isDraggingBlockRef.current) {
+                return false;
+            }
+            const [isFileTransfer] = eventFiles(event);
+            if (isFileTransfer) {
+                return false;
+            }
+            const { pageY, target } = event;
+            if (!isHTMLElement(target)) {
+                return false;
+            }
+            const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+            const targetLineElem = targetLineRef.current;
+            if (targetBlockElem === null || targetLineElem === null) {
+                return false;
+            }
+            setTargetLine(targetLineElem, targetBlockElem, pageY, anchorElem);
+            // Prevent default event to be able to trigger onDrop events
+            event.preventDefault();
+            return true;
+        }
+        function onDrop(event) {
+            if (!isDraggingBlockRef.current) {
+                return false;
+            }
+            const [isFileTransfer] = eventFiles(event);
+            if (isFileTransfer) {
+                return false;
+            }
+            const { target, dataTransfer, pageY } = event;
+            const dragData = (dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.getData(DRAG_DATA_FORMAT)) || "";
+            const draggedNode = $getNodeByKey(dragData);
+            if (!draggedNode) {
+                return false;
+            }
+            if (!isHTMLElement(target)) {
+                return false;
+            }
+            const targetBlockElem = getBlockElement(anchorElem, editor, event, true);
+            if (!targetBlockElem) {
+                return false;
+            }
+            const targetNode = $getNearestNodeFromDOMNode(targetBlockElem);
+            if (!targetNode) {
+                return false;
+            }
+            if (targetNode === draggedNode) {
+                return true;
+            }
+            const targetBlockElemTop = targetBlockElem.getBoundingClientRect().top;
+            if (pageY >= targetBlockElemTop) {
+                targetNode.insertAfter(draggedNode);
+            }
+            else {
+                targetNode.insertBefore(draggedNode);
+            }
+            setBlockElem(null);
+            return true;
+        }
+        return mergeRegister(editor.registerCommand(DRAGOVER_COMMAND, (event) => {
+            return onDragover(event);
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(DROP_COMMAND, (event) => {
+            return onDrop(event);
+        }, COMMAND_PRIORITY_HIGH));
+    }, [anchorElem, editor, setBlockElem]);
+    function onDragStart(event) {
+        const dataTransfer = event.dataTransfer;
+        if (!dataTransfer || !blockElem) {
+            return;
+        }
+        setDragImage(dataTransfer, blockElem);
+        let nodeKey = "";
+        editor.update(() => {
+            const node = $getNearestNodeFromDOMNode(blockElem);
+            if (node) {
+                nodeKey = node.getKey();
+            }
+        });
+        isDraggingBlockRef.current = true;
+        dataTransfer.setData(DRAG_DATA_FORMAT, nodeKey);
+    }
+    function onDragEnd() {
+        isDraggingBlockRef.current = false;
+        hideTargetLine(targetLineRef.current);
+    }
+    return { onDragStart, onDragEnd, targetLineRef };
+}

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useFloatingMenu.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/** @jsxImportSource @emotion/react */
+/// <reference types="react" />
+import { LexicalEditor } from "lexical";
+export declare function getBlockElement(anchorElem: HTMLElement, editor: LexicalEditor, event: MouseEvent, useEdgeAsDefault?: boolean): HTMLElement | null;
+export interface UseFloatingMenuProps {
+    anchorElem: HTMLElement;
+    menuRef: React.RefObject<HTMLDivElement>;
+    isOnMenu: (element: HTMLElement) => boolean;
+}
+export declare function useFloatingMenu(props: UseFloatingMenuProps): {
+    blockElem: HTMLElement | null;
+    setBlockElem: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
+};