@team-monolith/cds 1.47.1 → 1.48.1

package/dist/CodleDesignSystemProvider.js

@@ -30,11 +30,11 @@ export const light = {
             success: COLOR.green07,
             successActive: COLOR.green08,
             successDisabled: COLOR.green03,
-            info: COLOR.teal08,
-            infoActive: COLOR.teal09,
+            info: COLOR.teal06,
+            infoActive: COLOR.teal08,
             infoDisabled: COLOR.teal02,
-            warning: COLOR.yellow08,
-            warningActive: COLOR.yellow09,
+            warning: COLOR.yellow06,
+            warningActive: COLOR.yellow08,
             warningDisabled: COLOR.yellow02,
             inverse: COLOR.black,
             inverseActive: COLOR.grey08,
@@ -141,11 +141,11 @@ export const dark = {
             success: COLOR.green04,
             successActive: COLOR.green03,
             successDisabled: COLOR.green08,
-            info: COLOR.teal03,
-            infoActive: COLOR.teal02,
-            infoDisabled: COLOR.teal09,
-            warning: COLOR.yellow03,
-            warningActive: COLOR.yellow02,
+            info: COLOR.teal06,
+            infoActive: COLOR.teal08,
+            infoDisabled: COLOR.teal02,
+            warning: COLOR.yellow08,
+            warningActive: COLOR.yellow06,
             warningDisabled: COLOR.yellow09,
             inverse: COLOR.white,
             inverseActive: COLOR.grey03,

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -13,8 +13,6 @@ 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") {
@@ -54,8 +52,6 @@ export function LexicalEditor(props) {
             ImageNode,
             HorizontalRuleNode,
             ColoredQuoteNode,
-            LayoutContainerNode,
-            LayoutItemNode,
             {
                 replace: QuoteNode,
                 with: (_node) => {

package/dist/patterns/LexicalEditor/Plugins.js

@@ -29,7 +29,6 @@ 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";
 export default function Plugins(props) {
     const { className, contentEditableClassName, onChange, isQuizEnabled } = props;
     const isEditable = useLexicalEditable();
@@ -44,7 +43,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, {}), _jsx(LayoutPlugin, {})] }));
+                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, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -4,43 +4,48 @@ export interface ImageProps {
     src: string;
     altText: string;
 }
-export interface Selection {
-    /** 해당 선택지의 정답 유무는 채점하기 전의 학생에게는 노출하지 않습니다. */
-    isAnswer?: boolean;
+export interface SelectionWithoutSolution {
     show: {
         image: ImageProps | null;
         text: string;
     };
     value: string;
 }
-export interface ProblemSelectPayload {
-    selections: Selection[];
+export type Selection = SelectionWithoutSolution & {
+    isAnswer: boolean;
+};
+/** 정답이 공개되지 않은 객관식 문제는 다중정답 여부를 전달받기 위해서 서버에서 hasMultipleSolutions를 보내줍니다. */
+export type ProblemSelectPayload = {
     selected: string[];
-    hasMultipleAnswers: boolean;
     key?: NodeKey;
-}
+} & ({
+    selections: Selection[];
+} | {
+    selections: SelectionWithoutSolution[];
+    hasMultipleSolutions?: boolean;
+});
 export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
 /**
  * selections는 Selection타입의 배열로서 객관식 정보를 담고 있습니다. (교사용)
  * selected는 학생이 선택한 답의 value를 담고 있습니다.(학생용)
  */
 export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
-    __selections: Selection[];
+    __selections: Selection[] | SelectionWithoutSolution[];
     __selected: string[];
-    __hasMultipleAnswers: boolean;
+    __hasMultipleSolutions: boolean | undefined;
     isInline(): boolean;
     static getType(): string;
-    getSelections(): Selection[];
+    getSelections(): Selection[] | SelectionWithoutSolution[];
     getSelected(): string[];
-    setSelections(selections: Selection[]): void;
+    setSelections(selections: Selection[] | SelectionWithoutSolution[]): void;
     setSelected(selected: string[]): void;
     static clone(node: ProblemSelectNode): ProblemSelectNode;
-    constructor(selections: Selection[], selected: string[], hasMultipleAnswers: boolean, key?: NodeKey);
+    constructor(selections: Selection[] | SelectionWithoutSolution[], selected: string[], hasMultipleSolutions?: boolean, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemSelectNode): ProblemSelectNode;
     exportJSON(): SerializedProblemSelectNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }: ProblemSelectPayload): ProblemSelectNode;
