@team-monolith/cds 1.52.0 → 1.52.2

package/dist/components/InputBase.d.ts

@@ -45,6 +45,8 @@ interface InputBaseInputProps {
 }
 interface InputBaseTextAreaProps {
     multiline: true;
+    /** MUI TextareaAutosize 사용 여부. 전달하지 않으면 사용합니다. */
+    disableAutosize?: boolean;
     /** HTML input 태그에 전달될 ref */
     inputRef?: ForwardedRef<HTMLTextAreaElement>;
     /** HTML input 태그에 전달될 props */

package/dist/components/InputBase.js

@@ -62,7 +62,7 @@ const SIZE_TO_STYLES = (size, fullWidth) => ({
       padding-bottom: 12px;
       ${!fullWidth && "max-width: 375px"};
     `,
-}[size]);
+})[size];
 function InputComponent(props) {
     const { placeholder, disabled = false, defaultValue, value } = props;
     const theme = useTheme();
@@ -86,6 +86,9 @@ function InputComponent(props) {
   `;
     // Type Safety 때문에 코드의 중복을 허용합니다.
     if (props.multiline) {
+        if (props.disableAutosize) {
+            return (_jsx("textarea", Object.assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
+        }
         return (_jsx(TextareaAutosize, Object.assign({ css: style }, props.inputProps, { ref: props.inputRef, onChange: props.onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })));
     }
     else {

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

@@ -65,7 +65,9 @@ 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}번 선택지`
+                                : selection.show.text, 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.d.ts

@@ -1,14 +1,9 @@
-import { Selection } from "../ProblemSelectNode";
-import { Control, UseFormWatch } from "react-hook-form";
+import { Control, RegisterOptions } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
 export interface FormSelectionProps {
     index: number;
-    control: Control<{
-        selections: Selection[];
-    }, any>;
-    watch: UseFormWatch<{
-        selections: Selection[];
-    }>;
-    rules?: any;
+    control: Control<SettingFormData, any>;
+    rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }
 export declare function FormSelection(props: FormSelectionProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
-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";
+import { useController } from "react-hook-form";
 import { css } from "@emotion/react";
 import Input from "../../../../../components/Input";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, } from "../../../../../icons";
@@ -10,43 +10,48 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "../../insertImageDialog";
 export function FormSelection(props) {
-    const { index, control, watch, rules, onDelete } = props;
+    const { index, control, rules, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `selections.${index}`,
+        rules,
+    });
     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
-                                ? "activeDanger"
-                                : inputFocused
-                                    ? "activePrimary"
-                                    : "default", value: value, onChange: onChange, inputProps: {
-                                onFocus: (_e) => {
-                                    setInputFocused(true);
-                                },
-                                onBlur: (_e) => {
-                                    setInputFocused(false);
-                                },
-                            }, 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 `
+        ` }, { children: [_jsx(InsertImageDialog, { title: value.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { image: props }) })), deleteButton: Boolean(value.show.image) }), value.show.image && (_jsx("img", { src: value.show.image.src, alt: value.show.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.show.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { show: Object.assign(Object.assign({}, value.show), { text: e.target.value }) })), inputProps: {
+                            onFocus: (_e) => {
+                                setInputFocused(true);
+                            },
+                            onBlur: (_e) => {
+                                setInputFocused(false);
+                            },
+                        }, 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 `
           display: flex;
           height: 36px;
           gap: 8px;
           align-items: center;
-        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.show.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
                             setImageOpen(true);
-                        } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
-                                onChange(!value);
-                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value), size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+                        } }), _jsxs(Answer, Object.assign({ onClick: () => {
+                            onChange(Object.assign(Object.assign({}, value), { isAnswer: !value.isAnswer }));
+                        } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: Boolean(value.isAnswer), size: "small" })] })), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;

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

@@ -5,4 +5,7 @@ export interface SettingFormProps {
     nodeKey: NodeKey;
     onClose: () => void;
 }
