@team-monolith/cds 1.52.0 → 1.52.1

package/dist/patterns/LexicalEditor/nodes/ProblemSelectNode/SelectBox/SelectBoxEdit.d.ts

@@ -1,9 +1,10 @@
 import { ImageProps } from "../../insertImageDialog";
+import React from "react";
 export interface SelectBoxEditProps {
     index: number;
     isAnswer: boolean;
     image?: ImageProps | null;
-    text: string;
+    text: React.ReactNode;
     onClick: () => void;
 }
 export declare function SelectBoxEdit(props: SelectBoxEditProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -65,7 +65,8 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, isAnswer: "isAnswer" in selection && selection.isAnswer, image: selection.show.image, text: selection.show.text ||
+                                (selection.show.image ? null : `${index + 1}번 선택지`), onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, { selections: selections, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { Controller } from "react-hook-form";
@@ -13,22 +13,22 @@ export function FormSelection(props) {
     const { index, control, watch, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          gap: 4px;
-        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(props), deleteButton: Boolean(value) }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
-                    height: auto;
-                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                    max-width: min(400px, 100%);
-                    width: fit-content;
-                    border-radius: 6px;
-                  `, draggable: "false" }))] })) }), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsx(Controller, { name: `selections.${index}.show`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsxs("div", Object.assign({ css: css `
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              gap: 4px;
+            ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
+                  height: auto;
+                  // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                  max-width: min(400px, 100%);
+                  width: fit-content;
+                  border-radius: 6px;
+                `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
                                 ? "activeDanger"
                                 : inputFocused
                                     ? "activePrimary"
-                                    : "default", value: value, onChange: onChange, inputProps: {
+                                    : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
                                 onFocus: (_e) => {
                                     setInputFocused(true);
                                 },
@@ -37,7 +37,7 @@ export function FormSelection(props) {
                                 },
                             }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
                 flex: 1;
-              ` })) })] })), _jsxs("div", Object.assign({ css: css `
+              ` })] }))) }), _jsxs("div", Object.assign({ css: css `
           display: flex;
           height: 36px;
           gap: 8px;

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

@@ -38,13 +38,30 @@ export default function SettingForm(props) {
         });
         onClose();
     };
+    function validateRequiredSelection(index) {
+        const selections = watch("selections");
+        const selection = selections[index];
+        if (selection.show.image || selection.show.text)
+            return true;
+        return "필수 입력 항목입니다.";
+    }
     function validateDuplicatedSelection(index) {
         const selections = watch("selections");
         if (index === 0)
             return true;
+        const image = selections[index].show.image;
+        const text = selections[index].show.text;
         const duplicatedIndex = selections
             .slice(0, index)
-            .findIndex((selection) => selection.show.text === selections[index].show.text);
+            .findIndex((selection) => {
+            var _a;
+            // text를 비교하고, text가 같은 경우 image도 비교합니다.
+            if (selection.show.text !== text)
+                return false;
+            if (((_a = selection.show.image) === null || _a === void 0 ? void 0 : _a.src) !== (image === null || image === void 0 ? void 0 : image.src))
+                return false;
+            return true;
+        });
         if (duplicatedIndex < 0)
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
@@ -56,8 +73,13 @@ export default function SettingForm(props) {
             width: 12px;
             height: 12px;
           ` }), "\uAC1D\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uB2F5\uC548" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
-                                    required: "필수 입력 항목입니다.",
-                                    validate: () => validateDuplicatedSelection(index),
+                                    validate: () => {
+                                        const required = validateRequiredSelection(index);
+                                        if (required !== true) {
+                                            return required;
+                                        }
+                                        return validateDuplicatedSelection(index);
+                                    },
                                 }, onDelete: index !== 0
                                     ? () => {
                                         remove(index);

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

@@ -10,6 +10,9 @@ import { css } from "@emotion/react";
 import { Input, Settings3FillIcon, SquareButton } from "../../../..";
 import { SettingForm } from "./SettingForm";
 import { $isSheetInputNode } from "./SheetInputNode";
+const TEXTAREA_HEIGHT = 84;
+/** VirtualInput을 Input(size: small)처럼 만들기 위한 padding 값입니다. */
+const INPUT_VERTICAL_PADDING = 8;
 export function InputComponent(props) {
     const { multiline, value, placeholder, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
@@ -36,10 +39,12 @@ export function InputComponent(props) {
     if (!isEditable) {
         return (_jsx(Input, { multiline: multiline, css: css `
           textarea {
-            // 100-8*2
-            max-height: 84px;
-            min-height: 84px;
-            // mui TextareaAutosize의 overflow: hidden을 무력화시킵니다.
+            // textarea의 height를 고정시키기 위해 max-height와 min-height를 설정합니다.
+            max-height: ${TEXTAREA_HEIGHT}px;
+            min-height: ${TEXTAREA_HEIGHT}px;
+            // https://github.com/mui/material-ui/blob/next/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx
+            // MUI TextareaAutoSize는 overflow를 hidden으로 설정하는 로직이 있습니다.
+            // 그래서 부득이하게 !important를 사용합니다.
             overflow: auto !important;
           }
         `, inputProps: freezeProblemNode
@@ -58,14 +63,14 @@ export function InputComponent(props) {
           gap: 4px;
         ` }, { children: [_jsx(VirtualInput, Object.assign({ onClick: () => setSettingOpen((open) => !open), css: multiline &&
                             css `
-              height: 100px;
+              height: ${TEXTAREA_HEIGHT + 2 * INPUT_VERTICAL_PADDING}px;
             ` }, { children: multiline ? "서술형 입력 칸" : "단답형 입력 칸" })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setSettingOpen((open) => !open) })] })), settingOpen && (_jsx(SettingForm, { multiline: multiline, placeholder: placeholder, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }
 const VirtualInput = styled.div(({ theme }) => css `
     box-sizing: border-box;
     height: 36px;
     width: 400px;
-    padding: 8px 16px;
+    padding: ${INPUT_VERTICAL_PADDING}px 16px;
     align-items: center;
     border-radius: 8px;
     background: ${theme.color.background.neutralAlt};

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/index.d.ts

@@ -1,2 +1 @@
 export * from "./SheetInputNode";
-export * from "./InputComponent";

package/dist/patterns/LexicalEditor/nodes/SheetInputNode/index.js

@@ -1,2 +1 @@
 export * from "./SheetInputNode";
-export * from "./InputComponent";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SelectBox → SelectComponent/SelectBox}/SelectBoxComponent.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { ImageProps } from "../../insertImageDialog";
+import { ImageProps } from "../../../insertImageDialog";
 export declare const SelectBoxClasses: {
     readonly container: "SheetSelectNode-SelectBox-container";
     readonly index: "SheetSelectNode-SelectBox-index";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SelectBox → SelectComponent/SelectBox}/SelectBoxEdit.d.ts

@@ -1,8 +1,9 @@
-import { ImageProps } from "../../insertImageDialog";
+import React from "react";
+import { ImageProps } from "../../../insertImageDialog";
 /** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
 export declare function SelectBoxEdit(props: {
     index: number;
     image?: ImageProps | null;
-    text: string;
+    text: React.ReactNode;
     onClick: () => void;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SelectBox → SelectComponent/SelectBox}/SelectBoxView.d.ts

@@ -1,4 +1,4 @@
-import { ImageProps } from "../../insertImageDialog";
+import { ImageProps } from "../../../insertImageDialog";
 /** SheetSelectNode의 하나의 선택지 view모드 컴포넌트입니다. */
 export declare function SelectBoxView(props: {
     index: number;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SelectBox → SelectComponent/SelectBox}/SelectBoxView.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import { SelectBoxComponent } from "./SelectBoxComponent";
-import { CheckFillIcon } from "../../../../../icons";
+import { CheckFillIcon } from "../../../../../../icons";
 function getIndexIcon(type, index) {
     return {
         primary: (_jsx(CheckFillIcon, { css: css `

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SelectComponent.d.ts → SelectComponent/SelectComponent.d.ts}

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { NodeKey } from "lexical";
-import { Selection } from "./SheetSelectNode";
+import { Selection } from "../SheetSelectNode";
 export declare function SelectComponent(props: {
     selections: Selection[];
     selected: string[];

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SelectComponent.js → SelectComponent/SelectComponent.js}

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
-import { $isSheetSelectNode } from "./SheetSelectNode";
+import { $isSheetSelectNode } from "../SheetSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useContext, useState } from "react";
 import useLexicalEditable from "@lexical/react/useLexicalEditable";
-import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
+import { LexicalCustomConfigContext } from "../../../LexicalCustomConfigContext";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../icons";
-import { SelectBoxEdit, SelectBoxView } from "./SelectBox";
-import SquareButton from "../../../../components/SquareButton";
+import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../../icons";
+import SquareButton from "../../../../../components/SquareButton";
 import { SettingForm } from "./SettingForm";
+import { SelectBoxEdit, SelectBoxView } from "./SelectBox";
 export function SelectComponent(props) {
     const { selections, selected, allowMultipleAnswers, nodeKey } = props;
     const [editor] = useLexicalComposerContext();
@@ -60,7 +60,8 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen((open) => !open) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, image: selection.show.image, text: selection.show.text ||
+                                (selection.show.image ? null : `${index + 1}번 선택지`), onClick: () => setSettingOpen((open) => !open) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen((open) => !open);
                         } })] })), settingOpen && (_jsx(SettingForm, { data: {
                     selections,

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SettingForm → SelectComponent/SettingForm}/FormAllowMultipleAnswers.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Controller } from "react-hook-form";
-import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../SegmentedControl";
+import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../../SegmentedControl";
 /** SheetSelectNode SettingForm의 다중 선택 허용 여부 폼입니다. */
 export function FormAllowMultipleAnswers(props) {
     const { control } = props;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SettingForm → SelectComponent/SettingForm}/FormSelection.js

@@ -1,32 +1,32 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { Controller } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { useState } from "react";
-import { InsertImageDialog } from "../../insertImageDialog";
-import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../..";
+import { InsertImageDialog } from "../../../insertImageDialog";
+import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../../..";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props) {
     const { index, control, watch, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
-          display: flex;
-          flex: 1;
-          flex-direction: column;
-          gap: 4px;
-        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(props), deleteButton: Boolean(value) }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
-                    height: auto;
-                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-                    max-width: min(400px, 100%);
-                    width: fit-content;
-                    border-radius: 6px;
-                  `, draggable: "false" }))] })) }), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsx(Controller, { name: `selections.${index}.show`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsxs("div", Object.assign({ css: css `
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+              gap: 4px;
+            ` }, { children: [_jsx(InsertImageDialog, { title: value.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { image: props })), deleteButton: Boolean(value.image) }), value.image && (_jsx("img", { src: value.image.src, alt: value.image.altText, css: css `
+                  height: auto;
+                  // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                  max-width: min(400px, 100%);
+                  width: fit-content;
+                  border-radius: 6px;
+                `, draggable: "false" })), _jsx(Input, { size: "small", color: invalid
                                 ? "activeDanger"
                                 : inputFocused
                                     ? "activePrimary"
-                                    : "default", value: value, onChange: onChange, inputProps: {
+                                    : "default", value: value.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
                                 onFocus: (_e) => {
                                     setInputFocused(true);
                                 },
@@ -35,7 +35,7 @@ export default function FormSelection(props) {
                                 },
                             }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
                 flex: 1;
-              ` })) })] })), _jsxs("div", Object.assign({ css: css `
+              ` })] }))) }), _jsxs("div", Object.assign({ css: css `
           display: flex;
           // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
           height: 36px;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SettingForm → SelectComponent/SettingForm}/SettingForm.d.ts

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { NodeKey } from "lexical";
-import { Selection } from "../SheetSelectNode";
+import { Selection } from "../../SheetSelectNode";
 export interface SettingFormData {
     selections: Selection[];
     allowMultipleAnswers: boolean;

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/{SettingForm → SelectComponent/SettingForm}/SettingForm.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { $getNodeByKey } from "lexical";
-import { $isSheetSelectNode } from "../SheetSelectNode";
+import { $isSheetSelectNode } from "../../SheetSelectNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useFieldArray, useForm } from "react-hook-form";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
-import { AddFillIcon, AlarmWarningFillIcon, Button, ListRadioIcon, shadows, } from "../../../../..";
+import { AddFillIcon, AlarmWarningFillIcon, Button, ListRadioIcon, shadows, } from "../../../../../..";
 import { uid } from "uid";
 import FormSelection from "./FormSelection";
 import { FormAllowMultipleAnswers } from "./FormAllowMultipleAnswers";
@@ -38,13 +38,30 @@ export function SettingForm(props) {
         });
         onClose();
     };
+    function validateRequiredSelection(index) {
+        const selections = watch("selections");
+        const selection = selections[index];
+        if (selection.show.image || selection.show.text)
+            return true;
+        return "필수 입력 항목입니다.";
+    }
     function validateDuplicatedSelection(index) {
         const selections = watch("selections");
         if (index === 0)
             return true;
+        const image = selections[index].show.image;
+        const text = selections[index].show.text;
         const duplicatedIndex = selections
             .slice(0, index)
-            .findIndex((selection) => selection.show.text === selections[index].show.text);
+            .findIndex((selection) => {
+            var _a;
+            // text를 비교하고, text가 같은 경우 image도 비교합니다.
+            if (selection.show.text !== text)
+                return false;
+            if (((_a = selection.show.image) === null || _a === void 0 ? void 0 : _a.src) !== (image === null || image === void 0 ? void 0 : image.src))
+                return false;
+            return true;
+        });
         if (duplicatedIndex < 0)
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
@@ -53,8 +70,13 @@ export function SettingForm(props) {
             width: 12px;
             height: 12px;
           ` }), "\uC120\uD0DD\uD615 \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC120\uD0DD\uC9C0" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
-                                            required: "필수 입력 항목입니다.",
-                                            validate: () => validateDuplicatedSelection(index),
+                                            validate: () => {
+                                                const required = validateRequiredSelection(index);
+                                                if (required !== true) {
+                                                    return required;
+                                                }
+                                                return validateDuplicatedSelection(index);
+                                            },
                                         }, onDelete: index !== 0
                                             ? () => {
                                                 remove(index);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/index.d.ts

@@ -0,0 +1 @@
+export * from "./SelectComponent";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SelectComponent/index.js

@@ -0,0 +1 @@
+export * from "./SelectComponent";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/index.d.ts

@@ -1,2 +1 @@
-export * from "./SelectComponent";
 export * from "./SheetSelectNode";

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/index.js

@@ -1,2 +1 @@
-export * from "./SelectComponent";
 export * from "./SheetSelectNode";

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

@@ -15,6 +15,8 @@ import { useTheme } from "@emotion/react";
 import { css } from "@emotion/css";
 import { $isProblemInputNode } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
+import { $isSheetInputNode } from "../../nodes/SheetInputNode";
+import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
 function getParagraphContextMenuOptions(editor, node, setOpen) {
     return [
         new ComponentPickerOption("본문", {
@@ -197,6 +199,28 @@ function getProblemSelectContextMenuOptions(node) {
         }),
     ];
 }
+function getSheetInputContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
+function getSheetSelectContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
 function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption("회색", {
@@ -280,6 +304,12 @@ export function useContextMenuOptions(props) {
         else if ($isProblemSelectNode(node)) {
             return getProblemSelectContextMenuOptions(node);
         }
+        else if ($isSheetInputNode(node)) {
+            return getSheetInputContextMenuOptions(node);
+        }
+        else if ($isSheetSelectNode(node)) {
+            return getSheetSelectContextMenuOptions(node);
+        }
         else if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node, setImageOpen);
         }

package/package.json

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