@team-monolith/cds 1.8.4 → 1.8.5

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/InputComponent.d.ts

@@ -1,4 +1,9 @@
-import { ProblemInputNode } from "./ProblemInputNode";
+import { Answer } from "./ProblemInputNode";
+import { NodeKey } from "lexical";
 export declare function InputComponent(props: {
-    node: ProblemInputNode;
+    answers: Answer[];
+    showCharacterCount: boolean;
+    placeholder: string;
+    response: string;
+    nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -12,21 +12,19 @@ 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) {
     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 response = node.getResponse();
     const [settingOpen, setSettingOpen] = useState(false);
     const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
     const isEditable = useLexicalEditable();
-    const { control, handleSubmit, getValues } = useForm({
+    const { control, handleSubmit } = useForm({
         defaultValues: {
-            answers: answers !== null && answers !== void 0 ? answers : [],
+            answers,
             showCharacterCount,
             placeholder,
         },
@@ -38,6 +36,10 @@ 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);
@@ -45,9 +47,14 @@ export function InputComponent(props) {
         setSettingOpen(false);
     };
     // 학생 view
+    // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: getValues("placeholder") || "여기에 입력하세요.", value: response, onChange: (e) => {
+        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 `

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

@@ -83,11 +83,8 @@ export class ProblemInputNode extends DecoratorNode {
             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({ showCharacterCount, placeholder, answers, response, key, }) {

package/package.json

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