@team-monolith/cds 1.11.2 → 1.12.0

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

@@ -15,7 +15,7 @@ export interface Selection {
 export interface ProblemSelectPayload {
     selections: Selection[];
     selected: string[];
-    hasMultipleAnswers?: boolean;
+    hasMultipleAnswers: boolean;
     key?: NodeKey;
 }
 export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
@@ -26,7 +26,7 @@ export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, Serialize
 export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     __selections: Selection[];
     __selected: string[];
-    __hasMultipleAnswers: boolean | undefined;
+    __hasMultipleAnswers: boolean;
     isInline(): boolean;
     static getType(): string;
     getSelections(): Selection[];
@@ -34,7 +34,7 @@ export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     setSelections(selections: Selection[]): void;
     setSelected(selected: string[]): void;
     static clone(node: ProblemSelectNode): ProblemSelectNode;
-    constructor(selections: Selection[], selected: string[], hasMultipleAnswers?: boolean, key?: NodeKey);
+    constructor(selections: Selection[], selected: string[], hasMultipleAnswers: boolean, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemSelectNode): ProblemSelectNode;

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

@@ -60,6 +60,7 @@ export class ProblemSelectNode extends DecoratorNode {
             type: "problem-select",
             selections: this.__selections,
             selected: this.__selected,
+            hasMultipleAnswers: this.__hasMultipleAnswers,
         };
     }
     decorate() {

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/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectComponent.d.ts

@@ -4,6 +4,6 @@ import { Selection } from "./ProblemSelectNode";
 export declare function SelectComponent(props: {
     selections: Selection[];
     selected: string[];
-    hasMultipleAnswers?: boolean;
+    hasMultipleAnswers: boolean;
     nodeKey: NodeKey;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -54,7 +54,12 @@ export function SelectComponent(props) {
                                 if (!$isProblemSelectNode(node)) {
                                     return;
                                 }
-                                node.setSelected([...selected, selection.value]);
+                                if (hasMultipleAnswers) {
+                                    node.setSelected([...selected, selection.value]);
+                                }
+                                else {
+                                    node.setSelected([selection.value]);
+                                }
                             });
                         }
                     }, fullWidth: true }, index)))] }));

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -99,6 +99,7 @@ function getQuizContextOptions(editor, theme) {
                         },
                     ],
                     selected: [],
+                    hasMultipleAnswers: false,
                 });
             },
         }),

package/package.json

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