@team-monolith/cds 1.9.3 → 1.9.5

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

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

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

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

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

@@ -8,6 +8,9 @@ export interface LexicalEditorProps {
      *  initialConfig에 전달되므로 마운트 된 이후 수정해도 반영되지 않음
      */
     editable?: boolean;
+    /** freeze. 문제 블록을 수정하지 못하도록 함
+     */
+    freezeProblemNode?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -11,6 +11,7 @@ import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
 import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
+import { LexicalCustomConfigContext } from "./LexicalCustomConfigContext";
 import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 function validateValue(value) {
     var _a, _b;
@@ -29,7 +30,7 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, value, onChange, editable = true, children } = props;
+    const { className, value, onChange, editable = true, freezeProblemNode, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
@@ -62,5 +63,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    return (_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, onChange: onChange }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import Input from "../../../../components/Input";
 import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
@@ -22,6 +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";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
     const { placeholder, nodeKey } = settingFormProps;
@@ -29,23 +30,29 @@ export function InputComponent(props) {
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     const [answerInput, setAnswerInput] = useState(answer);
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), 
-            // 한글 입력시에 onChange마다 update가 일어나는 것을 방지하기 위해 입력 완료후 onBlur시에 update하는 전략을 사용합니다.
-            // 이를 위해 answerInput을 state로 관리합니다.
-            inputProps: {
-                onBlur: (_e) => {
-                    editor.update(() => {
-                        const node = $getNodeByKey(nodeKey);
-                        if (!$isProblemInputNode(node)) {
-                            return;
-                        }
-                        node.setAnswer(answerInput);
-                    });
-                },
-            }, color: "default", fullWidth: true }));
+        if (lexicalCustomConfig.freezeProblemNode) {
+            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, color: "default", fullWidth: true, inputProps: { readOnly: true } }));
+        }
+        else {
+            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), 
+                // 한글 입력시에 onChange마다 update가 일어나는 것을 방지하기 위해 입력 완료후 onBlur시에 update하는 전략을 사용합니다.
+                // 이를 위해 answerInput을 state로 관리합니다.
+                inputProps: {
+                    onBlur: (_e) => {
+                        editor.update(() => {
+                            const node = $getNodeByKey(nodeKey);
+                            if (!$isProblemInputNode(node)) {
+                                return;
+                            }
+                            node.setAnswer(answerInput);
+                        });
+                    },
+                }, color: "default", fullWidth: true }));
+        }
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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/dist/patterns/LexicalEditor/plugins/ActionsPlugin/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 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 { ReactElement } from "react";
+export default function ActionsPlugin(): ReactElement;

package/dist/patterns/LexicalEditor/plugins/ActionsPlugin/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { mergeRegister } from "@lexical/utils";
+import { useEffect, useState } from "react";
+import { Button, LockFillIcon, LockUnlockFillIcon } from "../../../..";
+export default function ActionsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }));
+    }, [editor]);
+    return (_jsx(Button, { color: "primary", size: "small", startIcon: isEditable ? _jsx(LockFillIcon, {}) : _jsx(LockUnlockFillIcon, {}), onClick: () => {
+            editor.setEditable(!editor.isEditable());
+        }, title: "Read-Only Mode", label: `${!isEditable ? "수정 모드" : "읽기 모드"}로 변경`, "aria-label": `${!isEditable ? "Unlock" : "Lock"} read-only mode` }));
+}

package/package.json

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