@team-monolith/cds 1.9.4 → 1.9.6

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

@@ -2,6 +2,7 @@
 import { SerializedEditorState, SerializedLexicalNode } from "lexical";
 export interface LexicalEditorProps {
     className?: string;
+    contentEditableClassName?: string;
     value?: any;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
     /** editable. 수정 모드 / 읽기 모드 여부

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -30,7 +30,7 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, value, onChange, editable = true, freezeProblemNode, children, } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -63,5 +63,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    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, onChange: onChange }), _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 }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -6,6 +6,7 @@ import { ReactElement } from "react";
 import { SerializedEditorState, SerializedLexicalNode } from "lexical";
 export interface PluginsProps {
     className?: string;
+    contentEditableClassName?: string;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
 }
 export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -30,7 +30,7 @@ import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
 import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 export default function Plugins(props) {
-    const { className, onChange } = props;
+    const { className, contentEditableClassName, onChange } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -39,7 +39,7 @@ export default function Plugins(props) {
             setFloatingAnchorElem(_floatingAnchorElem);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { className: contentEditableClassName, isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.

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

@@ -22,7 +22,7 @@ import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
-import { LexicalCustomConfigContext, } from "../../LexicalCustomConfigContext";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
     const { placeholder, nodeKey } = settingFormProps;

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

@@ -15,6 +15,7 @@ export interface Selection {
 export interface ProblemSelectPayload {
     selections: Selection[];
     selected: string[];
+    hasMultipleAnswers?: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
@@ -25,6 +26,7 @@ export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, Serialize
 export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     __selections: Selection[];
     __selected: string[];
+    __hasMultipleAnswers: boolean | undefined;
     isInline(): boolean;
     static getType(): string;
     getSelections(): Selection[];
@@ -32,12 +34,12 @@ export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     setSolutions(selections: Selection[]): void;
     setSelected(selected: string[]): void;
     static clone(node: ProblemSelectNode): ProblemSelectNode;
-    constructor(selections: Selection[], selected: string[], key?: NodeKey);
+    constructor(selections: Selection[], selected: string[], hasMultipleAnswers?: boolean, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemSelectNode): ProblemSelectNode;
     exportJSON(): SerializedProblemSelectNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemSelectNode({ selections, selected, key, }: ProblemSelectPayload): ProblemSelectNode;
+export declare function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }: ProblemSelectPayload): ProblemSelectNode;
 export declare function $isProblemSelectNode(node: LexicalNode | null | undefined): node is ProblemSelectNode;

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

@@ -28,12 +28,13 @@ export class ProblemSelectNode extends DecoratorNode {
         self.__selected = selected;
     }
     static clone(node) {
-        return new ProblemSelectNode(node.__selections, node.__selected, node.__key);
+        return new ProblemSelectNode(node.__selections, node.__selected, node.__hasMultipleAnswers, node.__key);
     }
-    constructor(selections, selected, key) {
+    constructor(selections, selected, hasMultipleAnswers, key) {
         super(key);
         this.__selections = selections;
         this.__selected = selected;
+        this.__hasMultipleAnswers = hasMultipleAnswers;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -49,6 +50,7 @@ export class ProblemSelectNode extends DecoratorNode {
             key: serializedNode.key,
             selections: serializedNode.selections,
             selected: serializedNode.selected,
+            hasMultipleAnswers: serializedNode.hasMultipleAnswers,
         });
         return node;
     }
@@ -61,11 +63,11 @@ export class ProblemSelectNode extends DecoratorNode {
         };
     }
     decorate() {
-        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, nodeKey: this.getKey() }));
+        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, hasMultipleAnswers: this.__hasMultipleAnswers, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemSelectNode({ selections, selected, key, }) {
-    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, key));
+export function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }) {
+    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, hasMultipleAnswers, key));
 }
 export function $isProblemSelectNode(node) {
     return node instanceof ProblemSelectNode;

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

@@ -5,7 +5,7 @@ export interface SelectBoxProps {
     isAnswer?: boolean;
     image?: ImageProps;
     text: string;
-    onClick: () => void;
+    onClick?: () => void;
     fullWidth?: boolean;
 }
 export default function SelectBox(props: SelectBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -4,5 +4,6 @@ import { Selection } from "./ProblemSelectNode";
 export declare function SelectComponent(props: {
     selections: Selection[];
     selected: string[];
+    hasMultipleAnswers?: boolean;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,20 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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 { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { useFieldArray, useForm } from "react-hook-form";
 import SelectBox from "./SelectBox";
 import { css } from "@emotion/react";
 import SquareButton from "../../../../components/SquareButton";
-import { Settings3FillIcon } from "../../../../icons";
+import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../icons";
 import SettingForm from "./SettingForm";
+import styled from "@emotion/styled";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function SelectComponent(props) {
-    const { selections, selected, nodeKey } = props;
+    const { selections, selected, hasMultipleAnswers, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
@@ -28,34 +30,44 @@ export function SelectComponent(props) {
         name: "selections",
         keyName: "uid",
     });
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     if (!isEditable) {
-        return (_jsx(_Fragment, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, onClick: () => {
-                    const isSelected = selected.includes(field.value);
-                    if (isSelected) {
-                        editor.update(() => {
-                            const node = $getNodeByKey(nodeKey);
-                            if (!$isProblemSelectNode(node)) {
-                                return;
-                            }
-                            const newSelected = [...selected];
-                            const index = newSelected.indexOf(field.value);
-                            newSelected.splice(index, 1);
-                            node.setSelected(newSelected);
-                        });
-                    }
-                    else {
-                        editor.update(() => {
-                            const node = $getNodeByKey(nodeKey);
-                            if (!$isProblemSelectNode(node)) {
-                                return;
-                            }
-                            const newSelected = [...selected];
-                            newSelected.push(field.value);
-                            node.setSelected(newSelected);
-                        });
-                    }
-                }, fullWidth: true }, index))) }));
+        if (lexicalCustomConfig.freezeProblemNode) {
+            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."] })), fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, fullWidth: true }, index)))] }));
+        }
+        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."] })), fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, onClick: () => {
+                        const isSelected = selected.includes(field.value);
+                        if (isSelected) {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                const newSelected = [...selected];
+                                const index = newSelected.indexOf(field.value);
+                                newSelected.splice(index, 1);
+                                node.setSelected(newSelected);
+                            });
+                        }
+                        else {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                const newSelected = [...selected];
+                                newSelected.push(field.value);
+                                node.setSelected(newSelected);
+                            });
+                        }
+                    }, fullWidth: true }, index)))] }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
@@ -69,3 +81,15 @@ export function SelectComponent(props) {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, { control: control, handleSubmit: handleSubmit, fields: fields, append: append, remove: remove, update: update, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    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/package.json

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