@team-monolith/cds 1.49.1 → 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

@@ -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

@@ -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,43 @@ 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 {
-            version: 1,
             type: "problem-select",
+            version: 1,
             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 $applyNodeReplacement(new ProblemSelectNode(selections, selected, hasMultipleSolutions, key));
+    }
+    else {
+        const { selections, selected, key } = payload;
+        return $applyNodeReplacement(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,22 @@ 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 ||
+        (hasMultipleSolutions === undefined &&
+            selections.filter((s) => "isAnswer" in s && s.isAnswer).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 +47,7 @@ export function SelectComponent(props) {
                                     if (!$isProblemSelectNode(node)) {
                                         return;
                                     }
-                                    if (hasMultipleAnswers) {
+                                    if (showMultipleSolutions) {
                                         node.setSelected([...selected, selection.value]);
                                     }
                                     else {
@@ -72,9 +65,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

@@ -100,7 +100,6 @@ function getQuizContextOptions(editor, theme) {
                         },
                     ],
                     selected: [],
-                    hasMultipleAnswers: false,
                 });
             },
         }),
@@ -197,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, {}),
@@ -206,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.1",
+  "version": "1.49.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,