+export interface SettingFormData {
+    selections: Selection[];
+}
 export default function SettingForm(props: SettingFormProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -38,16 +38,25 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    function validateDuplicatedSelection(index) {
-        const selections = watch("selections");
-        if (index === 0)
+    function validateRequired(value) {
+        if (value.show.image || value.show.text)
             return true;
-        const duplicatedIndex = selections
-            .slice(0, index)
-            .findIndex((selection) => selection.show.text === selections[index].show.text);
-        if (duplicatedIndex < 0)
+        return "필수 입력 항목입니다.";
+    }
+    function validateDuplicated(value, formValues) {
+        const shows = formValues.selections.map((selection) => selection.show);
+        const duplicatedIndexes = shows.flatMap((show, i) => {
+            var _a, _b;
+            if (show.text === value.show.text &&
+                ((_a = show.image) === null || _a === void 0 ? void 0 : _a.src) === ((_b = value.show.image) === null || _b === void 0 ? void 0 : _b.src))
+                return [i];
+            return [];
+        });
+        if (duplicatedIndexes.length < 2)
             return true;
-        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+        return `${duplicatedIndexes
+            .map((i) => i + 1)
+            .join(",")}번 선택지가 같은 내용입니다.`;
     }
     const answersCount = watch("selections").filter((selection) => selection.isAnswer).length;
     const hasMultipleAnswers = answersCount > 1;
@@ -55,9 +64,11 @@ export default function SettingForm(props) {
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             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),
+          ` }), "\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, rules: {
+                                    validate: {
+                                        validateRequired,
+                                        validateDuplicated,
+                                    },
                                 }, 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();
@@ -34,13 +37,9 @@ export function InputComponent(props) {
     };
     // view
     if (!isEditable) {
-        return (_jsx(Input, { multiline: multiline, css: css `
+        return (_jsx(Input, { multiline: multiline, disableAutosize: true, css: css `
           textarea {
-            // 100-8*2
-            max-height: 84px;
-            min-height: 84px;
-            // mui TextareaAutosize의 overflow: hidden을 무력화시킵니다.
-            overflow: auto !important;
+            height: ${TEXTAREA_HEIGHT}px;
           }
         `, inputProps: freezeProblemNode
                 ? { readOnly: true }
@@ -58,14 +57,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,4 +1,4 @@
-import { ImageProps } from "../../insertImageDialog";
+import { ImageProps } from "../../../insertImageDialog";
 /** SheetSelectNode의 하나의 선택지 edit모드 컴포넌트입니다. */
 export declare function SelectBoxEdit(props: {
     index: number;

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,9 @@ 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}번 선택지`
+                                : selection.show.text, 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.d.ts

@@ -1,11 +1,10 @@
 /** @jsxImportSource @emotion/react */
-import { Control, UseFormWatch } from "react-hook-form";
+import { Control, RegisterOptions } from "react-hook-form";
 import { SettingFormData } from "./SettingForm";
 /** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
 export default function FormSelection(props: {
     index: number;
     control: Control<SettingFormData, any>;
-    watch: UseFormWatch<SettingFormData>;
-    rules?: any;
+    rules?: Omit<RegisterOptions<SettingFormData, `selections.${number}.show`>, "disabled" | "valueAsNumber" | "valueAsDate" | "setValueAs">;
     onDelete?: () => void;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useController } 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 "../../../../../..";
+/** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
+export default function FormSelection(props) {
+    const { index, control, rules, onDelete } = props;
+    const [imageOpen, setImageOpen] = useState(false);
+    const [inputFocused, setInputFocused] = useState(false);
+    const { field: { value, onChange }, fieldState: { invalid, error }, } = useController({
+        control,
+        name: `selections.${index}.show`,
+        rules,
+    });
+    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(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.text, onChange: (e) => onChange(Object.assign(Object.assign({}, value), { text: e.target.value })), inputProps: {
+                            onFocus: (_e) => {
+                                setInputFocused(true);
+                            },
+                            onBlur: (_e) => {
+                                setInputFocused(false);
+                            },
+                        }, 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 `
+          display: flex;
+          // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
+          height: 36px;
+          gap: 8px;
+          align-items: center;
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: value.image ? _jsx(ImageEditFillIcon, {}) : _jsx(ImageAddFillIcon, {}), onClick: () => {
+                            setImageOpen(true);
+                        } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+}
+const Container = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    gap: 8px;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+    margin-top: 8px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);

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,23 +38,33 @@ export function SettingForm(props) {
         });
         onClose();
     };
-    function validateDuplicatedSelection(index) {
-        const selections = watch("selections");
-        if (index === 0)
+    function validateRequired(value) {
+        if (value.image || value.text)
             return true;
-        const duplicatedIndex = selections
-            .slice(0, index)
-            .findIndex((selection) => selection.show.text === selections[index].show.text);
-        if (duplicatedIndex < 0)
+        return "필수 입력 항목입니다.";
+    }
+    function validateDuplicated(value, formValues) {
+        const shows = formValues.selections.map((selection) => selection.show);
+        const duplicatedIndexes = shows.flatMap((show, i) => {
+            var _a, _b;
+            if (show.text === value.text && ((_a = show.image) === null || _a === void 0 ? void 0 : _a.src) === ((_b = value.image) === null || _b === void 0 ? void 0 : _b.src))
+                return [i];
+            return [];
+        });
+        if (duplicatedIndexes.length < 2)
             return true;
-        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+        return `${duplicatedIndexes
+            .map((i) => i + 1)
+            .join(",")}번 선택지가 같은 내용입니다.`;
     }
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             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),
+          ` }), "\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, rules: {
+                                            validate: {
+                                                validateRequired,
+                                                validateDuplicated,
+                                            },
                                         }, 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.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,

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

@@ -1,86 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, 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 "../../../../..";
-/** 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
-                                ? "activeDanger"
-                                : inputFocused
-                                    ? "activePrimary"
-                                    : "default", value: value, onChange: onChange, inputProps: {
-                                onFocus: (_e) => {
-                                    setInputFocused(true);
-                                },
-                                onBlur: (_e) => {
-                                    setInputFocused(false);
-                                },
-                            }, 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 `
-          display: flex;
-          // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
-          height: 36px;
-          gap: 8px;
-          align-items: center;
-        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
-                            setImageOpen(true);
-                        } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
-}
-const Container = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 4px 12px;
-    gap: 8px;
-    border-radius: 8px;
-    background: ${theme.color.background.neutralAlt};
-  `);
-const Index = styled.div(({ theme }) => css `
-    display: flex;
-    box-sizing: border-box;
-    width: 20px;
-    height: 20px;
-    padding: 4px;
-    margin-top: 8px;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-weight: 800;
-    line-height: 16px;
-  `);
-const Answer = styled.div(({ theme }) => css `
-    display: flex;
-    align-items: center;
-    padding-right: 4px;
-    gap: 8px;
-    color: ${theme.color.foreground.neutralBase};
-    cursor: pointer;
-    /* Default/Label/14px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 114.286% */
-  `);