@team-monolith/cds 1.9.9 → 1.10.1

package/dist/icons/Custom.d.ts

@@ -87,3 +87,11 @@ export declare const customQuizColorSvg: string;
 export declare const CustomQuizColorIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customPdfColorSvg: string;
+export declare const CustomPdfColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customPdfSvg: string;
+export declare const CustomPdfIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;

package/dist/icons/Custom.js

@@ -91,3 +91,14 @@ export const CustomQuizColorIcon = forwardRef((props, ref) => {
     const uniqueId = useMemo(uid, []);
     return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", Object.assign({ clipPath: `url(#clip0_${uniqueId})` }, { children: [_jsx("path", { d: "M19.5238 19.81C19.5238 20.3913 19.2927 20.9478 18.8819 21.3584C18.4712 21.7691 17.9137 22.0002 17.3333 22.0002H4.19048C3.60913 22.0002 3.05258 21.7691 2.64186 21.3584C2.23115 20.9478 2 20.3903 2 19.81V6.09309C2 5.5118 2.23115 4.95531 2.64186 4.54463C3.05258 4.13396 3.61012 3.90283 4.19048 3.90283H17.3333C17.9147 3.90283 18.4712 4.13396 18.8819 4.54463C19.2927 4.95531 19.5238 5.51279 19.5238 6.09309V19.81C19.5238 20.3913 19.2927 20.9478 18.8819 21.3584C18.4712 21.7691 17.9137 22.0002 17.3333 22.0002", fill: "#FBEAF3" }), _jsx("path", { d: "M21.9999 17.9072C21.9999 18.4884 21.7687 19.0449 21.358 19.4556C20.9473 19.8663 20.3898 20.0974 19.8094 20.0974H6.66655C6.0852 20.0974 5.52865 19.8663 5.11794 19.4556C4.70723 19.0449 4.47607 18.4875 4.47607 17.9072V4.19026C4.47607 3.60897 4.70723 3.05247 5.11794 2.6418C5.52865 2.23113 6.08619 2 6.66655 2H19.8094C20.3908 2 20.9473 2.23113 21.358 2.6418C21.7687 3.05247 21.9999 3.60996 21.9999 4.19026V17.9072C21.9999 18.4884 21.7687 19.0449 21.358 19.4556C20.9473 19.8663 20.3898 20.0974 19.8094 20.0974", fill: "#F889AA" }), _jsx("path", { d: "M17.2836 14.917C18.4152 13.8846 19.0484 12.3944 19.0484 10.7363C19.0484 7.62109 16.8132 5.09766 13.2381 5.09766C9.66292 5.09766 7.42773 7.62274 7.42773 10.7363C7.42773 13.8499 9.66292 16.375 13.2381 16.375C14.044 16.375 14.7805 16.246 15.4394 16.0113L16.0651 16.9064C16.118 16.9833 16.2147 17.0172 16.304 16.9916L18.0341 16.494C18.1011 16.4742 18.1556 16.4237 18.1796 16.3568C18.2028 16.2907 18.1928 16.2171 18.1523 16.1584L17.2836 14.917ZM13.2381 13.6656C11.3815 13.6656 10.2192 12.3539 10.2192 10.7363C10.2192 9.11878 11.3798 7.80706 13.2381 7.80706C15.0963 7.80706 16.2569 9.11878 16.2569 10.7363C16.2569 11.4331 16.0403 12.0728 15.6468 12.5762L14.8864 11.4885C14.8326 11.4124 14.7367 11.3777 14.6475 11.4033L12.9165 11.9009C12.8496 11.9208 12.795 11.9712 12.771 12.0381C12.7479 12.1042 12.7578 12.1778 12.7983 12.2365L13.7696 13.6251C13.6001 13.6499 13.4241 13.6656 13.2381 13.6656Z", fill: "#FBEAF3" })] })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: `clip0_${uniqueId}` }, { children: _jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(2 2)" }) })) })] })));
 });
