@team-monolith/cds 1.8.3 → 1.8.5

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormAnswer.d.ts

@@ -1,5 +1,5 @@
 import { Control } from "react-hook-form";
-import { ProblemInputPayload } from "../InputComponent";
+import { ProblemInputPayload } from "../ProblemInputNode";
 export interface FormAnswerProps {
     index: number;
     control: Control<ProblemInputPayload, any>;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormAnswer.js

@@ -11,7 +11,7 @@ import Tooltip from "../../../../../components/Tooltip";
 export function FormAnswer(props) {
     const { index, control, onDelete, disabled } = props;
     const theme = useTheme();
-    const TextTypeDropdown = (_jsx(Controller, { name: `answers.${index}.textType`, control: control, render: ({ field }) => (_jsx(Dropdown, Object.assign({ label: field.value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+    const TextTypeDropdown = (_jsx(Controller, { name: `answers.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
             ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
             > span {
               font-weight: 700;
@@ -25,14 +25,12 @@ export function FormAnswer(props) {
                     vertical: "top",
                     horizontal: "center",
                 },
-            } }, { children: field.value === "code" ? (_jsx(DropdownItem, { index: 0, label: "일반 텍스트", onClick: () => {
-                    field.onChange("normal");
-                } })) : (_jsx(DropdownItem, { index: 0, label: "코드 텍스트", onClick: () => {
-                    field.onChange("code");
-                } })) }))) }));
+            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
+                    onChange(value === "normal" ? "code" : "normal");
+                } }) }))) }));
     return (_jsx(Controller, { name: `answers.${index}.value`, control: control, rules: {
             required: "정답을 입력해주세요.",
-        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
+        }, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
             > div {
               padding: 4px 12px;
             }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormCharacterCount.d.ts

@@ -1,6 +1,6 @@
 import { Control } from "react-hook-form";
-import { ProblemInputPayload } from "../InputComponent";
 import React from "react";
+import { ProblemInputPayload } from "../ProblemInputNode";
 export interface FormCharacterCountProps {
     control: Control<ProblemInputPayload, any>;
     setMultiAnswerDisabled: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormPlaceholder.d.ts

@@ -1,5 +1,5 @@
 import { Control } from "react-hook-form";
-import { ProblemInputPayload } from "../InputComponent";
+import { ProblemInputPayload } from "../ProblemInputNode";
 export interface FormPlaceholderProps {
     control: Control<ProblemInputPayload, any>;
 }

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.d.ts

@@ -1,17 +1,9 @@
-import { NodeKey, SerializedLexicalNode, Spread } from "lexical";
-import { ProblemInputNode } from "./ProblemInputNode";
-export interface Answer {
-    textType: "normal" | "code";
-    value: string;
-    destroyed?: boolean;
-}
-export interface ProblemInputPayload {
-    key?: NodeKey;
+import { Answer } from "./ProblemInputNode";
+import { NodeKey } from "lexical";
+export declare function InputComponent(props: {
     answers: Answer[];
     showCharacterCount: boolean;
     placeholder: string;
-}
-export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
-export declare function InputComponent(props: {
-    node: ProblemInputNode;
+    response: string;
+    nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -12,26 +12,23 @@ import Button from "../../../../components/Button";
 import Tooltip from "../../../../components/Tooltip";
 import { FormAnswer, FormCharacterCount, FormPlaceholder } from "./Form";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { $isProblemInputNode, } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNodeByKey } from "lexical";
 export function InputComponent(props) {
-    var _a;
     const theme = useTheme();
-    const { node } = props;
+    const { answers, showCharacterCount, placeholder, response, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
-    const answers = node.getAnswers();
-    const showCharacterCount = node.getShowCharacterCount();
-    const placeholder = node.getPlaceholder();
     const [settingOpen, setSettingOpen] = useState(false);
     const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
     const isEditable = useLexicalEditable();
-    const { control, handleSubmit, getValues } = useForm({
+    const { control, handleSubmit } = useForm({
         defaultValues: {
             answers,
             showCharacterCount,
             placeholder,
         },
     });
-    // TODO: 읽기전용 모드(학생 view)에서 문제 제출 api를 추가해야 합니다.
     const { fields, append, remove, update } = useFieldArray({
         control,
         name: "answers",
@@ -39,26 +36,39 @@ export function InputComponent(props) {
     });
     const onSettingSubmit = (data) => {
         editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isProblemInputNode(node)) {
+                return;
+            }
             node.setAnswers(data.answers);
             node.setShowCharacterCount(data.showCharacterCount);
             node.setPlaceholder(data.placeholder);
         });
         setSettingOpen(false);
     };
-    // TODO: 읽기전용 모드(학생 view)에서 문제 제출 api를 추가 후 수정해야 합니다.
-    const [answerInput, setAnswerInput] = useState("");
+    // 학생 view
+    // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: (_a = getValues("placeholder")) !== null && _a !== void 0 ? _a : "주관식 입력 칸", value: answerInput, onChange: (e) => {
-                setAnswerInput(e.target.value);
+        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: response, onChange: (e) => {
+                editor.update(() => {
+                    const node = $getNodeByKey(nodeKey);
+                    if (!$isProblemInputNode(node)) {
+                        return;
+                    }
+                    node.setResponse(e.target.value);
+                });
             }, color: "default", css: css `
           width: 300px;
         ` }));
     }
+    // 교사 edit view
     return (_jsxs(Suspense, Object.assign({ fallback: null }, { children: [_jsxs("div", Object.assign({ css: css `
           display: flex;
           align-items: center;
           gap: 4px;
-        ` }, { children: [_jsx(Input, { size: "small", placeholder: "주관식 입력 칸", defaultValue: "", color: "default", css: css `
+        ` }, { children: [_jsx(Input, { size: "small", placeholder: "주관식 입력 칸", value: "", onChange: () => {
+                            // 수정모드에서는 입력칸 수정을 허용하지 않습니다.
+                        }, color: "default", css: css `
             width: 300px;
           ` }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);

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

@@ -1,24 +1,43 @@
-import { DecoratorNode, EditorConfig, LexicalNode, NodeKey } from "lexical";
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
-import { Answer, ProblemInputPayload, SerializedProblemInputNode } from "./InputComponent";
+export interface Answer {
+    textType: "normal" | "code";
+    value: string;
+    destroyed?: boolean;
+}
+export interface ProblemInputPayload {
+    showCharacterCount: boolean;
+    placeholder: string;
+    answers: Answer[];
+    response: string;
+    key?: NodeKey;
+}
+export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
+/**
+ * answers는 Answer타입의 배열로서 정답을 담고 있습니다. (교사용)
+ * response는 학생이 입력한 답을 담고 있습니다.(학생용)
+ */
 export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     __answers: Answer[];
     __showCharacterCount: boolean;
     __placeholder: string;
+    __response: string;
     static getType(): string;
     getAnswers(): Answer[];
     getShowCharacterCount(): boolean;
     getPlaceholder(): string;
+    getResponse(): string;
     setAnswers(answers: Answer[]): void;
     setShowCharacterCount(showCharacterCount: boolean): void;
     setPlaceholder(placeholder: string): void;
+    setResponse(response: string): void;
     static clone(node: ProblemInputNode): ProblemInputNode;
-    constructor(answers: Answer[], showCharacterCount: boolean, placeholder: string, key?: NodeKey);
+    constructor(showCharacterCount: boolean, placeholder: string, answers: Answer[], response: string, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemInputNode): ProblemInputNode;
     exportJSON(): SerializedProblemInputNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemInputNode({ key, answers, showCharacterCount, placeholder, }: ProblemInputPayload): ProblemInputNode;
+export declare function $createProblemInputNode({ showCharacterCount, placeholder, answers, response, key, }: ProblemInputPayload): ProblemInputNode;
 export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { $applyNodeReplacement, DecoratorNode, } from "lexical";
 import { addClassNamesToElement } from "@lexical/utils";
-import { InputComponent, } from "./InputComponent";
+import { InputComponent } from "./InputComponent";
+/**
+ * answers는 Answer타입의 배열로서 정답을 담고 있습니다. (교사용)
+ * response는 학생이 입력한 답을 담고 있습니다.(학생용)
+ */
 export class ProblemInputNode extends DecoratorNode {
     static getType() {
         return "problem-input";
@@ -15,6 +19,9 @@ export class ProblemInputNode extends DecoratorNode {
     getPlaceholder() {
         return this.__placeholder;
     }
+    getResponse() {
+        return this.__response;
+    }
     setAnswers(answers) {
         const self = this.getWritable();
         self.__answers = answers;
@@ -27,19 +34,25 @@ export class ProblemInputNode extends DecoratorNode {
         const self = this.getWritable();
         self.__placeholder = placeholder;
     }
+    setResponse(response) {
+        const self = this.getWritable();
+        self.__response = response;
+    }
     static clone(node) {
         return $createProblemInputNode({
-            key: node.__key,
-            answers: node.__answers,
             showCharacterCount: node.__showCharacterCount,
             placeholder: node.__placeholder,
+            answers: node.__answers,
+            response: node.__response,
+            key: node.__key,
         });
     }
-    constructor(answers, showCharacterCount, placeholder, key) {
+    constructor(showCharacterCount, placeholder, answers, response, key) {
         super(key);
         this.__answers = answers;
         this.__showCharacterCount = showCharacterCount;
         this.__placeholder = placeholder;
+        this.__response = response;
     }
     createDOM(config) {
         // Define the DOM element here
@@ -56,6 +69,7 @@ export class ProblemInputNode extends DecoratorNode {
             answers: serializedNode.answers,
             showCharacterCount: serializedNode.showCharacterCount,
             placeholder: serializedNode.placeholder,
+            response: serializedNode.response,
         });
         return node;
     }
@@ -63,20 +77,18 @@ export class ProblemInputNode extends DecoratorNode {
         return {
             version: 1,
             type: "problem-input",
-            answers: this.__answers,
             showCharacterCount: this.__showCharacterCount,
             placeholder: this.__placeholder,
+            answers: this.__answers,
+            response: this.__response,
         };
     }
-    // TODO: 이 노드의 selected가 제대로 동작하지 않습니다.
-    // nodeKey를 전달하고 getNodeByKey로 노드를 찾는 것이 일반적이나
-    // 현재 이 노드가 selected가 제대로 동작하지 않아서 노드를 직접 전달했습니다.
     decorate() {
-        return _jsx(InputComponent, { node: this });
+        return (_jsx(InputComponent, { answers: this.__answers, showCharacterCount: this.__showCharacterCount, placeholder: this.__placeholder, response: this.__response, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemInputNode({ key, answers, showCharacterCount, placeholder, }) {
-    return $applyNodeReplacement(new ProblemInputNode(answers, showCharacterCount, placeholder, key));
+export function $createProblemInputNode({ showCharacterCount, placeholder, answers, response, key, }) {
+    return $applyNodeReplacement(new ProblemInputNode(showCharacterCount, placeholder, answers, response, key));
 }
 export function $isProblemInputNode(node) {
     return node instanceof ProblemInputNode;

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

@@ -79,6 +79,7 @@ function getQuizContextOptions(editor, theme) {
                 ],
                 showCharacterCount: false,
                 placeholder: "",
+                response: "",
             }),
         }),
         new ComponentPickerOption("객관식 입력 칸", {

package/package.json

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