@team-monolith/cds 1.11.1 → 1.11.3

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

@@ -2,7 +2,7 @@ import { Solution } from "./ProblemInputNode";
 import { NodeKey } from "lexical";
 export declare function InputComponent(props: {
     solutions: Solution[];
-    showCharacterCount: boolean;
+    showCharacterNumber: boolean;
     placeholder: string;
     answer: string;
     nodeKey: NodeKey;

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

@@ -26,7 +26,7 @@ import TextInput from "./TextInput";
 import SegmentedInput from "./SegmentedInput";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
-    const { solutions, showCharacterCount, placeholder, nodeKey } = settingFormProps;
+    const { solutions, showCharacterNumber, placeholder, nodeKey } = settingFormProps;
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
@@ -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 (showCharacterCount) {
-            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);
-                    });
-                } }));
+        if (showCharacterNumber) {
+            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/ProblemInputNode.d.ts

@@ -5,7 +5,7 @@ export interface Solution {
     value: string;
 }
 export interface ProblemInputPayload {
-    showCharacterCount: boolean;
+    showCharacterNumber: boolean;
     placeholder: string;
     solutions: Solution[];
     answer: string;
@@ -18,26 +18,26 @@ export type SerializedProblemInputNode = Spread<ProblemInputPayload, SerializedL
  */
 export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
     __solutions: Solution[];
-    __showCharacterCount: boolean;
+    __showCharacterNumber: boolean;
     __placeholder: string;
     __answer: string;
     isInline(): boolean;
     static getType(): string;
     getSolutions(): Solution[];
-    getShowCharacterCount(): boolean;
+    getShowCharacterNumber(): boolean;
     getPlaceholder(): string;
     getAnswer(): string;
     setSolutions(solutions: Solution[]): void;
-    setShowCharacterCount(showCharacterCount: boolean): void;
+    setShowCharacterNumber(showCharacterNumber: boolean): void;
     setPlaceholder(placeholder: string): void;
     setAnswer(answer: string): void;
     static clone(node: ProblemInputNode): ProblemInputNode;
-    constructor(showCharacterCount: boolean, placeholder: string, solutions: Solution[], answer: string, key?: NodeKey);
+    constructor(showCharacterNumber: boolean, placeholder: string, solutions: Solution[], answer: string, key?: NodeKey);
     createDOM(config: EditorConfig): HTMLElement;
     updateDOM(): boolean;
     static importJSON(serializedNode: SerializedProblemInputNode): ProblemInputNode;
     exportJSON(): SerializedProblemInputNode;
     decorate(): ReactNode;
 }
-export declare function $createProblemInputNode({ showCharacterCount, placeholder, solutions, answer, key, }: ProblemInputPayload): ProblemInputNode;
+export declare function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }: ProblemInputPayload): ProblemInputNode;
 export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -16,8 +16,8 @@ export class ProblemInputNode extends DecoratorNode {
     getSolutions() {
         return this.__solutions;
     }
-    getShowCharacterCount() {
-        return this.__showCharacterCount;
+    getShowCharacterNumber() {
+        return this.__showCharacterNumber;
     }
     getPlaceholder() {
         return this.__placeholder;
@@ -29,9 +29,9 @@ export class ProblemInputNode extends DecoratorNode {
         const self = this.getWritable();
         self.__solutions = solutions;
     }
-    setShowCharacterCount(showCharacterCount) {
+    setShowCharacterNumber(showCharacterNumber) {
         const self = this.getWritable();
-        self.__showCharacterCount = showCharacterCount;
+        self.__showCharacterNumber = showCharacterNumber;
     }
     setPlaceholder(placeholder) {
         const self = this.getWritable();
@@ -42,11 +42,11 @@ export class ProblemInputNode extends DecoratorNode {
         self.__answer = answer;
     }
     static clone(node) {
-        return new ProblemInputNode(node.__showCharacterCount, node.__placeholder, node.__solutions, node.__answer, node.__key);
+        return new ProblemInputNode(node.__showCharacterNumber, node.__placeholder, node.__solutions, node.__answer, node.__key);
     }
-    constructor(showCharacterCount, placeholder, solutions, answer, key) {
+    constructor(showCharacterNumber, placeholder, solutions, answer, key) {
         super(key);
-        this.__showCharacterCount = showCharacterCount;
+        this.__showCharacterNumber = showCharacterNumber;
         this.__placeholder = placeholder;
         this.__solutions = solutions;
         this.__answer = answer;
@@ -64,7 +64,7 @@ export class ProblemInputNode extends DecoratorNode {
         const node = $createProblemInputNode({
             key: serializedNode.key,
             solutions: serializedNode.solutions,
-            showCharacterCount: serializedNode.showCharacterCount,
+            showCharacterNumber: serializedNode.showCharacterNumber,
             placeholder: serializedNode.placeholder,
             answer: serializedNode.answer,
         });
@@ -74,18 +74,18 @@ export class ProblemInputNode extends DecoratorNode {
         return {
             version: 1,
             type: "problem-input",
-            showCharacterCount: this.__showCharacterCount,
+            showCharacterNumber: this.__showCharacterNumber,
             placeholder: this.__placeholder,
             solutions: this.__solutions,
             answer: this.__answer,
         };
     }
     decorate() {
-        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterCount: this.__showCharacterCount, placeholder: this.__placeholder, answer: this.__answer, nodeKey: this.getKey() }));
+        return (_jsx(InputComponent, { solutions: this.__solutions, showCharacterNumber: this.__showCharacterNumber, placeholder: this.__placeholder, answer: this.__answer, nodeKey: this.getKey() }));
     }
 }
-export function $createProblemInputNode({ showCharacterCount, placeholder, solutions, answer, key, }) {
-    return $applyNodeReplacement(new ProblemInputNode(showCharacterCount, placeholder, solutions, answer, key));
+export function $createProblemInputNode({ showCharacterNumber, placeholder, solutions, answer, key, }) {
+    return $applyNodeReplacement(new ProblemInputNode(showCharacterNumber, placeholder, solutions, answer, key));
 }
 export function $isProblemInputNode(node) {
     return node instanceof ProblemInputNode;

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/ProblemInputNode/SettingForm/{FormCharacterCount.d.ts → FormCharacterNumber.d.ts}

@@ -1,7 +1,7 @@
 import { Control, UseFormTrigger } from "react-hook-form";
 import { ProblemInputPayload } from "../ProblemInputNode";
-export interface FormCharacterCountProps {
+export interface FormCharacterNumberProps {
     control: Control<ProblemInputPayload, any>;
     trigger: UseFormTrigger<ProblemInputPayload>;
 }
-export declare function FormCharacterCount(props: FormCharacterCountProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormCharacterNumber(props: FormCharacterNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/{FormCharacterCount.js → FormCharacterNumber.js}

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
 import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../SegmentedControl";
-export function FormCharacterCount(props) {
+export function FormCharacterNumber(props) {
     const { control, trigger } = props;
-    return (_jsx(Controller, { name: "showCharacterCount", control: control, render: ({ field: { value, onChange } }) => {
+    return (_jsx(Controller, { name: "showCharacterNumber", control: control, render: ({ field: { value, onChange } }) => {
             return (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value.toString(), onChange: (value) => {
                     onChange(value === "true");
                     trigger("solutions");

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

@@ -2,7 +2,7 @@ import { Solution } from "../ProblemInputNode";
 import { NodeKey } from "lexical";
 export interface SettingFormProps {
     solutions: Solution[];
-    showCharacterCount: boolean;
+    showCharacterNumber: boolean;
     placeholder: string;
     nodeKey: NodeKey;
     onClose: () => void;

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

@@ -9,18 +9,18 @@ import { $isProblemInputNode, } from "../ProblemInputNode";
 import { FormSolution } from "./FormSolution";
 import Button from "../../../../../components/Button";
 import Tooltip from "../../../../../components/Tooltip";
-import { FormCharacterCount } from "./FormCharacterCount";
+import { FormCharacterNumber } from "./FormCharacterNumber";
 import { FormPlaceholder } from "./FormPlaceholder";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
 export default function SettingForm(props) {
-    const { solutions, showCharacterCount, placeholder, nodeKey, onClose } = props;
+    const { solutions, showCharacterNumber, placeholder, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const { control, handleSubmit, watch, trigger } = useForm({
         mode: "all",
         defaultValues: {
             solutions,
-            showCharacterCount,
+            showCharacterNumber,
             placeholder,
         },
     });
@@ -37,12 +37,12 @@ export default function SettingForm(props) {
                 return;
             }
             node.setSolutions(data.solutions);
-            node.setShowCharacterCount(data.showCharacterCount);
+            node.setShowCharacterNumber(data.showCharacterNumber);
             node.setPlaceholder(data.placeholder);
         });
         onClose();
     };
-    const multipleSolutionsDisabled = watch("showCharacterCount");
+    const multipleSolutionsDisabled = watch("showCharacterNumber");
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
@@ -72,7 +72,7 @@ export default function SettingForm(props) {
               ` }), _jsxs(Label, { children: ["\uB744\uC5B4\uC4F0\uAE30, \uC54C\uD30C\uBCB3\uC758 \uB300\uC18C\uBB38\uC790 \uAD6C\uBD84\uAE4C\uC9C0 \uC77C\uCE58\uD574\uC57C \uC815\uB2F5\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.", _jsx("br", {}), "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694."] })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0", _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), "\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4."] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
-                  ` }) }))] }), _jsx(FormCharacterCount, { control: control, trigger: trigger })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                  ` }) }))] }), _jsx(FormCharacterNumber, { control: control, trigger: trigger })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
                     width: 12px;
                     height: 12px;
                   ` }) }))] }), _jsx(FormPlaceholder, { control: control })] })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })));

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/index.d.ts

@@ -1,4 +1,4 @@
 export * from "./FormSolution";
-export * from "./FormCharacterCount";
+export * from "./FormCharacterNumber";
 export * from "./FormPlaceholder";
 export { default } from "./SettingForm";

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

@@ -1,4 +1,4 @@
 export * from "./FormSolution";
-export * from "./FormCharacterCount";
+export * from "./FormCharacterNumber";
 export * from "./FormPlaceholder";
 export { default } from "./SettingForm";

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/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -78,7 +78,7 @@ function getQuizContextOptions(editor, theme) {
                         value: "",
                     },
                 ],
-                showCharacterCount: false,
+                showCharacterNumber: false,
                 placeholder: "",
                 answer: "",
             }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,
@@ -12,7 +12,7 @@
     "@mui/material": "^5.13.6",
     "@types/node": "^16.11.26",
     "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13", 
+    "@types/react-dom": "^18.2.13",
     "hex-to-css-filter": "^5.4.0",
     "lexical": "^0.12.4",
     "react": "^18.2.0",