@team-monolith/cds 1.8.6 → 1.8.8

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

@@ -19,7 +19,7 @@ import { Settings3FillIcon } from "../../../../icons";
 import styled from "@emotion/styled";
 import SettingForm from "./SettingForm";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
-import { $isProblemInputNode, } from "./ProblemInputNode";
+import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
 export function InputComponent(props) {
@@ -28,20 +28,24 @@ export function InputComponent(props) {
     const [editor] = useLexicalComposerContext();
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
+    const [answerInput, setAnswerInput] = useState(answer);
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answer, onChange: (e) => {
-                editor.update(() => {
-                    const node = $getNodeByKey(nodeKey);
-                    if (!$isProblemInputNode(node)) {
-                        return;
-                    }
-                    node.setAnswer(e.target.value);
-                });
-            }, color: "default", css: css `
-          width: 300px;
-        ` }));
+        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);
+                        if (!$isProblemInputNode(node)) {
+                            return;
+                        }
+                        node.setAnswer(answerInput);
+                    });
+                },
+            }, color: "default", fullWidth: true }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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

@@ -3,7 +3,6 @@ import { ReactNode } from "react";
 export interface Solution {
     textType: "normal" | "code";
     value: string;
-    destroyed?: boolean;
 }
 export interface ProblemInputPayload {
     showCharacterCount: boolean;

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

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

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

@@ -2,11 +2,11 @@ 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) {
-    const { control, setMultiAnswerDisabled } = props;
+    const { control, trigger } = props;
     return (_jsx(Controller, { name: "showCharacterCount", control: control, render: ({ field: { value, onChange } }) => {
             return (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value.toString(), onChange: (value) => {
                     onChange(value === "true");
-                    setMultiAnswerDisabled(value === "true");
+                    trigger("solutions");
                 }, fullWidth: true }, { children: [_jsx(SegmentedControlButton, { value: "false", label: "\uD55C \uCE78\uC73C\uB85C" }), _jsx(SegmentedControlButton, { value: "true", label: "\uAE00\uC790 \uC218\uB300\uB85C" })] })));
         } }));
 }

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;
-    disabled?: boolean;
 }
-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,40 +2,23 @@ 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, onDelete, disabled } = props;
+    const { index, control, rules, onDelete } = props;
     const theme = useTheme();
