@team-monolith/cds 1.9.7 → 1.9.9

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

@@ -38,30 +38,19 @@ export function InputComponent(props) {
             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);
-                        });
-                    },
-                    onKeyPress: (e) => {
-                        if (e.key === "Enter") {
-                            editor.update(() => {
-                                const node = $getNodeByKey(nodeKey);
-                                if (!$isProblemInputNode(node)) {
-                                    return;
-                                }
-                                node.setAnswer(answerInput);
-                            });
+            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+                    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+                    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+                    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+                    // 문제를 더 파악하고 추후 개선 필요.
+                    setAnswerInput(e.target.value);
+                    editor.update(() => {
+                        const node = $getNodeByKey(nodeKey);
+                        if (!$isProblemInputNode(node)) {
+                            return;
                         }
-                    },
+                        node.setAnswer(e.target.value);
+                    });
                 }, color: "default", fullWidth: true }));
         }
     }

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

@@ -1,11 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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 { $isProblemSelectNode } from "./ProblemSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 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";
@@ -14,36 +24,21 @@ import SettingForm from "./SettingForm";
 import styled from "@emotion/styled";
 import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function SelectComponent(props) {
-    const { selections, selected, hasMultipleAnswers, nodeKey } = props;
+    const { selected, hasMultipleAnswers } = props, settingFormProps = __rest(props, ["selected", "hasMultipleAnswers"]);
+    const { selections, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
-    const { control, handleSubmit } = useForm({
-        mode: "all",
-        defaultValues: {
-            selections,
-            selected,
-        },
-    });
-    const { fields, append, remove, update } = useFieldArray({
-        control,
-        name: "selections",
-        keyName: "uid",
-    });
     const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     if (!isEditable) {
-        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);
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
+                        if (lexicalCustomConfig.freezeProblemNode)
+                            return;
+                        const isSelected = selected.includes(selection.value);
                         if (isSelected) {
                             editor.update(() => {
                                 const node = $getNodeByKey(nodeKey);
@@ -51,7 +46,7 @@ export function SelectComponent(props) {
                                     return;
                                 }
                                 const newSelected = [...selected];
-                                const index = newSelected.indexOf(field.value);
+                                const index = newSelected.indexOf(selection.value);
                                 newSelected.splice(index, 1);
                                 node.setSelected(newSelected);
                             });
@@ -63,7 +58,7 @@ export function SelectComponent(props) {
                                     return;
                                 }
                                 const newSelected = [...selected];
-                                newSelected.push(field.value);
+                                newSelected.push(selection.value);
                                 node.setSelected(newSelected);
                             });
                         }
@@ -77,9 +72,9 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: field.isAnswer, image: field.show.image, text: field.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
-                        } })] })), settingOpen && (_jsx(SettingForm, { control: control, handleSubmit: handleSubmit, fields: fields, append: append, remove: remove, update: update, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+                        } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
 }
 const Alert = styled.div(({ theme }) => css `
     display: flex;

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

@@ -1,10 +1,16 @@
-import { ProblemSelectPayload } from "../ProblemSelectNode";
+import { Selection } from "../ProblemSelectNode";
 import { Control, FieldArrayWithId, UseFieldArrayUpdate } from "react-hook-form";
 export interface FormSelectionProps {
     index: number;
-    control: Control<ProblemSelectPayload, any>;
-    field: FieldArrayWithId<ProblemSelectPayload, "selections", "uid">;
-    update: UseFieldArrayUpdate<ProblemSelectPayload, "selections">;
+    control: Control<{
+        selections: Selection[];
+    }, any>;
+    field: FieldArrayWithId<{
+        selections: Selection[];
+    }, "selections", "uid">;
+    update: UseFieldArrayUpdate<{
+        selections: Selection[];
+    }, "selections">;
     rules?: any;
     onDelete?: () => void;
 }

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

@@ -40,7 +40,6 @@ export function FormSelection(props) {
                                         },
                                         onBlur: (_e) => {
                                             setInputFocused(false);
-                                            // onBlur시에 선택지 미리보기에 반영합니다.
                                             update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { text: value }) }));
                                         },
                                     }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
@@ -54,7 +53,6 @@ export function FormSelection(props) {
                                     setImageOpen(true);
                                 } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
                                         onChange(!value);
-                                        // 선택지 미리보기에 정답여부를 반영합니다.
                                         update(index, Object.assign(Object.assign({}, field), { isAnswer: !value }));
                                     } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: value, size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] })] }));
 }

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

@@ -1,14 +1,7 @@
-/** @jsxImportSource @emotion/react */
-import { Control, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFieldArrayUpdate, UseFormHandleSubmit } from "react-hook-form";
-import { ProblemSelectPayload } from "../ProblemSelectNode";
+import { Selection } from "../ProblemSelectNode";
 import { NodeKey } from "lexical";
 export interface SettingFormProps {
-    control: Control<ProblemSelectPayload, any>;
-    handleSubmit: UseFormHandleSubmit<ProblemSelectPayload, undefined>;
-    fields: FieldArrayWithId<ProblemSelectPayload, "selections", "uid">[];
-    append: UseFieldArrayAppend<ProblemSelectPayload, "selections">;
-    remove: UseFieldArrayRemove;
-    update: UseFieldArrayUpdate<ProblemSelectPayload, "selections">;
+    selections: Selection[];
     nodeKey: NodeKey;
     onClose: () => void;
 }

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

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { $isProblemSelectNode, } from "../ProblemSelectNode";
+/** @jsxImportSource @emotion/react */
+import { useFieldArray, useForm, } from "react-hook-form";
+import { $isProblemSelectNode } from "../ProblemSelectNode";
 import { $getNodeByKey } from "lexical";
 import { css } from "@emotion/react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
@@ -11,9 +13,20 @@ import { FormSelection } from "./FormSelection";
 import Tooltip from "../../../../../components/Tooltip";
 import { useState } from "react";
 export default function SettingForm(props) {
-    const { control, handleSubmit, fields, append, remove, update, nodeKey, onClose, } = props;
+    const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            selections,
+        },
+    });
+    const { fields, append, remove, update } = useFieldArray({
+        control,
+        name: "selections",
+        keyName: "uid",
+    });
     const onSettingSubmit = (data) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);

package/package.json

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