@team-monolith/cds 1.119.1 → 1.119.2

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

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

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

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

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

@@ -0,0 +1,105 @@
+/**
+ * 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/ComponentAdderPlugin/ComponentAdder.js

@@ -9,59 +9,59 @@ export const ComponentAdder = forwardRef(function ComponentAdder(props, ref) {
     const [editor] = useLexicalComposerContext();
     return (_jsxs(Container, { ref: ref, className: className, children: [_jsx(PlusContainer, { onClick: onPlusClick, children: editor._editable && _jsx(PlusIcon, {}) }), _jsx(MenuContainer, { draggable: true, onClick: onMenuClick, onDragStart: onMenuDragStart, onDragEnd: onMenuDragEnd, children: editor._editable && _jsx(MenuIcon, {}) })] }));
 });
-const Container = styled.div `
-  display: flex;
-  align-items: flex-start;
-  gap: 3px;
-
-  position: absolute;
-  left: 0;
-  top: 0;
-  will-change: transform;
+const Container = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 3px;
+
+  position: absolute;
+  left: 0;
+  top: 0;
+  will-change: transform;
 `;
-const PlusContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-
-  cursor: pointer;
-
-  &:hover {
-    background-color: #eff2f5;
-  }
+const PlusContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: #eff2f5;
+  }
 `;
-const PlusIcon = styled.div `
-  width: 24px;
-  height: 24px;
-  // svg는 hover 이벤트를 path마다 받아서 불편함
-  // Lexical에서 동일한 접근법을 사용하고 있음
-  background-image: url(${plus});
+const PlusIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  // svg는 hover 이벤트를 path마다 받아서 불편함
+  // Lexical에서 동일한 접근법을 사용하고 있음
+  background-image: url(${plus});
 `;
-const MenuContainer = styled.div `
-  display: flex;
-  width: 26px;
-  height: 26px;
-  justify-content: center;
-  align-items: center;
-  border-radius: 5px;
-  background: ${({ theme }) => theme.color.foreground.neutralAlt};
-
-  cursor: grab;
-
-  &:active {
-    cursor: grabbing;
-  }
-
-  &:hover {
-    background-color: #eff2f5;
-  }
+const MenuContainer = styled.div `
+  display: flex;
+  width: 26px;
+  height: 26px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+  background: ${({ theme }) => theme.color.foreground.neutralAlt};
+
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:hover {
+    background-color: #eff2f5;
+  }
 `;
-const MenuIcon = styled.div `
-  width: 24px;
-  height: 24px;
-  background-image: url(${menu});
+const MenuIcon = styled.div `
+  width: 24px;
+  height: 24px;
+  background-image: url(${menu});
 `;

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

@@ -171,8 +171,8 @@ export function ComponentAdderPlugin(props) {
                     editor.dispatchCommand(INSERT_VIDEO_COMMAND, props);
                 }, shouldReset: true }), _jsx(UploadFileDialog, { open: fileOpen, onClose: () => setFileOpen(false), onChange: (props) => {
                     editor.dispatchCommand(UPLOAD_FILE_COMMAND, props);
-                } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
-          z-index: ${ZINDEX.DIALOG + 1};
+                } }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
+          z-index: ${ZINDEX.DIALOG + 1};
         `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
                     : null, onSelectOption: onSelectOption, onClose: () => {
@@ -262,13 +262,13 @@ export function ComponentAdderPlugin(props) {
                             }));
                         }), onMenuDragStart: onDragStart, onMenuDragEnd: onDragEnd }), _jsx(TargetLine, { ref: targetLineRef })] }), anchorElem)] }));
 }
-const TargetLine = styled.div `
-  pointer-events: none;
-  background: deepskyblue;
-  height: 4px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  opacity: 0;
-  will-change: transform;
+const TargetLine = styled.div `
+  pointer-events: none;
+  background: deepskyblue;
+  height: 4px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  will-change: transform;
 `;

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

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

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

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

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/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("블록 삭제"), {
@@ -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);
         }