@team-monolith/cds 1.3.2 → 1.4.0

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

@@ -0,0 +1,158 @@
+/**
+ * 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 { $getRoot } from "lexical";
+import { useEffect, useState } from "react";
+import { isHTMLElement } from "../../utils/guard";
+import { Point } from "../../utils/point";
+import { Rect } from "../../utils/rect";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+const SPACE = 4;
+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 setMenuPosition(targetElem, floatingElem, anchorElem) {
+    if (!targetElem) {
+        floatingElem.style.opacity = "0";
+        floatingElem.style.transform = "translate(-10000px, -10000px)";
+        return;
+    }
+    const targetRect = targetElem.getBoundingClientRect();
+    const targetStyle = window.getComputedStyle(targetElem);
+    const floatingElemRect = floatingElem.getBoundingClientRect();
+    const anchorElementRect = anchorElem.getBoundingClientRect();
+    const top = targetRect.top +
+        (parseInt(targetStyle.lineHeight, 10) - floatingElemRect.height) / 2 -
+        anchorElementRect.top;
+    const left = SPACE;
+    floatingElem.style.opacity = "1";
+    floatingElem.style.transform = `translate(${left}px, ${top}px)`;
+}
+export function useFloatingMenu(props) {
+    const { anchorElem, menuRef, isOnMenu } = props;
+    const scrollerElem = anchorElem.parentElement;
+    const [editor] = useLexicalComposerContext();
+    const [blockElem, setBlockElem] = useState(null);
+    useEffect(() => {
+        function onMouseMove(event) {
+            const target = event.target;
+            if (!isHTMLElement(target)) {
+                setBlockElem(null);
+                return;
+            }
+            if (isOnMenu(target)) {
+                return;
+            }
+            const _blockElem = getBlockElement(anchorElem, editor, event);
+            setBlockElem(_blockElem);
+        }
+        function onMouseLeave() {
+            setBlockElem(null);
+        }
+        scrollerElem === null || scrollerElem === void 0 ? void 0 : scrollerElem.addEventListener("mousemove", onMouseMove);
+        scrollerElem === null || scrollerElem === void 0 ? void 0 : scrollerElem.addEventListener("mouseleave", onMouseLeave);
+        return () => {
+            scrollerElem === null || scrollerElem === void 0 ? void 0 : scrollerElem.removeEventListener("mousemove", onMouseMove);
+            scrollerElem === null || scrollerElem === void 0 ? void 0 : scrollerElem.removeEventListener("mouseleave", onMouseLeave);
+        };
+    }, [scrollerElem, anchorElem, editor, isOnMenu]);
+    useEffect(() => {
+        if (menuRef.current) {
+            setMenuPosition(blockElem, menuRef.current, anchorElem);
+        }
+    }, [anchorElem, blockElem, menuRef]);
+    return { blockElem, setBlockElem };
+}

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuItem.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
+export interface ComponentPickerMenuItemProps {
+    index: number;
+    isSelected: boolean;
+    onClick: () => void;
+    onMouseEnter: () => void;
+    option: ComponentPickerOption;
+}
+export declare function ComponentPickerMenuItem(props: ComponentPickerMenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import styled from "@emotion/styled";
+export function ComponentPickerMenuItem(props) {
+    const { index, isSelected, onClick, onMouseEnter, option } = props;
+    return (_jsxs(ItemContainer, Object.assign({ tabIndex: -1, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: "typeahead-item-" + index, onMouseEnter: onMouseEnter, onClick: onClick, isSelected: isSelected }, { children: [_jsx(IconContainer, { children: option.icon }), _jsx(Title, { children: option.title })] }), option.key));
+}
+const ItemContainer = styled.li `
+  display: flex;
+  padding: 3px 2px;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+
+  ${({ isSelected }) => isSelected && "background: #eee;"}
+`;
+const IconContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 5px;
+
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+  box-shadow: 0px 0px 0px 1px rgba(201, 201, 204, 0.48);
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const Title = styled.span `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+`;

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuList.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
+export interface ComponentPickerMenuListProps {
+    options: ComponentPickerOption[];
+    selectedIndex: number | null;
+    selectOptionAndCleanUp: (option: ComponentPickerOption) => void;
+    setHighlightedIndex: (index: number) => void;
+}
+export declare function ComponentPickerMenuList(props: ComponentPickerMenuListProps): JSX.Element;

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { ComponentPickerMenuItem } from "./ComponentPickerMenuItem";
+export function ComponentPickerMenuList(props) {
+    const { options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex, } = props;
+    return (_jsx(Container, { children: _jsx(ListContainer, { children: options.map((option, i) => (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
+                    setHighlightedIndex(i);
+                    selectOptionAndCleanUp(option);
+                }, onMouseEnter: () => {
+                    setHighlightedIndex(i);
+                }, option: option }, option.key))) }) }));
+}
+const Container = styled.div `
+  position: absolute;
+
+  display: flex;
+  width: 200px;
+  padding: 4px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+
+  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 ListContainer = styled.ul `
+  padding: 0;
+  list-style: none;
+  margin: 0;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  align-self: stretch;
+
+  overflow-y: scroll;
+
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/** @jsxImportSource @emotion/react */
+/// <reference types="react" />
+import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { LexicalEditor } from "lexical";
+export declare class ComponentPickerOption extends MenuOption {
+    title: string;
+    icon?: JSX.Element;
+    keywords: Array<string>;
+    keyboardShortcut?: string;
+    onSelect: (queryString: string) => void;
+    constructor(title: string, options: {
+        icon?: JSX.Element;
+        keywords?: Array<string>;
+        keyboardShortcut?: string;
+        onSelect: (queryString: string) => void;
+    });
+}
+export declare function getBaseOptions(editor: LexicalEditor, setOpen: (open: boolean) => void): ComponentPickerOption[];
+export declare function ComponentPickerMenuPlugin(): JSX.Element;

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

