@team-monolith/cds 1.49.2 → 1.49.4

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -33,14 +33,14 @@ function validateValue(value) {
     return true;
 }
 /** undefined value를 제외한 객체 일치 여부를 판단합니다. */
-function isCleanEqualObjects(oldObj, newObj) {
+function isCleanlyEqual(oldObj, newObj) {
     const cleanedOldObj = getCleanObject(oldObj);
     const cleanedNewObj = getCleanObject(newObj);
     return _.isEqual(cleanedOldObj, cleanedNewObj);
 }
 /** 객체 내에 undefined value를 갖는 key를 재귀적으로 모두 제거합니다. */
 function getCleanObject(obj) {
-    const newObj = _.cloneDeep(obj);
+    const newObj = Object.assign({}, obj);
     for (const key in newObj) {
         if (newObj[key] === undefined) {
             delete newObj[key];
@@ -83,7 +83,8 @@ export function LexicalEditor(props) {
                 },
             },
         ],
-        theme: getTheme(theme),
+        // 마운트 된 이후 editable 수정해도 theme에 반영되지 않음 유의
+        theme: getTheme(theme, editable),
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
@@ -94,7 +95,7 @@ export function LexicalEditor(props) {
      */
     const onChangeHandler = onChange
         ? (blocks) => {
-            if (!isCleanEqualObjects(value, blocks)) {
+            if (!isCleanlyEqual(value, blocks)) {
                 onChange(blocks);
             }
         }

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

@@ -29,8 +29,6 @@ export class LayoutContainerNode extends ElementNode {
     }
     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);

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

@@ -22,7 +22,7 @@ export type ProblemSelectPayload = {
     selections: Selection[];
 } | {
     selections: SelectionWithoutSolution[];
-    hasMultipleSolutions?: boolean;
+    hasMultipleSolutions: boolean;
 });
 export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
 /**

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DecoratorNode, } from "lexical";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
 import { addClassNamesToElement } from "@lexical/utils";
 import { SelectComponent } from "./SelectComponent";
 /**
@@ -77,11 +77,11 @@ export class ProblemSelectNode extends DecoratorNode {
 export function $createProblemSelectNode(payload) {
     if ("hasMultipleSolutions" in payload) {
         const { selections, selected, key, hasMultipleSolutions } = payload;
-        return new ProblemSelectNode(selections, selected, hasMultipleSolutions, key);
+        return $applyNodeReplacement(new ProblemSelectNode(selections, selected, hasMultipleSolutions, key));
     }
     else {
         const { selections, selected, key } = payload;
-        return new ProblemSelectNode(selections, selected, undefined, key);
+        return $applyNodeReplacement(new ProblemSelectNode(selections, selected, undefined, key));
     }
 }
 export function $isProblemSelectNode(node) {

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

@@ -19,12 +19,8 @@ export function SelectComponent(props) {
     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;
+        (hasMultipleSolutions === undefined &&
+            selections.filter((s) => "isAnswer" in s && s.isAnswer).length > 1);
     // view
     if (!isEditable) {
         return (_jsxs(_Fragment, { children: [showMultipleSolutions && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `

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

@@ -196,8 +196,13 @@ export function getBaseOptions(props) {
             onSelect: () => setImageOpen(true),
         }),
     ];
-    // 로컬스토리지 devMode가 true이면 칼럼 컨텍스트 메뉴를 추가합니다.
+    // devMode 여부를 로컬스토리지에서 가져옵니다.
     const isDevMode = localStorage.getItem("devMode") === "true";
+    // isQuizEnabled이거나 devMode이면 퀴즈 컨텍스트 메뉴를 꼭대기에 추가합니다.
+    if (isQuizEnabled || isDevMode) {
+        baseOptions.unshift(...getQuizContextOptions(editor, theme));
+    }
+    // devMode이면 칼럼 컨텍스트 메뉴를 추가합니다.
     if (isDevMode) {
         baseOptions.push(new ComponentPickerOption("칼럼", {
             icon: _jsx(LayoutColumnLineIcon, {}),
@@ -205,10 +210,6 @@ export function getBaseOptions(props) {
             onSelect: () => editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr"),
         }));
     }
-    // isQuizEnabled이거나 로컬스토리지 devMode가 true이면 퀴즈 컨텍스트 메뉴를 추가합니다.
-    if (isQuizEnabled || isDevMode) {
-        return [...getQuizContextOptions(editor, theme), ...baseOptions];
-    }
     return baseOptions;
 }
 export function ComponentPickerMenuPlugin(props) {

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

@@ -1,5 +1,5 @@
 import { Theme } from "@emotion/react";
-export declare function getTheme(theme: Theme): {
+export declare function getTheme(theme: Theme, editable: boolean): {
     paragraph: string;
     quote: string;
     coloredQuote: {
@@ -30,4 +30,6 @@ export declare function getTheme(theme: Theme): {
     };
     problemInput: string;
     problemSelect: string;
+    layoutContainer: string;
+    layoutItem: string | false;
 };

package/dist/patterns/LexicalEditor/theme.js

@@ -1,5 +1,5 @@
 import { css } from "@emotion/css";
-export function getTheme(theme) {
+export function getTheme(theme, editable) {
     return {
         paragraph: css `
       color: ${theme.color.foreground.neutralBase};
@@ -260,5 +260,13 @@ export function getTheme(theme) {
       gap: 4px;
       margin-bottom: 8px;
     `,
+        layoutContainer: css `
+      display: grid;
+      gap: 24px;
+    `,
+        layoutItem: editable &&
+            css `
+        border: 1px dashed ${theme.color.background.neutralAltActive};
+      `,
     };
 }

package/package.json

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