+export declare function $createProblemSelectNode(payload: ProblemSelectPayload): ProblemSelectNode;
 export declare function $isProblemSelectNode(node: LexicalNode | null | undefined): node is ProblemSelectNode;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { DecoratorNode, } from "lexical";
 import { addClassNamesToElement } from "@lexical/utils";
 import { SelectComponent } from "./SelectComponent";
 /**
@@ -28,13 +28,13 @@ export class ProblemSelectNode extends DecoratorNode {
         self.__selected = selected;
     }
     static clone(node) {
-        return new ProblemSelectNode(node.__selections, node.__selected, node.__hasMultipleAnswers, node.__key);
+        return new ProblemSelectNode(node.__selections, node.__selected, node.__hasMultipleSolutions, node.__key);
     }
-    constructor(selections, selected, hasMultipleAnswers, key) {
+    constructor(selections, selected, hasMultipleSolutions, key) {
         super(key);
         this.__selections = selections;
         this.__selected = selected;
-        this.__hasMultipleAnswers = hasMultipleAnswers;
+        this.__hasMultipleSolutions = hasMultipleSolutions;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -46,29 +46,44 @@ export class ProblemSelectNode extends DecoratorNode {
         return false;
     }
     static importJSON(serializedNode) {
-        const node = $createProblemSelectNode({
-            key: serializedNode.key,
-            selections: serializedNode.selections,
-            selected: serializedNode.selected,
-            hasMultipleAnswers: serializedNode.hasMultipleAnswers,
-        });
-        return node;
+        if ("hasMultipleSolutions" in serializedNode) {
+            return $createProblemSelectNode({
+                key: serializedNode.key,
+                selections: serializedNode.selections,
+                selected: serializedNode.selected,
+                hasMultipleSolutions: serializedNode.hasMultipleSolutions,
+            });
+        }
+        else {
+            return $createProblemSelectNode({
+                key: serializedNode.key,
+                selections: serializedNode.selections,
+                selected: serializedNode.selected,
+            });
+        }
     }
     exportJSON() {
         return {
+            type: ProblemSelectNode.getType(),
             version: 1,
-            type: "problem-select",
+            key: this.getKey(),
             selections: this.__selections,
             selected: this.__selected,
-            hasMultipleAnswers: this.__hasMultipleAnswers,
         };
     }
     decorate() {
-        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, hasMultipleAnswers: this.__hasMultipleAnswers, nodeKey: this.getKey() }));
+        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, hasMultipleSolutions: this.__hasMultipleSolutions, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }) {
-    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, hasMultipleAnswers, key));
+export function $createProblemSelectNode(payload) {
+    if ("hasMultipleSolutions" in payload) {
+        const { selections, selected, key, hasMultipleSolutions } = payload;
+        return new ProblemSelectNode(selections, selected, hasMultipleSolutions, key);
+    }
+    else {
+        const { selections, selected, key } = payload;
+        return new ProblemSelectNode(selections, selected, undefined, key);
+    }
 }
 export function $isProblemSelectNode(node) {
     return node instanceof ProblemSelectNode;

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

@@ -1,9 +1,9 @@
 /** @jsxImportSource @emotion/react */
 import { NodeKey } from "lexical";
