@team-monolith/cds 1.11.0 → 1.11.1

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

@@ -30,6 +30,10 @@ export function InputComponent(props) {
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
+    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+    // 문제를 더 파악하고 추후 개선 필요.
     const [answerInput, setAnswerInput] = useState(answer);
     const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // "** ***" 같은 형태입니다.
@@ -37,22 +41,18 @@ export function InputComponent(props) {
     // 학생 view
     if (!isEditable) {
         if (showCharacterCount) {
-            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
-                    setAnswerInput(e.value);
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (value) => {
+                    setAnswerInput(value);
                     editor.update(() => {
                         const node = $getNodeByKey(nodeKey);
                         if (!$isProblemInputNode(node)) {
                             return;
                         }
-                        node.setAnswer(e.value);
+                        node.setAnswer(value);
                     });
                 } }));
         }
         return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
-                // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
-                // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
-                // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
-                // 문제를 더 파악하고 추후 개선 필요.
                 setAnswerInput(e.target.value);
                 editor.update(() => {
                     const node = $getNodeByKey(nodeKey);

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

@@ -1,12 +1,12 @@
-/// <reference types="react" />
 export interface SegmentedInputProps {
     readOnly: boolean;
     answerFormat: string;
     placeholder: string;
     value: string;
-    onChange: (e: {
-        value: string;
-        event: React.ChangeEvent<HTMLInputElement>;
-    }) => void;
+    onChange: (value: string) => void;
 }
+/**
+ *  SOT는 value이고, 그 value는 숨겨진 input에 작성됩니다.
+ *  그리고 그 value는 split되어 segmented input에 표시됩니다.
+ */
 export default function SegmentedInput(props: SegmentedInputProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -4,51 +4,75 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
 import { useRef, useState } from "react";
-/** i번째 값을 value로 바꾸는 setState Wrapper 함수  */
-function updateFocus(value, i, setFocus) {
-    setFocus((prevFocus) => {
-        const newFocus = prevFocus.slice();
-        newFocus[i] = value;
-        return newFocus;
-    });
+function getDiffIndex(short, long) {
+    for (let i = 0; i < short.length; i++) {
+        if (short[i] !== long[i]) {
+            return i;
+        }
+    }
+    return short.length;
 }
+/**
+ *  SOT는 value이고, 그 value는 숨겨진 input에 작성됩니다.
+ *  그리고 그 value는 split되어 segmented input에 표시됩니다.
+ */
 export default function SegmentedInput(props) {
     const { readOnly, answerFormat, placeholder, value, onChange } = props;
     // "** ***" => ["*", "*", " ", "*", "*", "*"]
     const splitedFormat = answerFormat.split("");
-    // "안녕 하세요" => ["안","녕"," ","하","세","요"]
-    const splitedValues = value.split("");
-    const [focus, setFocus] = useState([]);
-    const refs = useRef([]);
-    return (_jsxs(Container, { children: [_jsxs(InputWrapper, { children: [_jsx("div", Object.assign({ css: css `
+    // ["*", "*", " ", "*", "*", "*", " ", "*", "*"] => [2, 5]
+    const leftSpacedIndexs = splitedFormat.reduce((prev, curr, i) => (curr === " " ? [...prev, i - prev.length] : prev), []);
+    const despacedFormat = splitedFormat.filter((v) => v !== " ");
+    // "안녕 하세요" => ["안","녕","하","세","요"]
+    const splitedValues = value.split("").filter((v) => v !== " ");
+    const [focusedIndex, setFocusedIndex] = useState(null);
+    const hiddenRef = useRef(null);
+    return (_jsxs(Container, { children: [_jsx("input", { type: "input", ref: hiddenRef, value: splitedValues.join(""), readOnly: readOnly, onKeyDown: (e) => {
+                    if (e.key === "ArrowLeft") {
+                        if (focusedIndex === null || focusedIndex <= 0) {
+                            return;
+                        }
+                        else {
+                            setFocusedIndex(focusedIndex - 1);
+                        }
+                    }
+                    else if (e.key === "ArrowRight") {
+                        if (focusedIndex === null ||
+                            focusedIndex >= despacedFormat.length - 1) {
+                            return;
+                        }
+                        else {
+                            setFocusedIndex(focusedIndex + 1);
+                        }
+                    }
+                }, onChange: (event) => {
+                    const latestValue = splitedValues.join("");
+                    const eventValue = event.target.value;
+                    const diffIndex = getDiffIndex(latestValue, eventValue);
+                    onChange(eventValue);
+                    setFocusedIndex(diffIndex);
+                }, onBlur: (e) => {
+                    setFocusedIndex(null);
+                    const eventValue = e.target.value;
+                    if (eventValue.length > despacedFormat.length) {
+                        onChange(eventValue.slice(0, despacedFormat.length));
+                    }
+                }, css: css `
+          opacity: 0;
+          height: 0;
+        ` }), _jsxs(InputWrapper, { children: [_jsx("div", Object.assign({ css: css `
             display: flex;
             align-items: center;
             gap: 4px;
-          ` }, { children: splitedFormat.map((format, i) => format === " " ? (_jsx(Space, {}, i)) : (_jsx(SquareInput, { size: "small", color: focus[i] ? "activePrimary" : "default", inputRef: (element) => {
-                                refs.current[i] = element;
-                            }, inputProps: {
+          ` }, { children: despacedFormat.map((_format, i) => (_jsx(SquareInput, { leftSpaced: leftSpacedIndexs.includes(i), size: "small", color: focusedIndex === i ? "activePrimary" : "default", inputProps: {
                                 readOnly,
-                                onBlur: () => updateFocus(false, i, setFocus),
-                                onFocus: () => updateFocus(true, i, setFocus),
-                                onKeyDown: (e) => {
+                                onFocus: () => {
                                     var _a, _b;
-                                    // Backspace 키로 이전 input으로의 포커스 이동
-                                    if (e.key === "Backspace" && !splitedValues[i] && i > 0) {
-                                        if (splitedFormat[i - 1] === " ") {
-                                            (_a = refs.current[i - 2]) === null || _a === void 0 ? void 0 : _a.focus();
-                                            return;
-                                        }
-                                        (_b = refs.current[i - 1]) === null || _b === void 0 ? void 0 : _b.focus();
-                                    }
+                                    setFocusedIndex(i);
+                                    (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                    (_b = hiddenRef.current) === null || _b === void 0 ? void 0 : _b.setSelectionRange(i, i);
                                 },
-                            }, value: splitedValues[i] || "", onChange: (event) => {
-                                const eventValue = event.target.value;
-                                // 복붙으로 입력을 입력한 경우
-                                if (eventValue.length > 2) {
-                                    onChange({ value: value + eventValue, event });
-                                    return;
-                                }
-                            } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
+                            }, value: splitedValues[i] || "", onChange: () => { } }, i))) })), _jsx(InputMarker, {})] }), _jsx(Text, { children: placeholder })] }));
 }
 const Container = styled.div `
   display: flex;
@@ -64,18 +88,19 @@ const InputWrapper = styled.div `
   gap: 8px;
   margin: auto;
 `;
-const SquareInput = styled(InputBase) `
-  width: 36px;
-  height: 36px;
-  padding-left: 0;
-  padding-right: 0;
-  input {
-    text-align: center;
-  }
-`;
-const Space = styled.div `
-  width: 4px;
-`;
+const SquareInput = styled(InputBase)(({ leftSpaced }) => css `
+    width: 36px;
+    height: 36px;
+    padding-left: 0;
+    padding-right: 0;
+    input {
+      text-align: center;
+    }
+    ${leftSpaced &&
+    css `
+      margin-left: 8px;
+    `}
+  `);
 const InputMarker = styled.div(({ theme }) => css `
     height: 8px;
     border: 1px solid ${theme.color.background.neutralAltActive};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
-  "dependencies": { 
+  "dependencies": {
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
@@ -16,7 +16,7 @@
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.12.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0", 
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "remixicon": "^3.4.0",
     "typescript": "^4.5.5",