@team-monolith/cds 1.8.7 → 1.8.8

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

@@ -32,7 +32,10 @@ export function InputComponent(props) {
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), inputProps: {
+        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);

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

@@ -1,9 +1,9 @@
 import { Control } from "react-hook-form";
 import { ProblemInputPayload } from "../ProblemInputNode";
-export interface FormAnswerProps {
+export interface FormSolutionProps {
     index: number;
     control: Control<ProblemInputPayload, any>;
     rules?: any;
     onDelete?: () => void;
 }
-export declare function FormSolution(props: FormAnswerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FormSolution(props: FormSolutionProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -2,39 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import { Controller } from "react-hook-form";
-import Dropdown from "../../../../Dropdown";
-import DropdownItem from "../../../../Dropdown/DropdownItem";
 import Input from "../../../../../components/Input";
 import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../../../../icons";
 import SquareButton from "../../../../../components/SquareButton";
 import Tooltip from "../../../../../components/Tooltip";
+import TextTypeDropdown from "./TextTypeDropdown";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
-    const TextTypeDropdown = (disabled) => (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
-            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
-            > span {
-              font-weight: 700;
-            }
-          `, menuProps: {
-                anchorOrigin: {
-                    vertical: "bottom",
-                    horizontal: "center",
-                },
-                transformOrigin: {
-                    vertical: "top",
-                    horizontal: "center",
-                },
-            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
-                    onChange(value === "normal" ? "code" : "normal");
-                } }) }))) }));
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
-            const disabled = (error === null || error === void 0 ? void 0 : error.type) === "multiAnswerDisabled";
+            const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
             return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
               > div {
                 padding: 4px 12px;
               }
-            `, startIcon: TextTypeDropdown(disabled), endIcon: _jsxs("div", Object.assign({ css: css `
+            `, startIcon: _jsx(TextTypeDropdown, { index: index, control: control, disabled: disabled }), endIcon: _jsxs("div", Object.assign({ css: css `
                   display: flex;
                   gap: 4px;
                 ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true }) })))] })) }));

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

@@ -4,7 +4,7 @@ import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import shadows from "../../../../../foundation/shadows";
 import { AddFillIcon, AlarmWarningFillIcon, InputMethodLineIcon, QuestionFillIcon, } from "../../../../../icons";
-import { useFieldArray, useForm, } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { $isProblemInputNode, } from "../ProblemInputNode";
 import { FormSolution } from "./FormSolution";
 import Button from "../../../../../components/Button";
@@ -42,15 +42,15 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    const multiAnswerDisabled = watch("showCharacterCount");
+    const multipleSolutionsDisabled = watch("showCharacterCount");
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
           ` }), "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC815\uB2F5" }), fields.map((field, index) => (_jsx(FormSolution, { index: index, control: control, rules: {
                                             validate: {
                                                 // required 옵션보다 먼저 검증되어야 하는데 priority 옵션이 없어서 validate에서 통합해서 검증합니다.
-                                                multiAnswerDisabled: () => index === 0 ||
-                                                    !multiAnswerDisabled ||
+                                                enabled: () => index === 0 ||
+                                                    !multipleSolutionsDisabled ||
                                                     "복수 정답이 불가능합니다.",
                                                 required: (value) => value !== "" || "정답을 입력해주세요.",
                                             },
@@ -58,7 +58,7 @@ export default function SettingForm(props) {
                                             ? () => {
                                                 remove(index);
                                             }
-                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multiAnswerDisabled, onClick: () => {
+                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multipleSolutionsDisabled, onClick: () => {
                                     append({
                                         textType: "normal",
                                         value: "",

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

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { ProblemInputPayload } from "../ProblemInputNode";
+export default function TextTypeDropdown(props: {
+    index: number;
+    control: Control<ProblemInputPayload, any>;
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import Dropdown from "../../../../Dropdown";
+import { css, useTheme } from "@emotion/react";
+import DropdownItem from "../../../../Dropdown/DropdownItem";
+export default function TextTypeDropdown(props) {
+    const theme = useTheme();
+    const { index, control, disabled } = props;
+    return (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
+            > span {
+              font-weight: 700;
+            }
+          `, menuProps: {
+                anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "center",
+                },
+                transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                },
+            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
+                    onChange(value === "normal" ? "code" : "normal");
+                } }) }))) }));
+}

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

@@ -22,7 +22,7 @@ import ReactDOM, { createPortal } from "react-dom";
 import { LexicalNodeMenuPlugin } from "@lexical/react/LexicalNodeMenuPlugin";
 import { useDraggableBlockMenu } from "./useDraggableBlockMenu";
 import { css as cssToClassName } from "@emotion/css";
-import { ComponentPickerMenuList, getBaseOptions, ComponentDrawerOption, } from "../ComponentPickerMenuPlugin";
+import { ComponentPickerOption, ComponentPickerMenuList, getBaseOptions, ComponentDrawerOption, } from "../ComponentPickerMenuPlugin";
 import { useFloatingMenu } from "./useFloatingMenu";
 import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
@@ -137,7 +137,7 @@ export function ComponentAdderPlugin(props) {
             return true;
         }
         const regex = new RegExp(query, "i");
-        return (option.keywords &&
+        return (option instanceof ComponentPickerOption &&
             (regex.test(option.title) ||
                 option.keywords.some((keyword) => regex.test(keyword))));
     });

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.d.ts

@@ -13,8 +13,7 @@ import { Theme } from "@emotion/react";
 export declare class ComponentDrawerOption extends MenuOption {
     title: string;
     component: ReactElement;
-    keywords?: Array<string>;
-    constructor(title: string, component: ReactElement, keywords?: Array<string>);
+    constructor(title: string, component: ReactElement);
 }
 export declare class ComponentPickerOption extends MenuOption {
     title: string;

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

@@ -29,11 +29,10 @@ import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
 export class ComponentDrawerOption extends MenuOption {
-    constructor(title, component, keywords) {
+    constructor(title, component) {
         super(title);
         this.title = title;
         this.component = component;
-        this.keywords = keywords;
     }
 }
 export class ComponentPickerOption extends MenuOption {
@@ -205,7 +204,7 @@ export function ComponentPickerMenuPlugin() {
         const regex = new RegExp(queryString, "i");
         return [
             ...getDynamicOptions(editor, queryString),
-            ...baseOptions.filter((option) => option.keywords &&
+            ...baseOptions.filter((option) => option instanceof ComponentPickerOption &&
                 (regex.test(option.title) ||
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];

package/package.json

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