@team-monolith/cds 1.46.2 → 1.47.0

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export type LexicalCustomConfig = {
     freezeProblemNode: boolean;
-    showQuizSolution: boolean;
 };
 declare const LexicalCustomConfigContext: import("react").Context<LexicalCustomConfig>;
 export { LexicalCustomConfigContext };

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

@@ -1,6 +1,5 @@
 import { createContext } from "react";
 const LexicalCustomConfigContext = createContext({
     freezeProblemNode: false,
-    showQuizSolution: false,
 });
 export { LexicalCustomConfigContext };

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

@@ -12,8 +12,6 @@ export interface LexicalEditorProps {
     /** freeze. 문제 블록을 수정하지 못하도록 함
      */
     freezeProblemNode?: boolean;
-    /** 퀴즈 정답이 공개되는지 여부. false가 default입니다. 공개하고자 하는곳에서 true로 설정해야 합니다. */
-    showQuizSolution?: boolean;
     /** 퀴즈 노드가 허용되는지 여부. false가 디폴트이고, 전달하지 않아도 로컬스토리지 devMode로도 노출시킬 수 있습니다. */
     isQuizEnabled?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -13,6 +13,8 @@ import Plugins from "./Plugins";
 import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
 import { LexicalCustomConfigContext } from "./LexicalCustomConfigContext";
 import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
+import { LayoutContainerNode } from "./nodes/LayoutContainerNode";
+import { LayoutItemNode } from "./nodes/LayoutItemNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -30,7 +32,7 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, showQuizSolution = false, freezeProblemNode = false, isQuizEnabled = false, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, isQuizEnabled = false, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -52,6 +54,8 @@ export function LexicalEditor(props) {
             ImageNode,
             HorizontalRuleNode,
             ColoredQuoteNode,
+            LayoutContainerNode,
+            LayoutItemNode,
             {
                 replace: QuoteNode,
                 with: (_node) => {
@@ -63,5 +67,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode, showQuizSolution } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode: freezeProblemNode !== null && freezeProblemNode !== void 0 ? freezeProblemNode : false } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange, isQuizEnabled: isQuizEnabled }), _jsx(_Fragment, { children: children })] })) })));
 }

package/dist/patterns/LexicalEditor/Plugins.js