+import customPdfColorSvgImport from "./custom/pdf-color.svg";
+export const customPdfColorSvg = customPdfColorSvgImport;
+export const CustomPdfColorIcon = forwardRef((props, ref) => {
+    const uniqueId = useMemo(uid, []);
+    return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", Object.assign({ clipPath: `url(#clip0_${uniqueId})` }, { children: [_jsx("path", { d: "M21 6.5V20.8C21 21.3839 20.7626 21.9428 20.3407 22.3553C19.9188 22.7678 19.3461 23 18.75 23H5.25C4.65285 23 4.08118 22.7678 3.65931 22.3553C3.23743 21.9428 3 21.3829 3 20.8V3.2C3 2.61612 3.23743 2.05716 3.65931 1.64466C4.08118 1.23216 4.65285 1 5.25 1H15.375L21 6.5Z", fill: "#FF5850" }), _jsx("path", { d: "M16.5 6.5H21L15.375 1V5.4C15.375 5.69194 15.4932 5.97192 15.7041 6.17817C15.9151 6.38442 16.2014 6.5 16.5 6.5Z", fill: "#F1E0E0" }), _jsx("path", { d: "M12.7437 6.80746H10.6651C10.5459 6.80746 10.4507 6.90052 10.4481 7.01705C10.4089 8.90249 9.84591 11.0932 8.91557 13.1195C7.98522 15.1502 6.7418 16.8982 5.43701 17.9757C5.35073 18.047 5.3365 18.1723 5.40321 18.2618L6.63863 19.9133C6.70711 20.0046 6.83608 20.0273 6.93303 19.9646C10.4934 17.6731 14.4149 16.1077 18.2217 16.5695C18.332 16.5825 18.4352 16.5138 18.4609 16.4086L18.9439 14.4066C18.9697 14.3005 18.9083 14.1944 18.8043 14.1579C15.6165 13.0343 13.0719 9.94435 12.9598 7.00923C12.9554 6.89617 12.8584 6.80833 12.7437 6.80833V6.80746ZM11.1427 15.0989C10.9586 15.165 10.7869 14.9788 10.8732 14.8067C10.9871 14.5805 11.0965 14.3527 11.2023 14.1222C11.478 13.5195 11.728 12.8986 11.9476 12.269C12.0046 12.1055 12.2269 12.075 12.3292 12.2168C12.7926 12.8577 13.3209 13.4526 13.9053 13.9909C14.0334 14.1083 13.9729 14.317 13.8012 14.3518C12.8984 14.5336 12.0108 14.7884 11.1427 15.0989Z", fill: "#F1E0E0" })] })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: `clip0_${uniqueId}` }, { children: _jsx("rect", { width: "18", height: "22", fill: "white", transform: "translate(3 1)" }) })) })] })));
+});
+import customPdfSvgImport from "./custom/pdf.svg";
+export const customPdfSvg = customPdfSvgImport;
+export const CustomPdfIcon = forwardRef((props, ref) => {
+    return (_jsx("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 20.8V6.5L15.375 1H5.25C4.65285 1 4.08118 1.23216 3.65931 1.64466C3.23743 2.05716 3 2.61612 3 3.2V20.8C3 21.3829 3.23743 21.9428 3.65931 22.3553C4.08118 22.7678 4.65285 23 5.25 23H18.75C19.3461 23 19.9188 22.7678 20.3407 22.3553C20.7626 21.9428 21 21.3839 21 20.8ZM10.6651 6.80746H12.7437V6.80832C12.8585 6.80832 12.9554 6.89616 12.9599 7.00922C13.0719 9.94434 15.6166 13.0343 18.8043 14.1579C18.9084 14.1944 18.9698 14.3005 18.944 14.4066L18.461 16.4086C18.4352 16.5138 18.332 16.5825 18.2217 16.5695C14.415 16.1077 10.4935 17.6731 6.93308 19.9646C6.83613 20.0272 6.70717 20.0046 6.63868 19.9133L5.40326 18.2618C5.33655 18.1723 5.35078 18.047 5.43706 17.9757C6.74186 16.8982 7.98528 15.1502 8.91562 13.1195C9.84597 11.0932 10.409 8.90248 10.4481 7.01704C10.4508 6.90051 10.546 6.80746 10.6651 6.80746ZM10.8733 14.8066C10.787 14.9788 10.9586 15.1649 11.1428 15.0989C12.0108 14.7884 12.8985 14.5336 13.8013 14.3518C13.9729 14.317 14.0334 14.1083 13.9053 13.9909C13.321 13.4526 12.7927 12.8577 12.3293 12.2168C12.227 12.075 12.0046 12.1055 11.9477 12.269C11.728 12.8986 11.4781 13.5195 11.2024 14.1222C11.0965 14.3527 10.9871 14.5805 10.8733 14.8066Z", fill: "#363636" }) })));
+});

