@team-monolith/cds 1.119.3 → 1.119.4

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

@@ -164,57 +164,57 @@ export function FloatingLinkEditor(props) {
                                 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 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 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 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 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;
+const StyledInput = styled(Input) `
+  margin: 4px 0px;
 `;

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

@@ -19,41 +19,41 @@ export const FloatingTextFormatPopup = forwardRef(function FloatingTextFormatPop
                         editor.dispatchCommand(FORMAT_TEXT_COMMAND, "code");
                     }, active: Boolean(isCode), "aria-label": "Insert code block", children: _jsx(CodeFillIcon, {}) }), _jsx(IconButton, { type: "button", onClick: insertLink, active: Boolean(isLink), "aria-label": "Insert link", children: _jsx(LinkIcon, {}) })] })) }));
 });
-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 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};
-  }
+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/ParagraphPlaceholderPlugin/index.js

@@ -3,6 +3,8 @@ import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext
 import { $getSelection, $isParagraphNode, $isRangeSelection } from "lexical";
 import { css as cssToClassName } from "@emotion/css";
 import { useTheme } from "@emotion/react";
+import { $isToggleTitleNode } from "../../nodes";
+import { useTranslation } from "react-i18next";
 const getPlaceholderClassName = (theme) => cssToClassName `
   &::before {
     position: absolute;
@@ -17,6 +19,7 @@ export const ParagraphPlaceholderPlugin = ({ placeholder, }) => {
     const theme = useTheme();
     const placeholderClassName = useMemo(() => getPlaceholderClassName(theme), [theme]);
     useEffect(() => {
+        const { t } = useTranslation();
         const removeUpdateListener = editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
                 // 기존에 있던 placeholder를 제거합니다.
@@ -36,10 +39,16 @@ export const ParagraphPlaceholderPlugin = ({ placeholder, }) => {
                 const focusedNode = selection.focus.getNode();
                 if (!$isParagraphNode(focusedNode) || !focusedNode.isEmpty())
                     return;
+                const parentNode = focusedNode.getParent();
+                // 토글 제목 노드인 경우, / 명령어를 사용하지 않으므로
+                // 기존 placeholder 값을 "토글 제목"으로 고정합니다.
+                const placeholderText = $isToggleTitleNode(parentNode)
+                    ? t("토글 제목")
+                    : placeholder;
                 const el = editor.getElementByKey(focusedNode.getKey());
                 if (el instanceof HTMLParagraphElement) {
                     paragraphRef.current = el;
-                    paragraphRef.current.setAttribute("data-placeholder", placeholder);
+                    paragraphRef.current.setAttribute("data-placeholder", placeholderText);
                     paragraphRef.current.classList.add(placeholderClassName);
                 }
             });

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

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+export declare const INSERT_TOGGLE_COMMAND: import("lexical").LexicalCommand<void>;
+export declare function TogglePlugin(): null;

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

@@ -0,0 +1,198 @@
+/**
+ * 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.
+ *
+ */
+// https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/plugins/CollapsiblePlugin/index.ts
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $setBlocksType } from "@lexical/selection";
+import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister, } from "@lexical/utils";
+import { $createParagraphNode, $getSelection, $isElementNode, $isParagraphNode, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_LOW, createCommand, INSERT_PARAGRAPH_COMMAND, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from "lexical";
+import { useEffect } from "react";
+import { $createToggleContainerNode, $createToggleTitleNode, $createToggleContentNode, $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, ToggleContainerNode, ToggleTitleNode, ToggleContentNode, } from "../../nodes";
+export const INSERT_TOGGLE_COMMAND = createCommand("INSERT_TOGGLE_COMMAND");
+export function TogglePlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([
+            ToggleContainerNode,
+            ToggleTitleNode,
+            ToggleContentNode,
+        ])) {
+            throw new Error("TogglePlugin: ToggleContainerNode, ToggleTitleNode, or ToggleContentNode not registered on editor");
+        }
+        const $onEscapeUp = () => {
+            var _a;
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) &&
+                selection.isCollapsed() &&
+                selection.anchor.offset === 0) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isToggleContainerNode);
+                if ($isToggleContainerNode(container)) {
+                    const parent = container.getParent();
+                    if (parent !== null &&
+                        parent.getFirstChild() === container &&
+                        selection.anchor.key === ((_a = container.getFirstDescendant()) === null || _a === void 0 ? void 0 : _a.getKey())) {
+                        container.insertBefore($createParagraphNode());
+                    }
+                }
+            }
+            return false;
+        };
+        const $onEscapeDown = () => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) && selection.isCollapsed()) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isToggleContainerNode);
+                if ($isToggleContainerNode(container)) {
+                    const parent = container.getParent();
+                    if (parent !== null && parent.getLastChild() === container) {
+                        const titleParagraph = container.getFirstDescendant();
+                        const contentParagraph = container.getLastDescendant();
+                        if ((contentParagraph !== null &&
+                            selection.anchor.key === contentParagraph.getKey() &&
+                            selection.anchor.offset ===
+                                contentParagraph.getTextContentSize()) ||
+                            (titleParagraph !== null &&
+                                selection.anchor.key === titleParagraph.getKey() &&
+                                selection.anchor.offset === titleParagraph.getTextContentSize())) {
+                            container.insertAfter($createParagraphNode());
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        return mergeRegister(
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Title + Content" it'll unwrap nodes and convert it back
+        // to regular content.
+        editor.registerNodeTransform(ToggleContentNode, (node) => {
+            const parent = node.getParent();
+            if (!$isToggleContainerNode(parent)) {
+                const children = node.getChildren();
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), 
+        /**
+         * ToggleTitleNode 변경 시 내부 요소는 ParagraphNode만 허용하도록
+         * 각 자식 요소를 순회하면서 내부 텍스트를 ParagraphNode로 호이스트합니다.
+         */
+        editor.registerNodeTransform(ToggleTitleNode, (node) => {
+            const parent = node.getParent();
+            if (!$isToggleContainerNode(parent)) {
+                node.replace($createParagraphNode().append(...node.getChildren()));
+                return;
+            }
+            let paragraph = node.getFirstChild();
+            if (!$isParagraphNode(paragraph)) {
+                const p = $createParagraphNode();
+                if (paragraph) {
+                    paragraph.insertBefore(p);
+                }
+                else {
+                    node.append(p);
+                }
+                paragraph = p;
+            }
+            // AIDEV-NOTE:
+            // paragraph의 타입이 LexicalNode인 경우 append 메서드가 없기 때문에
+            // $isParagraphNode 체크를 통해 타입 가드를 수행합니다.
+            if (!$isParagraphNode(paragraph)) {
+                return;
+            }
+            const hoistTexts = (n) => {
+                if ($isTextNode(n)) {
+                    paragraph.append(n);
+                    return;
+                }
+                if ($isElementNode(n)) {
+                    const children = n.getChildren();
+                    for (const c of children) {
+                        hoistTexts(c);
+                    }
+                    if (n !== paragraph && n.getChildrenSize() === 0) {
+                        n.remove();
+                    }
+                    return;
+                }
+            };
+            let child = node.getFirstChild();
+            while (child) {
+                const next = child.getNextSibling();
+                if (child !== paragraph) {
+                    hoistTexts(child);
+                    if ($isElementNode(child) && child.getChildrenSize() === 0) {
+                        child.remove();
+                    }
+                }
+                child = next;
+            }
+            if (paragraph.getParent() !== node) {
+                node.append(paragraph);
+            }
+        }), editor.registerNodeTransform(ToggleContainerNode, (node) => {
+            const children = node.getChildren();
+            if (children.length !== 2 ||
+                !$isToggleTitleNode(children[0]) ||
+                !$isToggleContentNode(children[1])) {
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), 
+        // When toggle is the last child pressing down/right arrow will insert paragraph
+        // below it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if trailing paragraph is accidentally deleted
+        editor.registerCommand(KEY_ARROW_DOWN_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), 
+        // When toggle is the first child pressing up/left arrow will insert paragraph
+        // above it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if leading paragraph is accidentally deleted
+        editor.registerCommand(KEY_ARROW_UP_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), 
+        // Enter goes from Title to Content rather than a new line inside Title
+        editor.registerCommand(INSERT_PARAGRAPH_COMMAND, () => {
+            var _a;
+            const selection = $getSelection();
+            if ($isRangeSelection(selection)) {
+                const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) => $isToggleTitleNode(node));
+                if ($isToggleTitleNode(titleNode)) {
+                    const container = titleNode.getParent();
+                    if (container && $isToggleContainerNode(container)) {
+                        if (!container.getOpen()) {
+                            container.toggleOpen();
+                        }
+                        (_a = titleNode.getNextSibling()) === null || _a === void 0 ? void 0 : _a.selectEnd();
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }, COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_TOGGLE_COMMAND, () => {
+            editor.update(() => {
+                const title = $createToggleTitleNode();
+                const paragraph = $createParagraphNode();
+                const selection = $getSelection();
+                if ($isRangeSelection(selection)) {
+                    // 선택된 블록이 있는 경우 기존 블록을 토글 블록으로 변환하여 불필요한 줄바꿈 생성 방지
+                    $setBlocksType(selection, () => 
+                    // 생성된 토글 블록의 open 속성은 기본값 false (노션 동작을 따름)
+                    $createToggleContainerNode(false).append(title.append(paragraph), $createToggleContentNode().append($createParagraphNode())));
+                }
+                else {
+                    // 선택된 블록이 없는 경우 레퍼런스 코드의 동작을 따름
+                    $insertNodeToNearestRoot($createToggleContainerNode(false).append(title.append(paragraph), $createToggleContentNode().append($createParagraphNode())));
+                }
+                paragraph.select();
+            });
+            return true;
+        }, COMMAND_PRIORITY_LOW));
+    }, [editor]);
+    return null;
+}

package/dist/patterns/LexicalEditor/theme.d.ts

@@ -36,4 +36,10 @@ export declare function getTheme(theme: Theme, editable: boolean): {
     layoutContainer: string;
     layoutItem: string | false;
     selfEvaluation: string;
+    toggle: {
+        container: string;
+        title: string;
+        iconBtn: string;
+        content: string;
+    };
 };