-    const TextTypeDropdown = (_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: {
-            required: "정답을 입력해주세요.",
-        }, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
-            > div {
-              padding: 4px 12px;
-            }
-          `, startIcon: TextTypeDropdown, 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 }) })))] })) })) }));
+    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) === "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: _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";
@@ -13,13 +13,11 @@ import { FormCharacterCount } from "./FormCharacterCount";
 import { FormPlaceholder } from "./FormPlaceholder";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
-import { useState } from "react";
 export default function SettingForm(props) {
     const { solutions, showCharacterCount, placeholder, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
-    //fixme: multiAnswerDisabled 삭제
-    const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
-    const { control, handleSubmit } = useForm({
+    const { control, handleSubmit, watch, trigger } = useForm({
+        mode: "all",
         defaultValues: {
             solutions,
             showCharacterCount,
@@ -27,7 +25,7 @@ export default function SettingForm(props) {
         },
     });
     const theme = useTheme();
-    const { fields, append, remove, update } = useFieldArray({
+    const { fields, append, remove } = useFieldArray({
         control,
         name: "solutions",
         keyName: "uid",
@@ -44,25 +42,23 @@ export default function SettingForm(props) {
         });
         onClose();
     };
+    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) => ({
-                                        field,
-                                        index,
-                                    }))
-                                        .filter(({ field }) => !field.destroyed)
-                                        .map(({ field, index }) => (_jsx(FormSolution, { index: index, control: control, disabled: index !== 0 && multiAnswerDisabled, onDelete: index !== 0
+          ` }), "\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에서 통합해서 검증합니다.
+                                                enabled: () => index === 0 ||
+                                                    !multipleSolutionsDisabled ||
+                                                    "복수 정답이 불가능합니다.",
+                                                required: (value) => value !== "" || "정답을 입력해주세요.",
+                                            },
+                                        }, onDelete: index !== 0
                                             ? () => {
-                                                if (field.value) {
-                                                    update(index, Object.assign(Object.assign({}, field), { destroyed: true }));
-                                                }
-                                                else {
-                                                    remove(index);
-                                                }
+                                                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: "",
@@ -76,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, setMultiAnswerDisabled: setMultiAnswerDisabled })] }), _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(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 `
                     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/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, } from "../ComponentPickerMenuPlugin";
+import { ComponentPickerOption, ComponentPickerMenuList, getBaseOptions, ComponentDrawerOption, } from "../ComponentPickerMenuPlugin";
 import { useFloatingMenu } from "./useFloatingMenu";
 import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
@@ -115,6 +115,9 @@ export function ComponentAdderPlugin(props) {
         };
     }, [editor, nodeKey, plusOrMenu]);
     const onSelectOption = useCallback((selectedOption, textNodeContainingQuery, closeMenu, matchingString) => {
+        if (selectedOption instanceof ComponentDrawerOption) {
+            return;
+        }
         editor.update(() => {
             selectedOption.onSelect(matchingString);
             setNodeKey(null);
@@ -130,10 +133,13 @@ export function ComponentAdderPlugin(props) {
     });
     const getContextMenuOptions = useContextMenuOptions();
     const filteredOptions = options.filter((option) => {
+        if (!query) {
+            return true;
+        }
         const regex = new RegExp(query, "i");
-        return (option.component ||
-            regex.test(option.title) ||
-            option.keywords.some((keyword) => regex.test(keyword)));
+        return (option instanceof ComponentPickerOption &&
+            (regex.test(option.title) ||
+                option.keywords.some((keyword) => regex.test(keyword))));
     });
     const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
     return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, activeEditor: editor, onClose: () => setImageOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.d.ts

@@ -2,5 +2,5 @@
  * Context Menu (:: 버튼)
  */
 import { LexicalEditor, LexicalNode } from "lexical";
-import { ComponentPickerOption } from "../ComponentPickerMenuPlugin";
-export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => ComponentPickerOption[];
+import { ComponentDrawerOption, ComponentPickerOption } from "../ComponentPickerMenuPlugin";
+export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
+import { ComponentDrawerOption, ComponentPickerOption } from "./ComponentPickerMenuPlugin";
 export interface ComponentPickerMenuListProps {
-    options: ComponentPickerOption[];
+    options: (ComponentPickerOption | ComponentDrawerOption)[];
     selectedIndex: number | null;
     selectOptionAndCleanUp: (option: ComponentPickerOption) => void;
     setHighlightedIndex: (index: number) => void;

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled from "@emotion/styled";
+import { ComponentDrawerOption, } from "./ComponentPickerMenuPlugin";
 import { ComponentPickerMenuItem } from "./ComponentPickerMenuItem";
 import React from "react";
 export function ComponentPickerMenuList(props) {
     const { options, selectedIndex, selectOptionAndCleanUp, setHighlightedIndex, } = props;
     return (_jsx(Container, { children: _jsx(ListContainer, { children: options.map((option, i) => {
-                if ("component" in option) {
+                if (option instanceof ComponentDrawerOption) {
                     return (_jsx(React.Fragment, { children: option.component }, option.key));
                 }
                 return (_jsx(ComponentPickerMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {

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

@@ -10,8 +10,12 @@ import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { LexicalEditor } from "lexical";
 import { ReactElement } from "react";
 import { Theme } from "@emotion/react";
+export declare class ComponentDrawerOption extends MenuOption {
+    title: string;
+    component: ReactElement;
+    constructor(title: string, component: ReactElement);
+}
 export declare class ComponentPickerOption extends MenuOption {
-    component?: ReactElement;
     title: string;
     icon?: ReactElement;
     iconContainerClassName?: string;
@@ -24,9 +28,7 @@ export declare class ComponentPickerOption extends MenuOption {
         keywords?: Array<string>;
         keyboardShortcut?: string;
         onSelect: (queryString: string) => void;
-    } | {
-        component: ReactElement;
     });
 }
-export declare function getBaseOptions(editor: LexicalEditor, theme: Theme, setImageOpen: (open: boolean) => void): ComponentPickerOption[];
+export declare function getBaseOptions(editor: LexicalEditor, theme: Theme, setImageOpen: (open: boolean) => void): (ComponentPickerOption | ComponentDrawerOption)[];
 export declare function ComponentPickerMenuPlugin(): JSX.Element;

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

@@ -24,20 +24,20 @@ import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
-import { INSERT_SHORT_ANSWER_COMMAND } from "../ProblemInputPlugin";
+import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
+export class ComponentDrawerOption extends MenuOption {
+    constructor(title, component) {
+        super(title);
+        this.title = title;
+        this.component = component;
+    }
+}
 export class ComponentPickerOption extends MenuOption {
     constructor(title, options) {
         super(title);
-        if ("component" in options) {
-            this.title = title;
-            this.component = options.component;
-            this.keywords = [];
-            this.onSelect = () => { };
-            return;
-        }
         this.title = title;
         this.keywords = options.keywords || [];
         this.icon = options.icon;
@@ -69,8 +69,8 @@ function getQuizContextOptions(editor, theme) {
     return [
         new ComponentPickerOption("주관식 입력 칸", {
             icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
-            keywords: ["short answer", "short answer input", "주관식", "주관식 입력"],
-            onSelect: () => editor.dispatchCommand(INSERT_SHORT_ANSWER_COMMAND, {
+            keywords: ["problem input", "주관식 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_PROBLEM_INPUT_COMMAND, {
                 solutions: [
                     {
                         textType: "normal",
@@ -84,24 +84,17 @@ function getQuizContextOptions(editor, theme) {
         }),
         new ComponentPickerOption("객관식 입력 칸", {
             icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
-            keywords: [
-                "multiple select",
-                "multiple select input",
-                "객관식",
-                "객관식 입력",
-            ],
+            keywords: ["problem select", "객관식 입력"],
             onSelect: () => {
                 // TODO: 객관식 입력 칸 추가
             },
         }),
-        new ComponentPickerOption("메뉴구분선", {
-            component: (_jsx("div", { css: css `
+        new ComponentDrawerOption("메뉴구분선", (_jsx("div", { css: css `
             width: 100%;
             height: 1px;
             background: ${theme.color.background.neutralAltActive};
             margin: 4px 0;
-          ` })),
-        }),
+          ` }))),
     ];
 }
 export function getBaseOptions(editor, theme, setImageOpen) {
@@ -211,11 +204,15 @@ export function ComponentPickerMenuPlugin() {
         const regex = new RegExp(queryString, "i");
         return [
             ...getDynamicOptions(editor, queryString),
-            ...baseOptions.filter((option) => regex.test(option.title) ||
-                option.keywords.some((keyword) => regex.test(keyword))),
+            ...baseOptions.filter((option) => option instanceof ComponentPickerOption &&
+                (regex.test(option.title) ||
+                    option.keywords.some((keyword) => regex.test(keyword)))),
         ];
     }, [editor, queryString, setOpen]);
     const onSelectOption = useCallback((selectedOption, nodeToRemove, closeMenu, matchingString) => {
+        if (selectedOption instanceof ComponentDrawerOption) {
+            return;
+        }
         editor.update(() => {
             nodeToRemove === null || nodeToRemove === void 0 ? void 0 : nodeToRemove.remove();
             selectedOption.onSelect(matchingString);

package/dist/patterns/LexicalEditor/plugins/ProblemInputPlugin/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { LexicalCommand } from "lexical";
 import { ProblemInputPayload } from "../../nodes/ProblemInputNode";
-export declare const INSERT_SHORT_ANSWER_COMMAND: LexicalCommand<ProblemInputPayload>;
+export declare const INSERT_PROBLEM_INPUT_COMMAND: LexicalCommand<ProblemInputPayload>;
 export default function ProblemInputPlugin(): JSX.Element | null;

package/dist/patterns/LexicalEditor/plugins/ProblemInputPlugin/index.js

@@ -1,19 +1,18 @@
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection, COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
 import { useEffect } from "react";
 import { $createProblemInputNode, ProblemInputNode, } from "../../nodes/ProblemInputNode";
-export const INSERT_SHORT_ANSWER_COMMAND = createCommand("INSERT_SHORT_ANSWER_COMMAND");
+export const INSERT_PROBLEM_INPUT_COMMAND = createCommand("INSERT_PROBLEM_INPUT_COMMAND");
 export default function ProblemInputPlugin() {
     const [editor] = useLexicalComposerContext();
     useEffect(() => {
         if (!editor.hasNodes([ProblemInputNode])) {
             throw new Error("ProblemInputNode: ProblemInputNode not registered on editor");
         }
-        editor.registerCommand(INSERT_SHORT_ANSWER_COMMAND, (payload) => {
-            var _a;
+        editor.registerCommand(INSERT_PROBLEM_INPUT_COMMAND, (payload) => {
             const problemInputNode = $createProblemInputNode(payload);
-            const currentNode = (_a = $getSelection()) === null || _a === void 0 ? void 0 : _a.getNodes()[0];
-            currentNode === null || currentNode === void 0 ? void 0 : currentNode.replace(problemInputNode);
+            $insertNodeToNearestRoot(problemInputNode);
             return true;
         }, COMMAND_PRIORITY_EDITOR);
     }, [editor]);

package/dist/patterns/LexicalEditor/theme.js

@@ -249,8 +249,9 @@ export function getTheme(theme) {
         problemInput: css `
       display: flex;
       flex-direction: column;
-      flex: 1; 
+      flex: 1;
       gap: 4px;
+      margin-bottom: 8px;
     `,
     };
 }

package/package.json

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