@team-monolith/cds 1.119.4 → 1.120.0

package/dist/components/Slider.d.ts

@@ -0,0 +1,21 @@
+import { SliderProps as MuiSliderProps } from "@mui/material";
+import React from "react";
+export interface SliderProps extends Omit<MuiSliderProps, "onChangeCommitted"> {
+    className?: string;
+    /** 슬라이더의 최소값 (기본값: 0) */
+    min?: number;
+    /** 슬라이더의 최대값 (기본값: 100) */
+    max?: number;
+    /** 슬라이더의 기본값 (없는 경우 최소값을 사용) */
+    defaultValue?: number;
+    /** 슬라이더 하단의 마크 배열 */
+    marks?: {
+        value: number;
+        label: React.ReactNode;
+    }[];
+    /** 슬라이더 값 변경이 완료되었을 때 호출되는 콜백 */
+    onChangeCommitted?: (value: number) => void;
+    /** 값 레이블에 단위를 렌더링하는 함수 */
+    renderUnit?: (count: number) => string;
+}
+export declare const Slider: React.ForwardRefExoticComponent<Omit<SliderProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Slider.js

@@ -0,0 +1,93 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { Slider as MuiSlider, } from "@mui/material";
+import React from "react";
+import { shadows } from "../foundation/shadows";
+export const Slider = React.forwardRef(function Slider(props, ref) {
+    var _a, _b;
+    const { onChangeCommitted, renderUnit } = props, others = __rest(props, ["onChangeCommitted", "renderUnit"]);
+    return (_jsx(Wrapper, { children: _jsx(StyledSlider, Object.assign({ ref: ref }, others, { valueLabelDisplay: "on", valueLabelFormat: (value) => { var _a; return (_a = renderUnit === null || renderUnit === void 0 ? void 0 : renderUnit(value)) !== null && _a !== void 0 ? _a : value; }, onChangeCommitted: (_e, value) => {
+                // AIDEV-NOTE:
+                // MUI Slider onChangeCommitted 콜백의 value는 number | number[] 타입이지만
+                // 해당 컴포넌트는 항상 단일 슬라이더이므로 number 타입만 처리함
+                if (Array.isArray(value))
+                    return;
+                onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(value);
+            }, marksLength: (_b = (_a = props.marks) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0 })) }));
+});
+const Wrapper = styled.div `
+  padding: 0 21px; // thumb 크기(42px)의 절반만큼 좌우 여백 추가
+`;
+const StyledSlider = styled(MuiSlider, {
+    shouldForwardProp: (prop) => prop !== "marksLength",
+})(({ theme, marksLength }) => css `
+    // figma 디자인과 간격 맞추기 위해 조정
+    padding: 7px 0;
+    margin-top: 24px;
+    &.MuiSlider-marked {
+      margin-bottom: 20px;
+    }
+
+    .MuiSlider-rail {
+      border-radius: 100px;
+      background: ${theme.color.foreground.neutralBaseDisabled};
+    }
+    .MuiSlider-track {
+      border-radius: 100px;
+      background: ${theme.color.foreground.primary};
+    }
+    .MuiSlider-thumb {
+      width: 42px;
+      height: 18px;
+      border-radius: 23px;
+      border: 2px solid ${theme.color.foreground.neutralBaseDisabled};
+      background: #fff;
+      /* Shadow-4 */
+      box-shadow: ${shadows.shadow04};
+
+      .MuiSlider-valueLabel {
+        background: transparent;
+        padding: 0;
+        color: ${theme.color.foreground.neutralBase};
+        /* Default/Label/16px-Eb */
+        font-family: Pretendard;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 800;
+        line-height: 20px; /* 125% */
+        top: -6px; // figma 디자인과 간격 맞추기 위해 조정
+      }
+    }
+    .MuiSlider-mark {
+      display: none;
+    }
+    .MuiSlider-markLabel {
+      color: ${theme.color.foreground.neutralBaseDisabled};
+      /* Default/Label/12px-Md */
+      font-family: ${theme.fontFamily.ui};
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 16px; /* 133.333% */
+      top: 22px; // figma 디자인과 간격 맞추기 위해 조정
+
+      &[data-index="0"] {
+        transform: translateX(0%);
+      }
+      &[data-index="${marksLength - 1}"] {
+        transform: translateX(-100%);
+      }
+    }
+  `);

package/dist/index.d.ts

@@ -20,6 +20,7 @@ export * from "./components/SwitchButton";
 export * from "./components/Tag";
 export * from "./components/Tooltip";
 export * from "./components/OverflowTooltip";
+export * from "./components/Slider";
 export * from "./foundation/color";
 export * from "./foundation/shadows";
 export * from "./foundation/breakpoints";

package/dist/index.js

@@ -20,6 +20,7 @@ export * from "./components/SwitchButton";
 export * from "./components/Tag";
 export * from "./components/Tooltip";
 export * from "./components/OverflowTooltip";
+export * from "./components/Slider";
 export * from "./foundation/color";
 export * from "./foundation/shadows";
 export * from "./foundation/breakpoints";

package/dist/patterns/LexicalEditor/Plugins.js

@@ -38,7 +38,6 @@ import { FilePlugin } from "./plugins/FilePlugin";
 import { DragDropPastePlugin } from "./plugins/DragDropPastePlugin";
 import { ParagraphPlaceholderPlugin } from "./plugins/ParagraphPlaceholderPlugin";
 import { AutoLinkPlugin } from "./plugins/AutoLinkPlugin";
-import { TogglePlugin } from "./plugins/TogglePlugin";
 import { useTranslation } from "react-i18next";
 export function Plugins(props) {
     const { className, contentEditableClassName, onChange, isSheetEnabled, isQuizEnabled, showFileUpload, autoFocus, } = props;
@@ -55,7 +54,7 @@ export function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), autoFocus && _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: t("명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(VideosPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(TogglePlugin, {})] }));
+                ignoreSelectionChange: true }), autoFocus && _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(MarkdownShortcutPlugin, { transformers: CUSTOM_TRANSFORMERS }), _jsx(HistoryPlugin, {}), _jsx(ParagraphPlaceholderPlugin, { placeholder: t("명령어 사용 시에는 '/'를 누르세요. 블록에 마우스를 올려 나타나는 '+'를 클릭하면 아래에 블록을 추가할 수 있습니다.") })] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isSheetEnabled: isSheetEnabled, isQuizEnabled: isQuizEnabled, showFileUpload: showFileUpload }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(ClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(VideosPlugin, {}), _jsx(FilePlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {}), _jsx(SheetSelectPlugin, {}), _jsx(SheetInputPlugin, {}), _jsx(SelfEvaluationPlugin, {}), _jsx(AutoLinkPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -10,6 +10,3 @@ export * from "./SheetSelectNode";
 export * from "./LayoutContainerNode";
 export * from "./LayoutItemNode";
 export * from "./nodes";
-export * from "./toggleNodes/ToggleContainerNode";
-export * from "./toggleNodes/ToggleTitleNode";
-export * from "./toggleNodes/ToggleContentNode";

package/dist/patterns/LexicalEditor/nodes/index.js

@@ -10,6 +10,3 @@ export * from "./SheetSelectNode";
 export * from "./LayoutContainerNode";
 export * from "./LayoutItemNode";
 export * from "./nodes";
-export * from "./toggleNodes/ToggleContainerNode";
-export * from "./toggleNodes/ToggleTitleNode";
-export * from "./toggleNodes/ToggleContentNode";

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

@@ -3,21 +3,19 @@ import { ColoredQuoteNode } from "./ColoredQuoteNode";
 import { ImageNode } from "./ImageNode";
 import { VideoNode } from "./VideoNode";
 import { LayoutContainerNode } from "./LayoutContainerNode";
+import { LayoutItemNode } from "./LayoutItemNode";
 import { ProblemInputNode } from "./ProblemInputNode";
 import { ProblemSelectNode } from "./ProblemSelectNode";
 import { SelfEvaluationNode } from "./SelfEvaluationNode";
 import { SheetInputNode } from "./SheetInputNode";
 import { SheetSelectNode } from "./SheetSelectNode";
-import { ToggleContainerNode } from "./toggleNodes/ToggleContainerNode";
-import { ToggleTitleNode } from "./toggleNodes/ToggleTitleNode";
-import { ToggleContentNode } from "./toggleNodes/ToggleContentNode";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 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 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 | {
+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 LayoutItemNode | 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/nodes.js

@@ -9,9 +9,6 @@ import { ProblemSelectNode } from "./ProblemSelectNode";
 import { SelfEvaluationNode } from "./SelfEvaluationNode";
 import { SheetInputNode } from "./SheetInputNode";
 import { SheetSelectNode } from "./SheetSelectNode";
-import { ToggleContainerNode } from "./toggleNodes/ToggleContainerNode";
-import { ToggleTitleNode } from "./toggleNodes/ToggleTitleNode";
-import { ToggleContentNode } from "./toggleNodes/ToggleContentNode";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import { ListItemNode, ListNode } from "@lexical/list";
@@ -42,9 +39,6 @@ export const nodes = [
     SheetSelectNode,
     SheetInputNode,
     SelfEvaluationNode,
-    ToggleContainerNode,
-    ToggleTitleNode,
-    ToggleContentNode,
     {
         replace: QuoteNode,
         with: () => new ColoredQuoteNode("grey"),

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

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Context Menu (:: 버튼)
  */
-import { $createParagraphNode, $createTextNode, $isElementNode, ParagraphNode, } from "lexical";
+import { $createParagraphNode, ParagraphNode, } from "lexical";
 import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
 import { $createHeadingNode, $createQuoteNode, HeadingNode, } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
@@ -12,8 +12,7 @@ import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIc
 import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
 import { useTheme } from "@emotion/react";
 import { css } from "@emotion/css";
-import { $unwrapNode } from "@lexical/utils";
-import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, $isToggleContainerNode, $isToggleTitleNode, $isToggleContentNode, } from "../../nodes";
+import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 import { $isSheetInputNode } from "../../nodes/SheetInputNode";
 import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
@@ -164,66 +163,6 @@ function getListContextMenuOptions(editor, theme, node, t) {
         }),
     ];
 }
-/**
- * 토글 노드를 헤딩 노드로 변환하는 함수
- * - 토글 컨테이너의 제목을 지정된 Heading 노드로 변환하고 (제목이 빈 경우 빈 텍스트 노드를 추가)
- * - 본문과 컨테이너를 언랩하여 계층을 평탄화한다.
- */
-function convertToggleTitleToHeading(container, tag) {
-    const children = container.getChildren();
-    const titleNode = children.find($isToggleTitleNode);
-    if (!titleNode) {
-        return;
-    }
-    const contentNode = children.find($isToggleContentNode);
-    if (!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, t) {
-    return [
-        ...[1, 2, 3].map((n) => {
-            const titleMap = {
-                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: 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(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                container.remove();
-            },
-        }),
-    ];
-}
 function getProblemInputContextMenuOptions(node, t) {
     return [
         new ComponentPickerOption(t("블록 삭제"), {
@@ -422,9 +361,6 @@ export function useContextMenuOptions(props) {
         else if (node instanceof ListNode || node instanceof ListItemNode) {
             return getListContextMenuOptions(editor, theme, node, t);
         }
-        else if ($isToggleContainerNode(node)) {
-            return getToggleContextMenuOptions(editor, node, t);
-        }
         else if ($isColoredQuoteNode(node)) {
             return getColoredQuoteContextMenuOptions(editor, theme, node, t);
         }

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

@@ -15,12 +15,12 @@ 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, $findMatchingParent, $getSelection, $isRangeSelection, } from "lexical";
+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 { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, VideoLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, File3LineIcon, PlayList2FillIcon, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, VideoLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, File3LineIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
@@ -37,8 +37,6 @@ import { UploadFileDialog } from "../../components/UploadFileDialog";
 import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
 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,16 +58,6 @@ 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 원본 코드를 가져왔기 때문에 코드 변경을 최소화하기위함
@@ -250,11 +238,6 @@ export function getBaseOptions(props) {
             keywords: ["numbered list", "ordered list", "ol"],
             onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
         }),
-        new ComponentPickerOption(t("토글 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(PlayList2FillIcon, {}),
-            keywords: ["toggle", "collapsible"],
-            onSelect: () => editor.dispatchCommand(INSERT_TOGGLE_COMMAND, undefined),
-        }),
         new ComponentPickerOption(t("인용 블록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(DoubleQuotesLIcon, {}),
             keywords: ["block quote"],
@@ -338,13 +321,9 @@ export function ComponentPickerMenuPlugin(props) {
     const [imageOpen, setImageOpen] = useState(false);
     const [videoOpen, setVideoOpen] = useState(false);
     const [fileOpen, setFileOpen] = useState(false);
-    const baseTrigger = useBasicTypeaheadTriggerMatch("/", { minLength: 0 });
-    const triggerFn = useCallback((text, editor) => {
-        if (isSelectionInsideToggleTitle(editor)) {
-            return null; // 메뉴를 열지 않음 → "/" 명령 무시
-        }
-        return baseTrigger(text, editor);
-    }, [baseTrigger]);
+    const checkForTriggerMatch = useBasicTypeaheadTriggerMatch("/", {
+        minLength: 0,
+    });
     const options = useMemo(() => {
         const baseOptions = getBaseOptions({
             editor,
@@ -389,7 +368,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: triggerFn, options: options, anchorClassName: cssToClassName `
+                } }), _jsx(LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, 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/plugins/ParagraphPlaceholderPlugin/index.js

@@ -3,15 +3,13 @@ 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;
-    content: attr(data-placeholder);
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    pointer-events: none;
-  }
+const getPlaceholderClassName = (theme) => cssToClassName `
+  &::before {
+    position: absolute;
+    content: attr(data-placeholder);
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    pointer-events: none;
+  }
 `;
 export const ParagraphPlaceholderPlugin = ({ placeholder, }) => {
     const [editor] = useLexicalComposerContext();
@@ -19,7 +17,6 @@ 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를 제거합니다.
@@ -39,16 +36,10 @@ 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", placeholderText);
+                    paragraphRef.current.setAttribute("data-placeholder", placeholder);
                     paragraphRef.current.classList.add(placeholderClassName);
                 }
             });

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

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

package/dist/patterns/LexicalEditor/theme.js

@@ -1,5 +1,4 @@
 import { css } from "@emotion/css";
-import { arrowDownSFillSvg, arrowRightSFillSvg } from "../../icons";
 export function getTheme(theme, editable) {
     return {
         paragraph: css `
@@ -294,42 +293,5 @@ export function getTheme(theme, editable) {
       gap: 4px;
       margin-bottom: 8px;
     `,
-        toggle: {
-            container: css `
-        margin: 16px 0;
-        &[open] > summary {
-          margin-bottom: 4px;
-        }
-      `,
-            title: css `
-        display: flex;
-        align-items: center;
-        gap: 4px;
-
-        & > :last-child {
-          flex: 1;
-          min-width: 0;
-          margin: 0;
-        }
-      `,
-            iconBtn: css `
-        width: 24px;
-        height: 24px;
-        border: 0;
-        padding: 0;
-        background-color: transparent;
-        cursor: pointer;
-
-        &[aria-expanded="false"] {
-          background-image: url(${arrowRightSFillSvg});
-        }
-        &[aria-expanded="true"] {
-          background-image: url(${arrowDownSFillSvg});
-        }
-      `,
-            content: css `
-        padding-left: 28px;
-      `,
-        },
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.119.4",
+  "version": "1.120.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -8,7 +8,7 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
-    "@lexical/react": "^0.36.1",
+    "@lexical/react": "^0.32.1",
     "@mui/material": "^5.13.6",
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
@@ -18,7 +18,7 @@
     "i18next": "^25.5.2",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-locize-backend": "^7.0.4",
-    "lexical": "^0.36.1",
+    "lexical": "^0.32.1",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
     "react": "^18.2.0",

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

@@ -1,32 +0,0 @@
-/**
- * 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 { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, NodeKey, RangeSelection, SerializedElementNode, Spread } from "lexical";
-type SerializedToggleContainerNode = Spread<{
-    open: boolean;
-}, SerializedElementNode>;
-export declare function $convertToggleContainerElement(domNode: HTMLDetailsElement): DOMConversionOutput | null;
-export declare class ToggleContainerNode extends ElementNode {
-    __open: boolean;
-    constructor(open: boolean, key?: NodeKey);
-    static getType(): string;
-    static clone(node: ToggleContainerNode): ToggleContainerNode;
-    isShadowRoot(): boolean;
-    collapseAtStart(_selection: RangeSelection): boolean;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(prevNode: this, dom: HTMLDivElement): boolean;
-    static importDOM(): DOMConversionMap<HTMLDetailsElement> | null;
-    static importJSON(serializedNode: SerializedToggleContainerNode): ToggleContainerNode;
-    exportDOM(editor: LexicalEditor): DOMExportOutput;
-    exportJSON(): SerializedToggleContainerNode;
-    setOpen(open: boolean): void;
-    getOpen(): boolean;
-    toggleOpen(): void;
-}
-export declare function $createToggleContainerNode(isOpen: boolean): ToggleContainerNode;
-export declare function $isToggleContainerNode(node: LexicalNode | null | undefined): node is ToggleContainerNode;
-export {};

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

@@ -1,131 +0,0 @@
-/**
- * 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/CollapsibleContainerNode.ts
-// details, summary 구조의 타이틀(summary) 클릭 시 토글 기능의 방지를 위해
-// CHROME 브라우저를 포함한 모든 브라우저에서 div 요소로 그려지도록 수정했습니다.
-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;
-    const node = $createToggleContainerNode(isOpen);
-    return {
-        node,
-    };
-}
-export class ToggleContainerNode extends ElementNode {
-    constructor(open, key) {
-        super(key);
-        this.__open = open;
-    }
-    static getType() {
-        return "toggle-container";
-    }
-    static clone(node) {
-        return new ToggleContainerNode(node.__open, node.__key);
-    }
-    isShadowRoot() {
-        return true;
-    }
-    collapseAtStart(_selection) {
-        // Unwrap the ToggleContainerNode by replacing it with the children
-        // of its children (ToggleTitleNode, ToggleContentNode)
-        const nodesToInsert = [];
-        for (const child of this.getChildren()) {
-            if ($isElementNode(child)) {
-                nodesToInsert.push(...child.getChildren());
-            }
-        }
-        const caret = $rewindSiblingCaret($getSiblingCaret(this, "previous"));
-        caret.splice(1, nodesToInsert);
-        // Merge the first child of the ToggleTitleNode with the
-        // previous sibling of the ToggleContainerNode
-        if (nodesToInsert.length === 0)
-            return true;
-        const firstChild = nodesToInsert[0];
-        firstChild.selectStart().deleteCharacter(true);
-        return true;
-    }
-    // IS_CHROME 분기 제거
-    createDOM(config) {
-        const dom = document.createElement("div");
-        if (this.__open) {
-            dom.setAttribute("open", "");
-        }
-        addClassNamesToElement(dom, config.theme.toggle.container);
-        return dom;
-    }
-    // IS_CHROME 분기 제거
-    updateDOM(prevNode, dom) {
-        const currentOpen = this.__open;
-        if (prevNode.__open !== currentOpen) {
-            const contentDom = dom.children[1];
-            if (!isHTMLElement(contentDom)) {
-                throw new Error("Expected contentDom to be an HTMLElement");
-            }
-            if (currentOpen) {
-                dom.setAttribute("open", "");
-                contentDom.hidden = false;
-            }
-            else {
-                dom.removeAttribute("open");
-                setDomHiddenUntilFound(contentDom);
-            }
-            // 토글 버튼 클릭 또는 타이틀 영역의 엔터 키 입력으로 토글되는 경우
-            // ToggleTitleNode의 아이콘 버튼의 aria-expanded 속성 업데이트
-            const titleDom = dom.children[0];
-            if (!isHTMLElement(titleDom)) {
-                throw new Error("Expected titleDom to be an HTMLElement");
-            }
-            const iconButton = titleDom.querySelector(`[${DATA_LEXICAL_TOGGLE_ICON_BUTTON}]`);
-            if (iconButton) {
-                iconButton.setAttribute("aria-expanded", currentOpen.toString());
-            }
-        }
-        return false;
-    }
-    static importDOM() {
-        return {
-            details: (_domNode) => ({
-                conversion: $convertToggleContainerElement,
-                priority: 1,
-            }),
-        };
-    }
-    static importJSON(serializedNode) {
-        return $createToggleContainerNode(serializedNode.open).updateFromJSON(serializedNode);
-    }
-    // className 적용을 위한 editor 파라미터 추가
-    exportDOM(editor) {
-        const element = document.createElement("details");
-        addClassNamesToElement(element, editor._config.theme.toggle.container);
-        element.setAttribute("open", this.__open.toString());
-        return { element };
-    }
-    exportJSON() {
-        return Object.assign(Object.assign({}, super.exportJSON()), { open: this.__open });
-    }
-    setOpen(open) {
-        const writable = this.getWritable();
-        writable.__open = open;
-    }
-    getOpen() {
-        return this.getLatest().__open;
-    }
-    toggleOpen() {
-        this.setOpen(!this.getOpen());
-    }
-}
-export function $createToggleContainerNode(isOpen) {
-    return new ToggleContainerNode(isOpen);
-}
-export function $isToggleContainerNode(node) {
-    return node instanceof ToggleContainerNode;
-}

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

@@ -1,23 +0,0 @@
-/**
- * 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 { DOMConversionMap, DOMConversionOutput, DOMExportOutput, EditorConfig, ElementNode, LexicalEditor, LexicalNode, SerializedElementNode } from "lexical";
-type SerializedToggleContentNode = SerializedElementNode;
-export declare function $convertToggleContentElement(_domNode: HTMLElement): DOMConversionOutput | null;
-export declare class ToggleContentNode extends ElementNode {
-    static getType(): string;
-    static clone(node: ToggleContentNode): ToggleContentNode;
-    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
-    updateDOM(_prevNode: this, _dom: HTMLElement): boolean;
-    static importDOM(): DOMConversionMap | null;
-    exportDOM(editor: LexicalEditor): DOMExportOutput;
-    static importJSON(serializedNode: SerializedToggleContentNode): ToggleContentNode;
-    isShadowRoot(): boolean;
-}
-export declare function $createToggleContentNode(): ToggleContentNode;
-export declare function $isToggleContentNode(node: LexicalNode | null | undefined): node is ToggleContentNode;
-export {};

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

@@ -1,88 +0,0 @@
-/**
- * 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/CollapsibleContentNode.ts
-import { addClassNamesToElement } from "@lexical/utils";
-import { ElementNode, } from "lexical";
-import { $isToggleContainerNode } from "./ToggleContainerNode";
-import { domOnBeforeMatch, setDomHiddenUntilFound, } from "../../utils/toggleUtils";
-const DATA_LEXICAL_TOGGLE_CONTENT = "data-lexical-toggle-content";
-export function $convertToggleContentElement(_domNode) {
-    const node = $createToggleContentNode();
-    return {
-        node,
-    };
-}
-export class ToggleContentNode extends ElementNode {
-    static getType() {
-        return "toggle-content";
-    }
-    static clone(node) {
-        return new ToggleContentNode(node.__key);
-    }
-    // IS_CHROME 분기 제거
-    createDOM(config, editor) {
-        const dom = document.createElement("div");
-        addClassNamesToElement(dom, config.theme.toggle.content);
-        editor.getEditorState().read(() => {
-            const containerNode = this.getParentOrThrow();
-            if (!$isToggleContainerNode(containerNode)) {
-                throw new Error("Expected parent node to be a ToggleContainerNode");
-            }
-            if (!containerNode.__open) {
-                setDomHiddenUntilFound(dom);
-            }
-        });
-        domOnBeforeMatch(dom, () => {
-            editor.update(() => {
-                const containerNode = this.getParentOrThrow().getLatest();
-                if (!$isToggleContainerNode(containerNode)) {
-                    throw new Error("Expected parent node to be a ToggleContainerNode");
-                }
-                if (!containerNode.__open) {
-                    containerNode.toggleOpen();
-                }
-            });
-        });
-        return dom;
-    }
-    updateDOM(_prevNode, _dom) {
-        return false;
-    }
-    static importDOM() {
-        return {
-            div: (domNode) => {
-                if (!domNode.hasAttribute(DATA_LEXICAL_TOGGLE_CONTENT)) {
-                    return null;
-                }
-                return {
-                    conversion: $convertToggleContentElement,
-                    priority: 2,
-                };
-            },
-        };
-    }
-    // className 적용을 위한 editor 파라미터 추가
-    exportDOM(editor) {
-        const element = document.createElement("div");
-        addClassNamesToElement(element, editor._config.theme.toggle.content);
-        element.setAttribute(DATA_LEXICAL_TOGGLE_CONTENT, "true");
-        return { element };
-    }
-    static importJSON(serializedNode) {
-        return $createToggleContentNode().updateFromJSON(serializedNode);
-    }
-    isShadowRoot() {
-        return true;
-    }
-}
-export function $createToggleContentNode() {
-    return new ToggleContentNode();
-}
-export function $isToggleContentNode(node) {
-    return node instanceof ToggleContentNode;
-}

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

@@ -1,24 +0,0 @@
-/**
- * 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 { 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 {
-    /** @internal */
-    $config(): import("lexical").StaticNodeConfigRecord<"toggle-title", {
-        $transform(node: ToggleTitleNode): void;
-        extends: typeof ElementNode;
-        importDOM: import("lexical").DOMConversionMap<HTMLElement>;
-    }>;
-    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
-    updateDOM(_prevNode: this, _dom: HTMLElement): boolean;
-    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): ElementNode;
-}
-export declare function $createToggleTitleNode(): ToggleTitleNode;
-export declare function $isToggleTitleNode(node: LexicalNode | null | undefined): node is ToggleTitleNode;

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

@@ -1,105 +0,0 @@
-/**
- * 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/CollapsibleTitleNode.ts
-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 {
-        node,
-    };
-}
-/** @noInheritDoc */
-export class ToggleTitleNode extends ElementNode {
-    /** @internal */
-    $config() {
-        return this.config("toggle-title", {
-            $transform(node) {
-                if (node.isEmpty()) {
-                    node.remove();
-                }
-            },
-            extends: ElementNode,
-            importDOM: buildImportMap({
-                summary: () => ({
-                    conversion: $convertToggleTitleElement,
-                    priority: 1,
-                }),
-            }),
-        });
-    }
-    // IS_CHROME 분기를 제거하여 모든 브라우저에서 클릭 시 토글 이벤트를 수동으로 처리
-    createDOM(config, editor) {
-        const dom = document.createElement("summary");
-        addClassNamesToElement(dom, config.theme.toggle.title);
-        // 토글 동작을 아이콘 버튼에만 적용하도록 iconBtn 요소를 추가
-        const iconBtn = document.createElement("div");
-        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)) {
-                iconBtn.setAttribute("aria-expanded", containerNode.getOpen().toString());
-            }
-            else {
-                iconBtn.setAttribute("aria-expanded", "false");
-            }
-        });
-        iconBtn.addEventListener("click", () => {
-            editor.update(() => {
-                const toggleContainer = this.getLatest().getParentOrThrow();
-                if (!$isToggleContainerNode(toggleContainer)) {
-                    throw new Error("Expected parent node to be a ToggleContainerNode");
-                }
-                toggleContainer.toggleOpen();
-            });
-        });
-        dom.appendChild(iconBtn);
-        return dom;
-    }
-    updateDOM(_prevNode, _dom) {
-        return false;
-    }
-    insertNewAfter(_, restoreSelection = true) {
-        const containerNode = this.getParentOrThrow();
-        if (!$isToggleContainerNode(containerNode)) {
-            throw new Error("ToggleTitleNode expects to be child of ToggleContainerNode");
-        }
-        if (containerNode.getOpen()) {
-            const contentNode = this.getNextSibling();
-            if (!$isToggleContentNode(contentNode)) {
-                throw new Error("ToggleTitleNode expects to have ToggleContentNode sibling");
-            }
-            const firstChild = contentNode.getFirstChild();
-            if ($isElementNode(firstChild)) {
-                return firstChild;
-            }
-            else {
-                const paragraph = $createParagraphNode();
-                contentNode.append(paragraph);
-                return paragraph;
-            }
-        }
-        else {
-            const paragraph = $createParagraphNode();
-            containerNode.insertAfter(paragraph, restoreSelection);
-            return paragraph;
-        }
-    }
-}
-export function $createToggleTitleNode() {
-    return new ToggleTitleNode();
-}
-export function $isToggleTitleNode(node) {
-    return node instanceof ToggleTitleNode;
-}

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

@@ -1,9 +0,0 @@
-/**
- * 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

@@ -1,198 +0,0 @@
-/**
- * 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/utils/toggleUtils.d.ts

@@ -1,9 +0,0 @@
-/**
- * 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 function setDomHiddenUntilFound(dom: HTMLElement): void;
-export declare function domOnBeforeMatch(dom: HTMLElement, callback: () => void): void;

package/dist/patterns/LexicalEditor/utils/toggleUtils.js

@@ -1,18 +0,0 @@
-/**
- * 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/CollapsibleUtils.ts
-export function setDomHiddenUntilFound(dom) {
-    // @ts-expect-error 'hidden' 속성은 boolean으로만 정의되어 있지만,
-    // Chromium 계열 브라우저에서는 실험적으로 'until-found' 문자열 값도 지원한다.
-    dom.hidden = "until-found";
-}
-export function domOnBeforeMatch(dom, callback) {
-    if ("onbeforematch" in dom) {
-        dom.onbeforematch = callback;
-    }
-}