@@ -29,6 +29,7 @@ import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
+import { LayoutPlugin } from "./plugins/LayoutPlugin/LayoutPlugin";
 export default function Plugins(props) {
     const { className, contentEditableClassName, onChange, isQuizEnabled } = props;
     const isEditable = useLexicalEditable();
@@ -43,7 +44,7 @@ export default function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, { isQuizEnabled: isQuizEnabled }), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem, isQuizEnabled: isQuizEnabled }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {}), _jsx(LayoutPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -0,0 +1,30 @@
+/**
+ * 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 type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalNode, NodeKey, SerializedElementNode, Spread } from "lexical";
+import { ElementNode } from "lexical";
+export type SerializedLayoutContainerNode = Spread<{
+    templateColumns: string;
+}, SerializedElementNode>;
+export declare class LayoutContainerNode extends ElementNode {
+    __templateColumns: string;
+    constructor(templateColumns: string, key?: NodeKey);
+    static getType(): string;
+    static clone(node: LayoutContainerNode): LayoutContainerNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    exportDOM(): DOMExportOutput;
+    updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode;
+    isShadowRoot(): boolean;
+    canBeEmpty(): boolean;
+    exportJSON(): SerializedLayoutContainerNode;
+    getTemplateColumns(): string;
+    setTemplateColumns(templateColumns: string): void;
+}
+export declare function $createLayoutContainerNode(templateColumns: string): LayoutContainerNode;
+export declare function $isLayoutContainerNode(node: LexicalNode | null | undefined): node is LayoutContainerNode;

package/dist/patterns/LexicalEditor/nodes/LayoutContainerNode.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.
+ *
+ */
+import { addClassNamesToElement } from "@lexical/utils";
+import { ElementNode } from "lexical";
+function $convertLayoutContainerElement(domNode) {
+    const styleAttributes = window.getComputedStyle(domNode);
+    const templateColumns = styleAttributes.getPropertyValue("grid-template-columns");
+    if (templateColumns) {
+        const node = $createLayoutContainerNode(templateColumns);
+        return { node };
+    }
+    return null;
+}
+export class LayoutContainerNode extends ElementNode {
+    constructor(templateColumns, key) {
+        super(key);
+        this.__templateColumns = templateColumns;
+    }
+    static getType() {
+        return "layout-container";
+    }
+    static clone(node) {
+        return new LayoutContainerNode(node.__templateColumns, node.__key);
+    }
+    createDOM(config) {
+        const dom = document.createElement("div");
+        dom.style.display = "grid";
+        dom.style.gridTemplateColumns = this.__templateColumns;
+        if (typeof config.theme.layoutContainer === "string") {
+            addClassNamesToElement(dom, config.theme.layoutContainer);
+        }
+        return dom;
+    }
+    exportDOM() {
+        const element = document.createElement("div");
+        element.style.gridTemplateColumns = this.__templateColumns;
+        element.setAttribute("data-lexical-layout-container", "true");
+        return { element };
+    }
+    updateDOM(prevNode, dom) {
+        if (prevNode.__templateColumns !== this.__templateColumns) {
+            dom.style.gridTemplateColumns = this.__templateColumns;
+        }
+        return false;
+    }
+    static importDOM() {
+        return {
+            div: (domNode) => {
+                if (!domNode.hasAttribute("data-lexical-layout-container")) {
+                    return null;
+                }
+                return {
+                    conversion: $convertLayoutContainerElement,
+                    priority: 2,
+                };
+            },
+        };
+    }
+    static importJSON(json) {
+        return $createLayoutContainerNode(json.templateColumns);
+    }
+    isShadowRoot() {
+        return true;
+    }
+    canBeEmpty() {
+        return false;
+    }
+    exportJSON() {
+        return Object.assign(Object.assign({}, super.exportJSON()), { templateColumns: this.__templateColumns, type: "layout-container", version: 1 });
+    }
+    getTemplateColumns() {
+        return this.getLatest().__templateColumns;
+    }
+    setTemplateColumns(templateColumns) {
+        this.getWritable().__templateColumns = templateColumns;
+    }
+}
+export function $createLayoutContainerNode(templateColumns) {
+    return new LayoutContainerNode(templateColumns);
+}
+export function $isLayoutContainerNode(node) {
+    return node instanceof LayoutContainerNode;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * 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 type { DOMConversionMap, EditorConfig, LexicalNode, SerializedElementNode } from "lexical";
+import { ElementNode } from "lexical";
+export type SerializedLayoutItemNode = SerializedElementNode;
+export declare class LayoutItemNode extends ElementNode {
+    static getType(): string;
+    static clone(node: LayoutItemNode): LayoutItemNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(): LayoutItemNode;
+    isShadowRoot(): boolean;
+    exportJSON(): SerializedLayoutItemNode;
+}
+export declare function $createLayoutItemNode(): LayoutItemNode;
+export declare function $isLayoutItemNode(node: LexicalNode | null | undefined): node is LayoutItemNode;

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

@@ -0,0 +1,45 @@
+/**
+ * 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 { addClassNamesToElement } from "@lexical/utils";
+import { ElementNode } from "lexical";
+export class LayoutItemNode extends ElementNode {
+    static getType() {
+        return "layout-item";
+    }
+    static clone(node) {
+        return new LayoutItemNode(node.__key);
+    }
+    createDOM(config) {
+        const dom = document.createElement("div");
+        if (typeof config.theme.layoutItem === "string") {
+            addClassNamesToElement(dom, config.theme.layoutItem);
+        }
+        return dom;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importDOM() {
+        return {};
+    }
+    static importJSON() {
+        return $createLayoutItemNode();
+    }
+    isShadowRoot() {
+        return true;
+    }
+    exportJSON() {
+        return Object.assign(Object.assign({}, super.exportJSON()), { type: "layout-item", version: 1 });
+    }
+}
+export function $createLayoutItemNode() {
+    return new LayoutItemNode();
+}
+export function $isLayoutItemNode(node) {
+    return node instanceof LayoutItemNode;
+}

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -35,7 +35,7 @@ export function InputComponent(props) {
     // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
     // 문제를 더 파악하고 추후 개선 필요.
     const [answerInput, setAnswerInput] = useState(answer);
-    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // "** ***" 같은 형태입니다.
     const answerFormat = solutions[0].value;
     const handleChange = (value) => {
@@ -51,9 +51,9 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            return (_jsx(SegmentedInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
         }
-        return (_jsx(TextInput, { readOnly: freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+        return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, isCorrect: isCorrect, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
                 handleChange(e.target.value);
             }, fullWidth: true }));
     }

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.d.ts

@@ -2,7 +2,6 @@ import { ImageProps } from "../ProblemSelectNode";
 export interface SelectBoxViewProps {
     index: number;
     isSelected: boolean;
-    showQuizSolution: boolean;
     isAnswer?: boolean;
     image?: ImageProps | null;
     text: string;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxView.js

@@ -19,7 +19,7 @@ const TYPE_TO_INDEX_ICON = (type) => ({
         ` })),
 })[type];
 export function SelectBoxView(props) {
-    const { index, isSelected, showQuizSolution, isAnswer, image, text, onClick, } = props;
+    const { index, isSelected, isAnswer, image, text, onClick } = props;
     const selectBoxType = isSelected
         ? isAnswer === undefined
             ? "primary"
@@ -29,10 +29,11 @@ export function SelectBoxView(props) {
         : undefined;
     return (_jsx(SelectBoxComponent, { css: css `
         width: 100%;
-      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, onClick: onClick, 
+      `, type: selectBoxType, index: selectBoxType ? TYPE_TO_INDEX_ICON(selectBoxType) : index, image: image, text: text, 
+        // isAnswer가 존재하면 채점 후의 상태이므로 unclickable을 위해 onClick을 전달하지 않음
+        onClick: isAnswer === undefined ? onClick : undefined, 
         // 선택되지 않았으나 정답일 때 정답 태그를 표시
-        endIcon: showQuizSolution &&
-            isAnswer &&
+        endIcon: isAnswer &&
             !isSelected && (_jsx(Tag, { label: "\uC815\uB2F5", icon: _jsx(CheckboxCircleFillIcon, {}), color: "green", css: css `
               span {
                 font-weight: 700;

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.js

@@ -29,40 +29,40 @@ export function SelectComponent(props) {
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
-    const { freezeProblemNode, showQuizSolution } = useContext(LexicalCustomConfigContext);
-    // view
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
+    // 학생 view
     if (!isEditable) {
         return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
                 width: 14px;
                 height: 14px;
-              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, showQuizSolution: showQuizSolution, isAnswer: selection.isAnswer, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
-                        ? undefined
-                        : () => {
-                            const isSelected = selected.includes(selection.value);
-                            if (isSelected) {
-                                editor.update(() => {
-                                    const node = $getNodeByKey(nodeKey);
-                                    if (!$isProblemSelectNode(node)) {
-                                        return;
-                                    }
-                                    node.setSelected(selected.filter((v) => v !== selection.value));
-                                });
-                            }
-                            else {
-                                editor.update(() => {
-                                    const node = $getNodeByKey(nodeKey);
-                                    if (!$isProblemSelectNode(node)) {
-                                        return;
-                                    }
-                                    if (hasMultipleAnswers) {
-                                        node.setSelected([...selected, selection.value]);
-                                    }
-                                    else {
-                                        node.setSelected([selection.value]);
-                                    }
-                                });
-                            }
-                        } }, index)))] }));
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isAnswer: selection.isAnswer, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
+                        if (lexicalCustomConfig.freezeProblemNode)
+                            return;
+                        const isSelected = selected.includes(selection.value);
+                        if (isSelected) {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                node.setSelected(selected.filter((v) => v !== selection.value));
+                            });
+                        }
+                        else {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                if (hasMultipleAnswers) {
+                                    node.setSelected([...selected, selection.value]);
+                                }
+                                else {
+                                    node.setSelected([selection.value]);
+                                }
+                            });
+                        }
+                    } }, index)))] }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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

@@ -26,6 +26,7 @@ import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
 import { INSERT_PROBLEM_SELECT_COMMAND } from "../ProblemSelectPlugin";
+import { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin/LayoutPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -196,8 +197,17 @@ export function getBaseOptions(props) {
             onSelect: () => setImageOpen(true),
         }),
     ];
+    // 로컬스토리지 devMode가 true이면 칼럼 나누기 컨텍스트 메뉴를 추가합니다.
+    const isDevMode = localStorage.getItem("devMode") === "true";
+    if (isDevMode) {
+        baseOptions.push(new ComponentPickerOption("칼럼 나누기", {
+            icon: _jsx("i", { className: "icon columns" }),
+            keywords: ["columns", "layout", "grid"],
+            onSelect: () => editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr"),
+        }));
+    }
     // isQuizEnabled이거나 로컬스토리지 devMode가 true이면 퀴즈 컨텍스트 메뉴를 추가합니다.
-    if (isQuizEnabled || localStorage.getItem("devMode") === "true") {
+    if (isQuizEnabled || isDevMode) {
         return [...getQuizContextOptions(editor, theme), ...baseOptions];
     }
     return baseOptions;

package/dist/patterns/LexicalEditor/plugins/LayoutPlugin/InsertLayoutDialog.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * 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 { LexicalEditor } from "lexical";
+export declare const LAYOUTS: {
+    label: string;
+    value: string;
+}[];
+export default function InsertLayoutDialog({ activeEditor, onClose, }: {
+    activeEditor: LexicalEditor;
+    onClose: () => void;
+}): JSX.Element;

package/dist/patterns/LexicalEditor/plugins/LayoutPlugin/InsertLayoutDialog.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { INSERT_LAYOUT_COMMAND } from "./LayoutPlugin";
+import Button from "../../../../components/Button";
+export const LAYOUTS = [
+    { label: "2 columns (equal width)", value: "1fr 1fr" },
+    { label: "2 columns (25% - 75%)", value: "1fr 3fr" },
+    { label: "3 columns (equal width)", value: "1fr 1fr 1fr" },
+    { label: "3 columns (25% - 50% - 25%)", value: "1fr 2fr 1fr" },
+    { label: "4 columns (equal width)", value: "1fr 1fr 1fr 1fr" },
+];
+export default function InsertLayoutDialog({ activeEditor, onClose, }) {
+    var _a;
+    const [layout, setLayout] = useState(LAYOUTS[0].value);
+    const buttonLabel = (_a = LAYOUTS.find((item) => item.value === layout)) === null || _a === void 0 ? void 0 : _a.label;
+    const onClick = () => {
+        activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, LAYOUTS[0].value);
+        onClose();
+    };
+    return (_jsx(_Fragment, { children: _jsx(Button, Object.assign({ onClick: onClick, color: "grey", size: "small", label: undefined }, { children: "Insert" })) }));
+}

package/dist/patterns/LexicalEditor/plugins/LayoutPlugin/LayoutPlugin.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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 type { LexicalCommand, NodeKey } from "lexical";
+export declare const INSERT_LAYOUT_COMMAND: LexicalCommand<string>;
+export declare const UPDATE_LAYOUT_COMMAND: LexicalCommand<{
+    template: string;
+    nodeKey: NodeKey;
+}>;
+export declare function LayoutPlugin(): null;

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

@@ -0,0 +1,125 @@
+/**
+ * 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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister, } from "@lexical/utils";
+import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, createCommand, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, } from "lexical";
+import { useEffect } from "react";
+import { $createLayoutContainerNode, $isLayoutContainerNode, LayoutContainerNode, } from "../../nodes/LayoutContainerNode";
+import { $createLayoutItemNode, $isLayoutItemNode, LayoutItemNode, } from "../../nodes/LayoutItemNode";
+export const INSERT_LAYOUT_COMMAND = createCommand();
+export const UPDATE_LAYOUT_COMMAND = createCommand();
+export function LayoutPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([LayoutContainerNode, LayoutItemNode])) {
+            throw new Error("LayoutPlugin: LayoutContainerNode, or LayoutItemNode not registered on editor");
+        }
+        const $onEscape = (before) => {
+            var _a, _b;
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) &&
+                selection.isCollapsed() &&
+                selection.anchor.offset === 0) {
+                const container = $findMatchingParent(selection.anchor.getNode(), $isLayoutContainerNode);
+                if ($isLayoutContainerNode(container)) {
+                    const parent = container.getParent();
+                    const child = parent &&
+                        (before
+                            ? parent.getFirstChild()
+                            : parent === null || parent === void 0 ? void 0 : parent.getLastChild());
+                    const descendant = before
+                        ? (_a = container.getFirstDescendant()) === null || _a === void 0 ? void 0 : _a.getKey()
+                        : (_b = container.getLastDescendant()) === null || _b === void 0 ? void 0 : _b.getKey();
+                    if (parent !== null &&
+                        child === container &&
+                        selection.anchor.key === descendant) {
+                        if (before) {
+                            container.insertBefore($createParagraphNode());
+                        }
+                        else {
+                            container.insertAfter($createParagraphNode());
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        return mergeRegister(
+        // When layout 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, () => $onEscape(false), COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, () => $onEscape(false), COMMAND_PRIORITY_LOW), 
+        // When layout 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, () => $onEscape(true), COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, () => $onEscape(true), COMMAND_PRIORITY_LOW), editor.registerCommand(INSERT_LAYOUT_COMMAND, (template) => {
+            editor.update(() => {
+                const container = $createLayoutContainerNode(template);
+                const itemsCount = getItemsCountFromTemplate(template);
+                for (let i = 0; i < itemsCount; i++) {
+                    container.append($createLayoutItemNode().append($createParagraphNode()));
+                }
+                $insertNodeToNearestRoot(container);
+                container.selectStart();
+            });
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(UPDATE_LAYOUT_COMMAND, ({ template, nodeKey }) => {
+            editor.update(() => {
+                const container = $getNodeByKey(nodeKey);
+                if (!$isLayoutContainerNode(container)) {
+                    return;
+                }
+                const itemsCount = getItemsCountFromTemplate(template);
+                const prevItemsCount = getItemsCountFromTemplate(container.getTemplateColumns());
+                // Add or remove extra columns if new template does not match existing one
+                if (itemsCount > prevItemsCount) {
+                    for (let i = prevItemsCount; i < itemsCount; i++) {
+                        container.append($createLayoutItemNode().append($createParagraphNode()));
+                    }
+                }
+                else if (itemsCount < prevItemsCount) {
+                    for (let i = prevItemsCount - 1; i >= itemsCount; i--) {
+                        const layoutItem = container.getChildAtIndex(i);
+                        if ($isLayoutItemNode(layoutItem)) {
+                            layoutItem.remove();
+                        }
+                    }
+                }
+                container.setTemplateColumns(template);
+            });
+            return true;
+        }, COMMAND_PRIORITY_EDITOR), 
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Item" it'll unwrap nodes and convert it back
+        // to regular content.
+        editor.registerNodeTransform(LayoutItemNode, (node) => {
+            const parent = node.getParent();
+            if (!$isLayoutContainerNode(parent)) {
+                const children = node.getChildren();
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), editor.registerNodeTransform(LayoutContainerNode, (node) => {
+            const children = node.getChildren();
+            if (!children.every($isLayoutItemNode)) {
+                for (const child of children) {
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }));
+    }, [editor]);
+    return null;
+}
+function getItemsCountFromTemplate(template) {
+    return template.trim().split(/\s+/).length;
+}

package/package.json

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