package/dist/icons/custom/pdf-color.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_881_50)">
+<path d="M21 6.5V20.8C21 21.3839 20.7626 21.9428 20.3407 22.3553C19.9188 22.7678 19.3461 23 18.75 23H5.25C4.65285 23 4.08118 22.7678 3.65931 22.3553C3.23743 21.9428 3 21.3829 3 20.8V3.2C3 2.61612 3.23743 2.05716 3.65931 1.64466C4.08118 1.23216 4.65285 1 5.25 1H15.375L21 6.5Z" fill="#FF5850" style="fill:#FF5850;fill:color(display-p3 1.0000 0.3449 0.3125);fill-opacity:1;"/>
+<path d="M16.5 6.5H21L15.375 1V5.4C15.375 5.69194 15.4932 5.97192 15.7041 6.17817C15.9151 6.38442 16.2014 6.5 16.5 6.5Z" fill="#F1E0E0" style="fill:#F1E0E0;fill:color(display-p3 0.9451 0.8784 0.8784);fill-opacity:1;"/>
+<path d="M12.7437 6.80746H10.6651C10.5459 6.80746 10.4507 6.90052 10.4481 7.01705C10.4089 8.90249 9.84591 11.0932 8.91557 13.1195C7.98522 15.1502 6.7418 16.8982 5.43701 17.9757C5.35073 18.047 5.3365 18.1723 5.40321 18.2618L6.63863 19.9133C6.70711 20.0046 6.83608 20.0273 6.93303 19.9646C10.4934 17.6731 14.4149 16.1077 18.2217 16.5695C18.332 16.5825 18.4352 16.5138 18.4609 16.4086L18.9439 14.4066C18.9697 14.3005 18.9083 14.1944 18.8043 14.1579C15.6165 13.0343 13.0719 9.94435 12.9598 7.00923C12.9554 6.89617 12.8584 6.80833 12.7437 6.80833V6.80746ZM11.1427 15.0989C10.9586 15.165 10.7869 14.9788 10.8732 14.8067C10.9871 14.5805 11.0965 14.3527 11.2023 14.1222C11.478 13.5195 11.728 12.8986 11.9476 12.269C12.0046 12.1055 12.2269 12.075 12.3292 12.2168C12.7926 12.8577 13.3209 13.4526 13.9053 13.9909C14.0334 14.1083 13.9729 14.317 13.8012 14.3518C12.8984 14.5336 12.0108 14.7884 11.1427 15.0989Z" fill="#F1E0E0" style="fill:#F1E0E0;fill:color(display-p3 0.9451 0.8784 0.8784);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_881_50">
+<rect width="18" height="22" fill="white" style="fill:white;fill-opacity:1;" transform="translate(3 1)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/icons/custom/pdf.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 20.8V6.5L15.375 1H5.25C4.65285 1 4.08118 1.23216 3.65931 1.64466C3.23743 2.05716 3 2.61612 3 3.2V20.8C3 21.3829 3.23743 21.9428 3.65931 22.3553C4.08118 22.7678 4.65285 23 5.25 23H18.75C19.3461 23 19.9188 22.7678 20.3407 22.3553C20.7626 21.9428 21 21.3839 21 20.8ZM10.6651 6.80746H12.7437V6.80832C12.8585 6.80832 12.9554 6.89616 12.9599 7.00922C13.0719 9.94434 15.6166 13.0343 18.8043 14.1579C18.9084 14.1944 18.9698 14.3005 18.944 14.4066L18.461 16.4086C18.4352 16.5138 18.332 16.5825 18.2217 16.5695C14.415 16.1077 10.4935 17.6731 6.93308 19.9646C6.83613 20.0272 6.70717 20.0046 6.63868 19.9133L5.40326 18.2618C5.33655 18.1723 5.35078 18.047 5.43706 17.9757C6.74186 16.8982 7.98528 15.1502 8.91562 13.1195C9.84597 11.0932 10.409 8.90248 10.4481 7.01704C10.4508 6.90051 10.546 6.80746 10.6651 6.80746ZM10.8733 14.8066C10.787 14.9788 10.9586 15.1649 11.1428 15.0989C12.0108 14.7884 12.8985 14.5336 13.8013 14.3518C13.9729 14.317 14.0334 14.1083 13.9053 13.9909C13.321 13.4526 12.7927 12.8577 12.3293 12.2168C12.227 12.075 12.0046 12.1055 11.9477 12.269C11.728 12.8986 11.4781 13.5195 11.2024 14.1222C11.0965 14.3527 10.9871 14.5805 10.8733 14.8066Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
+</svg>

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

