@team-monolith/cds 1.11.2 → 1.11.3

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

@@ -38,29 +38,23 @@ export function InputComponent(props) {
     const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // "** ***" 같은 형태입니다.
     const answerFormat = solutions[0].value;
+    const handleChange = (value) => {
+        setAnswerInput(value);
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isProblemInputNode(node)) {
+                return;
+            }
+            node.setAnswer(value);
+        });
+    };
     // 학생 view
     if (!isEditable) {
         if (showCharacterNumber) {
-            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(value);
-                    });
-                } }));
+            return (_jsx(SegmentedInput, { readOnly: lexicalCustomConfig.freezeProblemNode, answerFormat: answerFormat, placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: handleChange }));
         }
         return (_jsx(TextInput, { readOnly: lexicalCustomConfig.freezeProblemNode, size: "small", color: "default", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
-                setAnswerInput(e.target.value);
-                editor.update(() => {
-                    const node = $getNodeByKey(nodeKey);
-                    if (!$isProblemInputNode(node)) {
-                        return;
-                    }
-                    node.setAnswer(e.target.value);
-                });
+                handleChange(e.target.value);
             }, fullWidth: true }));
     }
     // 교사 edit view

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

@@ -4,14 +4,6 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { InputBase } from "../../../../components/InputBase";
 import { useRef, useState } from "react";
-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에 표시됩니다.
@@ -29,28 +21,21 @@ export default function SegmentedInput(props) {
     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 {
+                        if (focusedIndex !== null && focusedIndex > 0) {
                             setFocusedIndex(focusedIndex - 1);
                         }
                     }
                     else if (e.key === "ArrowRight") {
-                        if (focusedIndex === null ||
-                            focusedIndex >= despacedFormat.length - 1) {
-                            return;
-                        }
-                        else {
+                        if (focusedIndex !== null &&
+                            focusedIndex < despacedFormat.length - 1) {
                             setFocusedIndex(focusedIndex + 1);
                         }
                     }
                 }, onChange: (event) => {
-                    const latestValue = splitedValues.join("");
-                    const eventValue = event.target.value;
-                    const diffIndex = getDiffIndex(latestValue, eventValue);
-                    onChange(eventValue);
-                    setFocusedIndex(diffIndex);
+                    var _a;
+                    onChange(event.target.value);
+                    const selectionStart = (_a = hiddenRef.current) === null || _a === void 0 ? void 0 : _a.selectionStart;
+                    setFocusedIndex(selectionStart ? selectionStart - 1 : null);
                 }, onBlur: (e) => {
                     setFocusedIndex(null);
                     const eventValue = e.target.value;
@@ -68,6 +53,8 @@ export default function SegmentedInput(props) {
                                 readOnly,
                                 onFocus: () => {
                                     var _a, _b;
+                                    if (readOnly)
+                                        return;
                                     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);

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

@@ -44,9 +44,7 @@ const Index = styled.div(({ theme, isSelected }) => css `
     width: 20px;
     height: 20px;
     padding: 4px;
-    // https://www.w3schools.com/howto/howto_css_disable_text_selection.asp
-    -webkit-user-select: none; /* Safari */
-    -ms-user-select: none; /* IE 10 and IE 11 */
+
     user-select: none; /* Standard syntax */
 
     justify-content: center;

package/package.json

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