@team-monolith/cds 1.119.3 → 1.119.5

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/SettingForm/SettingForm.js

@@ -58,9 +58,9 @@ export function SettingForm(props) {
             return true;
         return getTexts(t, "errorDuplicateChoice")(duplicatedIndexes.map((i) => i + 1).join(","));
     }
-    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
-            width: 12px;
-            height: 12px;
+    return (_jsxs(Form, { onSubmit: handleSubmit(onSettingSubmit), children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
+            width: 12px;
+            height: 12px;
           ` }), t("선택형 입력 칸", { context: "렉시컬 도구 설정창" })] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("선택지") }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, rules: {
                                             validate: {
                                                 validateRequired,
@@ -82,82 +82,82 @@ export function SettingForm(props) {
                                         },
                                         value: uid(),
                                     });
-                                }, disabled: fields.length >= 9 })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("다중 선택 허용 여부") }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
-                  min-width: 14px;
-                  width: 14px;
-                  height: 14px;
+                                }, disabled: fields.length >= 9 })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: t("다중 선택 허용 여부") }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                  min-width: 14px;
+                  width: 14px;
+                  height: 14px;
                 ` }), t("다중 선택을 허용한 문제에는 여러 선택지를 고를 수 있다는 안내가 제공됩니다.")] }))] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: t("닫기", { context: "렉시컬 도구 설정창" }), onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: t("이대로 넣기", { context: "렉시컬 도구 설정창" }), bold: true, type: "submit" })] })] }));
 }
-const Form = styled.form(({ theme }) => css `
-    display: flex;
-    width: 620px;
-    flex-direction: column;
-    border-radius: 6px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow08};
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
   `);
-const Title = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 8px 12px;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
   `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    border-top: 1px solid ${theme.color.background.neutralAltActive};
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
   `);
-const Left = styled.div `
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
 `;
-const Right = styled.div `
-  width: 240px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 12px;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
 `;
-const FormArea = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 `;
-const Label = styled.div(({ theme }) => css `
-    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% */
+const Label = styled.div(({ theme }) => css `
+    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% */
   `);
-const Buttons = styled.div `
-  display: flex;
-  padding: 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
 `;
-const Alert = styled.div(({ theme }) => css `
-    display: flex;
-    gap: 4px;
-    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% */
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    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% */
   `);

package/dist/patterns/LexicalEditor/nodes/VideoNode/VideoComponent.js

@@ -11,9 +11,9 @@ import { InsertVideoDialog } from "../../components/InsertVideoDialog";
 import ReactPlayer from "react-player";
 import { css } from "@emotion/react";
 function VideoPlayer(props) {
-    return (_jsx(ReactPlayer, { css: css `
-        background: black;
-        max-width: 1200px;
+    return (_jsx(ReactPlayer, { css: css `
+        background: black;
+        max-width: 1200px;
       `, width: "100%", url: props.url, controls: true, config: {
             file: {
                 hlsOptions: {
@@ -47,7 +47,7 @@ export function VideoComponent({ src, nodeKey, }) {
     }
     return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(VideoPlayer, { url: src }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setOpen(true), "aria-label": "\uB3D9\uC601\uC0C1 \uC218\uC815\uD558\uAE30" })] }), _jsx(InsertVideoDialog, { open: open, title: "\uB3D9\uC601\uC0C1 \uC218\uC815\uD558\uAE30", onClose: () => setOpen(false), videoProps: { src }, onChange: handleChange, onDelete: handleDelete })] }));
 }
-const EditContainer = styled.div `
-  display: flex;
-  gap: 4px;
+const EditContainer = styled.div `
+  display: flex;
+  gap: 4px;
 `;

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

@@ -10,3 +10,6 @@ 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,3 +10,6 @@ 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,19 +3,21 @@ 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 LayoutItemNode | 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/nodes.js

@@ -9,6 +9,9 @@ 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";
@@ -39,6 +42,9 @@ export const nodes = [
     SheetSelectNode,
     SheetInputNode,
     SelfEvaluationNode,
+    ToggleContainerNode,
+    ToggleTitleNode,
+    ToggleContentNode,
     {
         replace: QuoteNode,
         with: () => new ColoredQuoteNode("grey"),

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

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

@@ -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;
+}