@@ -7,7 +7,7 @@ export interface ImageProps {
 export interface Selection {
     isAnswer: boolean;
     show: {
-        image?: ImageProps;
+        image?: ImageProps | null;
         text: string;
     };
     value: string;
@@ -31,7 +31,7 @@ export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
     static getType(): string;
     getSelections(): Selection[];
     getSelected(): string[];
-    setSolutions(selections: Selection[]): void;
+    setSelections(selections: Selection[]): void;
     setSelected(selected: string[]): void;
     static clone(node: ProblemSelectNode): ProblemSelectNode;
     constructor(selections: Selection[], selected: string[], hasMultipleAnswers?: boolean, key?: NodeKey);

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

@@ -19,7 +19,7 @@ export class ProblemSelectNode extends DecoratorNode {
     getSelected() {
         return this.__selected;
     }
-    setSolutions(selections) {
+    setSelections(selections) {
         const self = this.getWritable();
         self.__selections = selections;
     }

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

@@ -3,7 +3,7 @@ export interface SelectBoxProps {
     index: number;
     isSelected?: boolean;
     isAnswer?: boolean;
-    image?: ImageProps;
+    image?: ImageProps | null;
     text: string;
     onClick?: () => void;
     fullWidth?: boolean;

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

@@ -12,7 +12,7 @@ export default function SelectBox(props) {
             ` })) : (index) })), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
               height: auto;
               // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
-              max-width: min(328px, 100%);
+              max-width: 100%;
               width: fit-content;
               border-radius: 6px;
             ` })), text] }), isAnswer && (_jsx(CheckboxCircleFillIcon, { color: theme.color.foreground.success, css: css `

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

@@ -45,10 +45,7 @@ export function SelectComponent(props) {
                                 if (!$isProblemSelectNode(node)) {
                                     return;
                                 }
-                                const newSelected = [...selected];
-                                const index = newSelected.indexOf(selection.value);
-                                newSelected.splice(index, 1);
-                                node.setSelected(newSelected);
+                                node.setSelected(selected.filter((v) => v !== selection.value));
                             });
                         }
                         else {
@@ -57,9 +54,7 @@ export function SelectComponent(props) {
                                 if (!$isProblemSelectNode(node)) {
                                     return;
                                 }
-                                const newSelected = [...selected];
-                                newSelected.push(selection.value);
-                                node.setSelected(newSelected);
+                                node.setSelected([...selected, selection.value]);
                             });
                         }
                     }, fullWidth: true }, index)))] }));

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

@@ -1,16 +1,13 @@
 import { Selection } from "../ProblemSelectNode";
-import { Control, FieldArrayWithId, UseFieldArrayUpdate } from "react-hook-form";
+import { Control, UseFormWatch } from "react-hook-form";
 export interface FormSelectionProps {
     index: number;
     control: Control<{
         selections: Selection[];
     }, any>;
-    field: FieldArrayWithId<{
+    watch: UseFormWatch<{
         selections: Selection[];
-    }, "selections", "uid">;
-    update: UseFieldArrayUpdate<{
-        selections: Selection[];
-    }, "selections">;
+    }>;
     rules?: any;
     onDelete?: () => void;
 }

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

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
-import { Controller, } from "react-hook-form";
+import { Controller } from "react-hook-form";
 import { css } from "@emotion/react";
 import Input from "../../../../../components/Input";
 import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, } from "../../../../../icons";
@@ -10,51 +10,45 @@ import Switch from "../../../../../components/Switch";
 import { useState } from "react";
 import { InsertImageDialog } from "./InsertImageDialog";
 export function FormSelection(props) {
-    const { index, control, field, update, rules, onDelete } = props;
+    const { index, control, rules, watch, onDelete } = props;
     const [imageOpen, setImageOpen] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: field.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
-                    update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: props }) }));
-                }, deleteImg: field.show.image
-                    ? () => {
-                        update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: undefined }) }));
-                    }
-                    : undefined }), _jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            gap: 4px;
-          ` }, { children: [field.show.image && field.show.image.src && (_jsx("img", { src: field.show.image.src, alt: field.show.image.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);
-                                            update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { text: value }) }));
-                                        },
-                                    }, 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: field.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);
-                                        update(index, Object.assign(Object.assign({}, field), { isAnswer: !value }));
-                                    } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: value, size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] })] }));
+    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: value !== null }), 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;
+          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);
+                        } }), _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: value, 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/InsertImageDialog.d.ts

