@team-monolith/cds 1.8.3 → 1.8.4

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/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,4 @@
-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;
-    answers: Answer[];
-    showCharacterCount: boolean;
-    placeholder: string;
-}
-export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedLexicalNode>;
 export declare function InputComponent(props: {
     node: ProblemInputNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -14,24 +14,23 @@ import { FormAnswer, FormCharacterCount, FormPlaceholder } from "./Form";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 export function InputComponent(props) {
-    var _a;
     const theme = useTheme();
     const { node } = props;
     const [editor] = useLexicalComposerContext();
     const answers = node.getAnswers();
     const showCharacterCount = node.getShowCharacterCount();
     const placeholder = node.getPlaceholder();
+    const response = node.getResponse();
     const [settingOpen, setSettingOpen] = useState(false);
     const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
     const isEditable = useLexicalEditable();
     const { control, handleSubmit, getValues } = useForm({
         defaultValues: {
-            answers,
+            answers: answers !== null && answers !== void 0 ? answers : [],
             showCharacterCount,
             placeholder,
         },
     });
-    // TODO: 읽기전용 모드(학생 view)에서 문제 제출 api를 추가해야 합니다.
     const { fields, append, remove, update } = useFieldArray({
         control,
         name: "answers",
@@ -45,20 +44,24 @@ export function InputComponent(props) {
         });
         setSettingOpen(false);
     };
-    // TODO: 읽기전용 모드(학생 view)에서 문제 제출 api를 추가 후 수정해야 합니다.
-    const [answerInput, setAnswerInput] = useState("");
+    // 학생 view
     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: getValues("placeholder") || "여기에 입력하세요.", value: response, onChange: (e) => {
+                editor.update(() => {
+                    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,9 +77,10 @@ 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가 제대로 동작하지 않습니다.
@@ -75,8 +90,8 @@ export class ProblemInputNode extends DecoratorNode {
         return _jsx(InputComponent, { node: this });
     }
 }
-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.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,