@@ -0,0 +1,174 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/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.
+ *
+ */
+/** @jsxImportSource @emotion/react */
+import { $createCodeNode } from "@lexical/code";
+import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontalRuleNode";
+import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from "@lexical/react/LexicalTypeaheadMenuPlugin";
+import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
+import { $setBlocksType } from "@lexical/selection";
+import { INSERT_TABLE_COMMAND } from "@lexical/table";
+import { $createParagraphNode, $getSelection, $isRangeSelection, } from "lexical";
+import { useCallback, useMemo, useState } from "react";
+import * as ReactDOM from "react-dom";
+import { css as cssToClassName } from "@emotion/css";
+import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
+import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, } from "../../../../icons";
+// import useModal from "../../hooks/useModal";
+// import catTypingGif from "../../images/cat-typing.gif";
+// import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
+export class ComponentPickerOption extends MenuOption {
+    constructor(title, options) {
+        super(title);
+        this.title = title;
+        this.keywords = options.keywords || [];
+        this.icon = options.icon;
+        this.keyboardShortcut = options.keyboardShortcut;
+        this.onSelect = options.onSelect.bind(this);
+    }
+}
+function getDynamicOptions(editor, queryString) {
+    const options = [];
+    if (queryString == null) {
+        return options;
+    }
+    const tableMatch = queryString.match(/^([1-9]\d?)(?:x([1-9]\d?)?)?$/);
+    if (tableMatch !== null) {
+        const rows = tableMatch[1];
+        const colOptions = tableMatch[2]
+            ? [tableMatch[2]]
+            : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String);
+        options.push(...colOptions.map((columns) => new ComponentPickerOption(`${rows}x${columns} Table`, {
+            icon: _jsx("i", { className: "icon table" }),
+            keywords: ["table"],
+            onSelect: () => editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
+        })));
+    }
+    return options;
+}
+export function getBaseOptions(editor, setOpen) {
+    return [
+        new ComponentPickerOption("본문", {
+            icon: _jsx(TextIcon, {}),
+            keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createParagraphNode());
+                }
+            }),
+        }),
+        ...[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(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(DoubleQuotesLIcon, {}),
+            keywords: ["block quote"],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    $setBlocksType(selection, () => $createQuoteNode());
+                }
+            }),
+        }),
+        new ComponentPickerOption("코드 블록", {
+            icon: _jsx(CodeViewIcon, {}),
+            keywords: ["javascript", "python", "js", "codeblock"],
+            onSelect: () => editor.update(() => {
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    if (selection.isCollapsed()) {
+                        $setBlocksType(selection, () => $createCodeNode());
+                    }
+                    else {
+                        // Will this ever happen?
+                        const textContent = selection.getTextContent();
+                        const codeNode = $createCodeNode();
+                        selection.insertNodes([codeNode]);
+                        selection.insertRawText(textContent);
+                    }
+                }
+            }),
+        }),
+        new ComponentPickerOption("구분선", {
+            icon: _jsx(SeparatorIcon, {}),
+            keywords: ["horizontal rule", "divider", "hr"],
+            onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
+        }),
+        new ComponentPickerOption("이미지", {
+            icon: _jsx(ImageLineIcon, {}),
+            keywords: ["image", "photo", "picture", "file"],
+            onSelect: () => setOpen(true),
+        }),
+    ];
+}
+export function ComponentPickerMenuPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [queryString, setQueryString] = useState(null);
+    const [open, setOpen] = useState(false);
+    const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
+        minLength: 0,
+    });
+    const options = useMemo(() => {
+        const baseOptions = getBaseOptions(editor, setOpen);
+        if (!queryString) {
+            return baseOptions;
+        }
+        const regex = new RegExp(queryString, "i");
+        return [
+            ...getDynamicOptions(editor, queryString),
+            ...baseOptions.filter((option) => regex.test(option.title) ||
+                option.keywords.some((keyword) => regex.test(keyword))),
+        ];
+    }, [editor, queryString, setOpen]);
+    const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
+        editor.update(() => {
+            nodeToRemove === null || nodeToRemove === void 0 ? void 0 : nodeToRemove.remove();
+            selectedOption.onSelect(matchingString);
+            closeMenu();
+        });
+    }, [editor]);
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
+          // TODO 어드민에서 기본 z-index가 1이라 추가함. 없앨 수도 있음
+          z-index: 1;
+        `, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
+                    ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
+                    : null })] }));
+}

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

@@ -0,0 +1,3 @@
+export * from "./ComponentPickerMenuPlugin";
+export * from "./ComponentPickerMenuList";
+export * from "./ComponentPickerMenuItem";

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

@@ -0,0 +1,3 @@
+export * from "./ComponentPickerMenuPlugin";
+export * from "./ComponentPickerMenuList";
+export * from "./ComponentPickerMenuItem";

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

@@ -0,0 +1,11 @@
+import { Dispatch } from "react";
+import { LexicalEditor } from "lexical";
+export interface FloatingLinkEditorProps {
+    editor: LexicalEditor;
+    isLink: boolean;
+    setIsLink: Dispatch<boolean>;
+    anchorElem: HTMLElement;
+    isLinkEditMode: boolean;
+    setIsLinkEditMode: Dispatch<boolean>;
+}
+export declare function FloatingLinkEditor(props: FloatingLinkEditorProps): JSX.Element;