@@ -3,8 +3,8 @@ export interface InsertImageDialogProps {
     title: string;
     open: boolean;
     onClose: () => void;
-    updateImg: (props: ImageProps) => void;
+    updateImg: (props: ImageProps | null) => void;
     /** 전달하면 "이미지 삭제하기" 버튼이 생깁니다. */
-    deleteImg?: () => void;
+    deleteButton?: boolean;
 }
 export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -18,22 +18,23 @@ import Button from "../../../../../components/Button";
 import { CodleDesignSystemContext } from "../../../../../CodleDesignSystemProvider";
 import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
 import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
+import { useForm } from "react-hook-form";
 export function InsertImageDialog(props) {
-    const { title, open, onClose, updateImg, deleteImg } = props;
+    const { title, open, onClose, updateImg, deleteButton } = props;
     const theme = useTheme();
     const [mode, setMode] = useState(null);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { control, setValue, watch, reset } = useForm({
+        defaultValues: { src: "", altText: "" },
+    });
     const onClick = (props) => {
         updateImg(props);
         handleOnClose();
     };
     const handleOnClose = () => {
         setMode(null);
-        setSrc("");
-        setAltText("");
+        reset();
         onClose();
     };
     return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
@@ -52,10 +53,12 @@ export function InsertImageDialog(props) {
                                                     return;
                                                 const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                                 if (uploadByFile) {
-                                                    setSrc(yield uploadByFile(file));
+                                                    setValue("src", yield uploadByFile(file));
                                                     setMode("file");
                                                 }
-                                            }) })] })] }), deleteImg && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: deleteImg })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
+                                            }) })] })] }), deleteButton && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: () => {
+                                        onClick(null);
+                                    } })] }))] })) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue, onClick: onClick }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

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

@@ -1,9 +1,9 @@
 import { ImageProps } from "../ProblemSelectNode";
+import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 export interface InsertImageUploadedDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
+    control: Control<ImageProps, any>;
+    watch: UseFormWatch<ImageProps>;
+    setValue: UseFormSetValue<ImageProps>;
     onClick: (props: ImageProps) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -15,11 +15,12 @@ import { AlertDialogActions, AlertDialogContent, } from "../../../../../componen
 import Button from "../../../../../components/Button";
 import { RefreshLineIcon } from "../../../../../icons";
 import Input from "../../../../../components/Input";
+import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
+    const { control, watch, setValue, onClick } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const isDisabled = src === "";
+    const isDisabled = watch("src") === "";
     return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
                                 var _a;
                                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
@@ -30,11 +31,9 @@ export function InsertImageUploadedDialogBody(props) {
                                     return;
                                 const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                 if (uploadByFile) {
-                                    setSrc(yield uploadByFile(file));
+                                    setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: src, alt: altText })] }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

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

@@ -1,9 +1,8 @@
 import { ImageProps } from "../ProblemSelectNode";
+import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
+    control: Control<ImageProps, any>;
+    watch: UseFormWatch<ImageProps>;
     onClick: (props: ImageProps) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

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

@@ -4,14 +4,11 @@ import { AlertDialogActions, AlertDialogContent, } from "../../../../../componen
 import Input from "../../../../../components/Input";
 import { LinkIcon } from "../../../../../icons";
 import Button from "../../../../../components/Button";