-import { Selection } from "./ProblemSelectNode";
+import { Selection, SelectionWithoutSolution } from "./ProblemSelectNode";
 export declare function SelectComponent(props: {
-    selections: Selection[];
+    selections: Selection[] | SelectionWithoutSolution[];
     selected: string[];
-    hasMultipleAnswers: boolean;
+    hasMultipleSolutions: boolean | undefined;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,7 @@
-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, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
-import { $isProblemSelectNode } from "./ProblemSelectNode";
+import { $isProblemSelectNode, } from "./ProblemSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
@@ -24,18 +13,26 @@ import SettingForm from "./SettingForm";
 import styled from "@emotion/styled";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function SelectComponent(props) {
-    const { selected, hasMultipleAnswers } = props, settingFormProps = __rest(props, ["selected", "hasMultipleAnswers"]);
-    const { selections, nodeKey } = settingFormProps;
+    const { selected, hasMultipleSolutions, selections, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     const { freezeProblemNode, showQuizSolution } = useContext(LexicalCustomConfigContext);
+    const showMultipleSolutions = hasMultipleSolutions ||
+        selections.flatMap((s) => {
+            if ("isAnswer" in s && s.isAnswer) {
+                return [s.isAnswer];
+            }
+            return [];
+        }).length > 1;
     // view
     if (!isEditable) {
-        return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+        return (_jsxs(_Fragment, { children: [showMultipleSolutions && (_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, isAnswer: showQuizSolution ? selection.isAnswer : undefined, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
+              ` }), "\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: showQuizSolution && "isAnswer" in selection
+                        ? selection.isAnswer
+                        : undefined, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
                         ? undefined
                         : () => {
                             const isSelected = selected.includes(selection.value);
@@ -54,7 +51,7 @@ export function SelectComponent(props) {
                                     if (!$isProblemSelectNode(node)) {
                                         return;
                                     }
-                                    if (hasMultipleAnswers) {
+                                    if (showMultipleSolutions) {
                                         node.setSelected([...selected, selection.value]);
                                     }
                                     else {
@@ -72,9 +69,9 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: Boolean(selection.isAnswer), image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
-                        } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
+                        } })] })), settingOpen && (_jsx(SettingForm, { selections: selections, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
 const Alert = styled.div(({ theme }) => css `
     display: flex;

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

@@ -21,12 +21,11 @@ import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
-import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, } from "../../../../icons";
 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";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -100,7 +99,6 @@ function getQuizContextOptions(editor, theme) {
                         },
                     ],
                     selected: [],
-                    hasMultipleAnswers: false,
                 });
             },
         }),
@@ -197,17 +195,8 @@ export function getBaseOptions(props) {
             onSelect: () => setImageOpen(true),
         }),
     ];
-    // 로컬스토리지 devMode가 true이면 칼럼 컨텍스트 메뉴를 추가합니다.
-    const isDevMode = localStorage.getItem("devMode") === "true";
-    if (isDevMode) {
-        baseOptions.push(new ComponentPickerOption("칼럼", {
-            icon: _jsx(LayoutColumnLineIcon, {}),
-            keywords: ["columns", "layout", "grid"],
-            onSelect: () => editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr"),
-        }));
-    }
     // isQuizEnabled이거나 로컬스토리지 devMode가 true이면 퀴즈 컨텍스트 메뉴를 추가합니다.
-    if (isQuizEnabled || isDevMode) {
+    if (isQuizEnabled || localStorage.getItem("devMode") === "true") {
         return [...getQuizContextOptions(editor, theme), ...baseOptions];
     }
     return baseOptions;

package/package.json

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

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

@@ -1,30 +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 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

@@ -1,89 +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 { 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.gap = "24px";
-        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

@@ -1,22 +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 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

@@ -1,45 +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 { 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/plugins/LayoutPlugin/index.d.ts

@@ -1,14 +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 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/index.js

@@ -1,125 +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 { 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;
-}