@team-monolith/cds 1.119.0 → 1.119.2

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

@@ -17,7 +17,7 @@ import { ListItemNode, ListNode } from "@lexical/list";
 import { CodeHighlightNode, CodeNode } from "@lexical/code";
 import { LinkNode } from "@lexical/link";
 import { FileNode } from "./FileNode";
-export declare const nodes: (typeof ColoredQuoteNode | typeof QuoteNode | typeof ImageNode | typeof VideoNode | typeof FileNode | typeof ProblemInputNode | typeof ProblemSelectNode | typeof SelfEvaluationNode | typeof SheetInputNode | typeof SheetSelectNode | typeof LayoutContainerNode | typeof ToggleContainerNode | typeof ToggleContentNode | typeof ToggleTitleNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof LinkNode | typeof HorizontalRuleNode | {
+export declare const nodes: (typeof ColoredQuoteNode | typeof QuoteNode | typeof ImageNode | typeof VideoNode | typeof FileNode | typeof ProblemInputNode | typeof ProblemSelectNode | typeof SelfEvaluationNode | typeof SheetInputNode | typeof SheetSelectNode | typeof LayoutContainerNode | typeof ToggleContentNode | typeof ToggleTitleNode | typeof ToggleContainerNode | typeof HeadingNode | typeof ListNode | typeof ListItemNode | typeof CodeNode | typeof CodeHighlightNode | typeof TableNode | typeof TableCellNode | typeof TableRowNode | typeof LinkNode | typeof HorizontalRuleNode | {
     replace: typeof QuoteNode;
     with: () => ColoredQuoteNode;
 })[];

package/dist/patterns/LexicalEditor/nodes/toggleNodes/ToggleContainerNode.js

@@ -11,6 +11,7 @@
 import { addClassNamesToElement } from "@lexical/utils";
 import { $getSiblingCaret, $isElementNode, $rewindSiblingCaret, ElementNode, isHTMLElement, } from "lexical";
 import { setDomHiddenUntilFound } from "../../utils/toggleUtils";
+import { DATA_LEXICAL_TOGGLE_ICON_BUTTON } from "./ToggleTitleNode";
 export function $convertToggleContainerElement(domNode) {
     // open 속성이 없으면 기본값 false
     const isOpen = "open" in domNode ? domNode.open : false;
@@ -55,7 +56,9 @@ export class ToggleContainerNode extends ElementNode {
     // IS_CHROME 분기 제거
     createDOM(config) {
         const dom = document.createElement("div");
-        dom.setAttribute("open", "");
+        if (this.__open) {
+            dom.setAttribute("open", "");
+        }
         addClassNamesToElement(dom, config.theme.toggle.container);
         return dom;
     }
@@ -81,7 +84,7 @@ export class ToggleContainerNode extends ElementNode {
             if (!isHTMLElement(titleDom)) {
                 throw new Error("Expected titleDom to be an HTMLElement");
             }
-            const iconButton = titleDom.firstElementChild;
+            const iconButton = titleDom.querySelector(`[${DATA_LEXICAL_TOGGLE_ICON_BUTTON}]`);
             if (iconButton) {
                 iconButton.setAttribute("aria-expanded", currentOpen.toString());
             }

package/dist/patterns/LexicalEditor/nodes/toggleNodes/ToggleTitleNode.d.ts

@@ -6,6 +6,7 @@
  *
  */
 import { DOMConversionOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, RangeSelection } from "lexical";
+export declare const DATA_LEXICAL_TOGGLE_ICON_BUTTON = "data-lexical-toggle-icon-button";
 export declare function $convertToggleTitleElement(_domNode: HTMLElement): DOMConversionOutput | null;
 /** @noInheritDoc */
 export declare class ToggleTitleNode extends ElementNode {

package/dist/patterns/LexicalEditor/nodes/toggleNodes/ToggleTitleNode.js

@@ -10,6 +10,7 @@ import { addClassNamesToElement } from "@lexical/utils";
 import { $createParagraphNode, $isElementNode, buildImportMap, ElementNode, } from "lexical";
 import { $isToggleContainerNode } from "./ToggleContainerNode";
 import { $isToggleContentNode } from "./ToggleContentNode";
+export const DATA_LEXICAL_TOGGLE_ICON_BUTTON = "data-lexical-toggle-icon-button";
 export function $convertToggleTitleElement(_domNode) {
     const node = $createToggleTitleNode();
     return {
@@ -44,6 +45,7 @@ export class ToggleTitleNode extends ElementNode {
         addClassNamesToElement(iconBtn, config.theme.toggle.iconBtn);
         iconBtn.setAttribute("aria-label", "Toggle content");
         iconBtn.setAttribute("contenteditable", "false");
+        iconBtn.setAttribute(DATA_LEXICAL_TOGGLE_ICON_BUTTON, "true");
         editor.getEditorState().read(() => {
             const containerNode = this.getParent();
             if ($isToggleContainerNode(containerNode)) {

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Context Menu (:: 버튼)
  */
-import { $createParagraphNode, ParagraphNode, } from "lexical";
+import { $createParagraphNode, $createTextNode, $isElementNode, ParagraphNode, } from "lexical";
 import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
 import { $createHeadingNode, $createQuoteNode, HeadingNode, } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
@@ -12,7 +12,8 @@ import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIc
 import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
 import { useTheme } from "@emotion/react";
 import { css } from "@emotion/css";
-import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, } from "../../nodes";
+import { $unwrapNode } from "@lexical/utils";
+import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 import { $isSheetInputNode } from "../../nodes/SheetInputNode";
 import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
@@ -163,6 +164,60 @@ function getListContextMenuOptions(editor, theme, node) {
         }),
     ];
 }
+function convertToggleTitleToHeading(container, tag) {
+    const titleNode = container.getFirstChild();
+    if (!$isToggleTitleNode(titleNode)) {
+        return;
+    }
+    const contentNode = titleNode.getNextSibling();
+    if (!$isToggleContentNode(contentNode)) {
+        return;
+    }
+    const headingNode = $createHeadingNode(tag);
+    const nodesForHeading = titleNode
+        .getChildren()
+        .flatMap((child) => $isElementNode(child) ? child.getChildren() : [child]);
+    if (nodesForHeading.length > 0) {
+        headingNode.append(...nodesForHeading);
+    }
+    if (headingNode.getChildrenSize() === 0) {
+        headingNode.append($createTextNode(""));
+    }
+    titleNode.replace(headingNode);
+    $unwrapNode(contentNode);
+    $unwrapNode(container);
+    headingNode.selectStart();
+}
+function getToggleContextMenuOptions(editor, container) {
+    return [
+        ...[1, 2, 3].map((n) => {
+            const titleMap = {
+                1: i18n.t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                2: i18n.t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                3: i18n.t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
+            };
+            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(() => {
+                    convertToggleTitleToHeading(container, `h${n}`);
+                }),
+            });
+        }),
+        new ComponentPickerOption(i18n.t("블록 삭제"), {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                container.remove();
+            },
+        }),
+    ];
+}
 function getProblemInputContextMenuOptions(node) {
     return [
         new ComponentPickerOption(i18n.t("블록 삭제"), {
@@ -244,8 +299,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption(i18n.t("회색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.marbleOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.marbleContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.marbleContainer};
       `,
             keywords: ["grey", "gray"],
             onSelect: () => {
@@ -256,8 +311,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption(i18n.t("빨간색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.redOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.redContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.redContainer};
       `,
             keywords: ["red"],
             onSelect: () => {
@@ -268,8 +323,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption(i18n.t("노란색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.yellowOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.yellowContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.yellowContainer};
       `,
             keywords: ["yellow"],
             onSelect: () => {
@@ -280,8 +335,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption(i18n.t("파란색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.blueOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.blueContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.blueContainer};
       `,
             keywords: ["blue"],
             onSelect: () => {
@@ -292,8 +347,8 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
         new ComponentPickerOption(i18n.t("초록색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.greenOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.greenContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.greenContainer};
       `,
             keywords: ["green"],
             onSelect: () => {
@@ -360,6 +415,16 @@ export function useContextMenuOptions(props) {
         else if (node instanceof ListNode || node instanceof ListItemNode) {
             return getListContextMenuOptions(editor, theme, node);
         }
+        else if ($isToggleContainerNode(node)) {
+            return getToggleContextMenuOptions(editor, node);
+        }
+        else if ($isToggleTitleNode(node) || $isToggleContentNode(node)) {
+            const parent = node.getParent();
+            if (parent && $isToggleContainerNode(parent)) {
+                return getToggleContextMenuOptions(editor, parent);
+            }
+            return [];
+        }
         else if ($isColoredQuoteNode(node)) {
             return getColoredQuoteContextMenuOptions(editor, theme, node);
         }

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

@@ -15,7 +15,7 @@ import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch,
 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 { $createParagraphNode, $findMatchingParent, $getSelection, $isRangeSelection, } from "lexical";
 import { useCallback, useMemo, useState } from "react";
 import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
@@ -39,6 +39,7 @@ import { i18n } from "../../../../i18n/i18n";
 import { useTranslation } from "react-i18next";
 import { getTexts } from "../../../../texts";
 import { INSERT_TOGGLE_COMMAND } from "../TogglePlugin";
+import { $isToggleTitleNode } from "../../nodes";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -60,6 +61,16 @@ export class ComponentPickerOption extends MenuOption {
         this.onSelect = options.onSelect.bind(this);
     }
 }
+function isSelectionInsideToggleTitle(editor) {
+    return editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection)) {
+            return false;
+        }
+        const titleNode = $findMatchingParent(selection.anchor.getNode(), (node) => $isToggleTitleNode(node));
+        return Boolean(titleNode);
+    });
+}
 function getDynamicOptions(editor, queryString) {
     const options = [];
     // Lexical 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
@@ -198,6 +209,44 @@ function getQuizContextOptions(editor, theme) {
           ` }))),
     ];
 }
+function getToggleTitleOptions(props) {
+    const { editor } = props;
+    return [
+        new ComponentPickerOption(i18n.t("본문", { context: "렉시컬 드롭다운 메뉴" }), {
+            icon: _jsx(TextIcon, {}),
+            // eslint-disable-next-line i18next/no-literal-string
+            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: i18n.t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                2: i18n.t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                3: i18n.t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
+            };
+            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}`));
+                    }
+                }),
+            });
+        }),
+    ];
+}
 export function getBaseOptions(props) {
     const { editor, theme, setImageOpen, setVideoOpen, setFileOpen, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
     const baseOptions = [
@@ -329,23 +378,30 @@ export function ComponentPickerMenuPlugin(props) {
     const [editor] = useLexicalComposerContext();
     const theme = useTheme();
     const [queryString, setQueryString] = useState(null);
+    const [isInsideToggleTitle, setIsInsideToggleTitle] = useState(() => isSelectionInsideToggleTitle(editor));
     const [imageOpen, setImageOpen] = useState(false);
     const [videoOpen, setVideoOpen] = useState(false);
     const [fileOpen, setFileOpen] = useState(false);
     const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
         minLength: 0,
     });
+    const handleQueryChange = useCallback((nextQuery) => {
+        setQueryString(nextQuery);
+        setIsInsideToggleTitle(() => isSelectionInsideToggleTitle(editor));
+    }, [editor]);
     const options = useMemo(() => {
-        const baseOptions = getBaseOptions({
-            editor,
-            theme,
-            setImageOpen,
-            setVideoOpen,
-            isSheetEnabled,
-            isQuizEnabled,
-            setFileOpen,
-            showFileUpload,
-        });
+        const baseOptions = isInsideToggleTitle
+            ? getToggleTitleOptions({ editor })
+            : getBaseOptions({
+                editor,
+                theme,
+                setImageOpen,
+                setVideoOpen,
+                isSheetEnabled,
+                isQuizEnabled,
+                setFileOpen,
+                showFileUpload,
+            });
         if (!queryString) {
             return baseOptions;
         }
@@ -357,7 +413,7 @@ export function ComponentPickerMenuPlugin(props) {
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [editor, queryString]);
+    }, [editor, queryString, isInsideToggleTitle]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
         if (selectedOption instanceof ComponentDrawerOption) {
             return;
@@ -378,7 +434,7 @@ export function ComponentPickerMenuPlugin(props) {
                     editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
                 }, onClose: () => setVideoOpen(false), shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
                     editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
-                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
+                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: handleQueryChange, onSelectOption: onSelectOption, triggerFn: checkForTriggerMatch, options: options, anchorClassName: cssToClassName `
           z-index: ${ZINDEX.DIALOG + 1};
         `, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && options.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: options, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)

package/dist/patterns/LexicalEditor/theme.js

@@ -296,9 +296,10 @@ export function getTheme(theme, editable) {
     `,
         toggle: {
             container: css `
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
+        margin: 16px 0;
+        &[open] > summary {
+          margin-bottom: 4px;
+        }
       `,
             title: css `
         display: flex;
@@ -308,6 +309,7 @@ export function getTheme(theme, editable) {
         & > :last-child {
           flex: 1;
           min-width: 0;
+          margin: 0;
         }
       `,
             iconBtn: css `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.119.0",
+  "version": "1.119.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,