+import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
-    const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: (e) => {
-                                setSrc(e.target.value);
-                            }, value: src, startIcon: _jsx(LinkIcon, {}) }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+    const { control, watch, onClick } = props;
+    const isDisabled = watch("src") === "";
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

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

@@ -16,13 +16,22 @@ export default function SettingForm(props) {
     const { selections, nodeKey, onClose } = props;
     const [editor] = useLexicalComposerContext();
     const [tooltipOpen, setTooltipOpen] = useState(false);
-    const { control, handleSubmit } = useForm({
+    const { control, handleSubmit, watch } = useForm({
         mode: "all",
         defaultValues: {
-            selections,
+            selections: selections.map((selection) => {
+                var _a;
+                return ({
+                    isAnswer: selection.isAnswer,
+                    show: {
+                        image: (_a = selection.show.image) !== null && _a !== void 0 ? _a : null,
+                        text: selection.show.text,
+                    },
+                });
+            }),
         },
     });
-    const { fields, append, remove, update } = useFieldArray({
+    const { fields, append, remove } = useFieldArray({
         control,
         name: "selections",
         keyName: "uid",
@@ -33,7 +42,7 @@ export default function SettingForm(props) {
             if (!$isProblemSelectNode(node)) {
                 return;
             }
-            node.setSolutions(data.selections);
+            node.setSelections(data.selections);
         });
         onClose();
     };
@@ -47,12 +56,13 @@ export default function SettingForm(props) {
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
     }
-    const hasMultipleAnswers = fields.filter((field) => field.isAnswer).length > 1;
-    const hasAnswer = fields.some((field) => field.isAnswer);
+    const answersCount = watch("selections").filter((selection) => selection.isAnswer).length;
+    const hasMultipleAnswers = answersCount > 1;
+    const hasAnswer = answersCount > 0;
     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, field: field, update: update, rules: {
+          ` }), "\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(fields, index),
                                 }, onDelete: index !== 0

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageDialog.js

@@ -18,6 +18,7 @@ import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
 import { useTheme } from "@emotion/react";
 import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
+import { useForm } from "react-hook-form";
 export function InsertImageDialog(props) {
     const { open, activeEditor, onClose } = props;
     const theme = useTheme();
@@ -25,8 +26,9 @@ export function InsertImageDialog(props) {
     const hasModifier = useRef(false);
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const [src, setSrc] = useState("");
-    const [altText, setAltText] = useState("");
+    const { control, setValue, watch, reset } = useForm({
+        defaultValues: { src: "", altText: "" },
+    });
     useEffect(() => {
         hasModifier.current = false;
         const handler = (e) => {
@@ -43,8 +45,7 @@ export function InsertImageDialog(props) {
     };
     const handleOnClose = () => {
         setMode(null);
-        setSrc("");
-        setAltText("");
+        reset();
         onClose();
     };
     return (_jsxs(StyledAlertDialog, Object.assign({ icon: _jsx(ImageFillIcon, { color: theme.color.background.primary }), open: open, onClose: handleOnClose, disableIconPadding: true }, { children: [_jsx(StyledAlertDialogTitle, Object.assign({ onClose: handleOnClose }, { children: "\uC774\uBBF8\uC9C0 \uC0BD\uC785\uD558\uAE30" })), !mode && (_jsx(AlertDialogContent, { children: _jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
@@ -57,10 +58,10 @@ export function InsertImageDialog(props) {
                                             return;
                                         const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                         if (uploadByFile) {
-                                            setSrc(yield uploadByFile(file));
+                                            setValue("src", yield uploadByFile(file));
                                             setMode("file");
                                         }
-                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { src: src, setSrc: setSrc, altText: altText, setAltText: setAltText, onClick: onClick }))] })));
+                                    }) })] })] }) })), mode === "url" && (_jsx(InsertImageUriDialogBody, { control: control, watch: watch, onClick: onClick })), mode === "file" && (_jsx(InsertImageUploadedDialogBody, { control: control, watch: watch, setValue: setValue, onClick: onClick }))] })));
 }
 const StyledAlertDialog = styled(AlertDialog) `
   gap: 16px;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.d.ts

@@ -1,9 +1,18 @@
 import { InsertImagePayload } from ".";
+import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
 export interface InsertImageUploadedDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
+    control: Control<{
+        src: string;
+        altText: string;
+    }, any>;
+    watch: UseFormWatch<{
+        src: string;
+        altText: string;
+    }>;
+    setValue: UseFormSetValue<{
+        src: string;
+        altText: string;
+    }>;
     onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUploadedDialogBody(props: InsertImageUploadedDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUploadedDialogBody.js

@@ -15,11 +15,12 @@ import { AlertDialogContent, AlertDialogActions, } from "../../../../components/
 import Button from "../../../../components/Button";
 import Input from "../../../../components/Input";
 import { RefreshLineIcon } from "../../../../icons";
+import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
+    const { control, watch, setValue, onClick } = props;
     const inputRef = useRef(null);
     const cdsContext = useContext(CodleDesignSystemContext);
-    const isDisabled = src === "";
+    const isDisabled = watch("src") === "";
     return (_jsxs(_Fragment, { children: [_jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Button, { fullWidth: true, color: "grey", size: "medium", label: "\uD30C\uC77C \uBC14\uAFB8\uAE30", onClick: () => {
                                 var _a;
                                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
@@ -30,11 +31,9 @@ export function InsertImageUploadedDialogBody(props) {
                                     return;
                                 const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
                                 if (uploadByFile) {
-                                    setSrc(yield uploadByFile(file));
+                                    setValue("src", yield uploadByFile(file));
                                 }
-                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: src, alt: altText })] }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+                            }) }), _jsxs(ImagePreview, { children: ["\uC774\uBBF8\uC9C0 \uBBF8\uB9AC\uBCF4\uAE30", _jsx("img", { src: watch("src"), alt: watch("altText") })] }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.d.ts

@@ -1,9 +1,14 @@
 import { InsertImagePayload } from ".";
+import { Control, UseFormWatch } from "react-hook-form";
 export interface InsertImageUriDialogBodyProps {
-    src: string;
-    setSrc: (src: string) => void;
-    altText: string;
-    setAltText: (altText: string) => void;
+    control: Control<{
+        src: string;
+        altText: string;
+    }, any>;
+    watch: UseFormWatch<{
+        src: string;
+        altText: string;
+    }>;
     onClick: (payload: InsertImagePayload) => void;
 }
 export declare function InsertImageUriDialogBody(props: InsertImageUriDialogBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/plugins/ImagesPlugin/InsertImageUriDialogBody.js

@@ -4,14 +4,11 @@ import { AlertDialogActions, AlertDialogContent, } from "../../../../components/
 import Input from "../../../../components/Input";
 import { LinkIcon } from "../../../../icons";
 import Button from "../../../../components/Button";
+import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
-    const { src, setSrc, altText, setAltText, onClick } = props;
-    const isDisabled = src === "";
-    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: (e) => {
-                                setSrc(e.target.value);
-                            }, value: src, startIcon: _jsx(LinkIcon, {}) }), _jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: (e) => {
-                                setAltText(e.target.value);
-                            }, value: altText })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText, src }) }) })] }));
+    const { control, watch, onClick } = props;
+    const isDisabled = watch("src") === "";
+    return (_jsxs(_Fragment, { children: [" ", _jsx(AlertDialogContent, { children: _jsxs(Inputs, { children: [_jsx(Controller, { name: "src", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "URL", placeholder: "https://www.pexels.com/photo/n-2848492/", color: "default", size: "medium", onChange: onChange, value: value, startIcon: _jsx(LinkIcon, {}) })) }), _jsx(Controller, { name: "altText", control: control, render: ({ field: { value, onChange } }) => (_jsx(Input, { fullWidth: true, label: "\uB300\uCCB4 \uD14D\uC2A4\uD2B8", placeholder: "\uC0BD\uC785\uD558\uB294 \uC774\uBBF8\uC9C0\uC5D0 \uAD00\uD55C \uC124\uBA85", color: "default", size: "medium", onChange: onChange, value: value })) })] }) }), _jsx(AlertDialogActions, { children: _jsx(Button, { fullWidth: true, label: "\uC0BD\uC785\uD558\uAE30", size: "medium", color: "primary", disabled: isDisabled, onClick: () => onClick({ altText: watch("altText"), src: watch("src") }) }) })] }));
 }
 const Inputs = styled.div `
   display: flex;

package/package.json

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