@team-monolith/cds 1.9.0 → 1.9.2

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

@@ -1,9 +1,13 @@
 import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
 import { ReactNode } from "react";
+export interface ImageProps {
+    src: string;
+    altText: string;
+}
 export interface Selection {
     isAnswer: boolean;
     show: {
-        image?: any;
+        image?: ImageProps;
         text: string;
     };
     value: string;

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

@@ -1,10 +1,9 @@
-/** @jsxImportSource @emotion/react */
-import { ImagePayload } from "../ImageNode";
+import { ImageProps } from "./ProblemSelectNode";
 export interface SelectBoxProps {
     index: number;
     isSelected?: boolean;
     isAnswer?: boolean;
-    image?: ImagePayload;
+    image?: ImageProps;
     text: string;
     onClick: () => void;
     fullWidth?: boolean;

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

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { css, useTheme } from "@emotion/react";
 import { CheckFillIcon, CheckboxCircleFillIcon } from "../../../../icons";
@@ -8,7 +9,13 @@ export default function SelectBox(props) {
     return (_jsxs(Container, Object.assign({ isSelected: isSelected, fullWidth: fullWidth, onClick: onClick }, { children: [_jsx(Index, Object.assign({ isSelected: isSelected }, { children: isSelected ? (_jsx(CheckFillIcon, { css: css `
               width: 12px;
               height: 12px;
-            ` })) : (index) })), _jsx(Content, { children: text }), isAnswer && (_jsx(CheckboxCircleFillIcon, { color: theme.color.foreground.success, css: css `
+            ` })) : (index) })), _jsxs(Content, { children: [image && (_jsx("img", { src: image.src, alt: image.altText, css: css `
+              height: auto;
+              // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+              max-width: min(328px, 100%);
+              width: fit-content;
+              border-radius: 6px;
+            ` })), text] }), isAnswer && (_jsx(CheckboxCircleFillIcon, { color: theme.color.foreground.success, css: css `
             width: 16px;
             height: 16px;
           ` }))] })));

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

@@ -30,34 +30,32 @@ export function SelectComponent(props) {
     });
     // 학생 view
     if (!isEditable) {
-        return (_jsx(_Fragment, { children: selections.map((selection, index) => {
-                return (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(selection.value), text: selection.show.text, onClick: () => {
-                        const isSelected = selected.includes(selection.value);
-                        if (isSelected) {
-                            editor.update(() => {
-                                const node = $getNodeByKey(nodeKey);
-                                if (!$isProblemSelectNode(node)) {
-                                    return;
-                                }
-                                const newSelected = [...selected];
-                                const index = newSelected.indexOf(selection.value);
-                                newSelected.splice(index, 1);
-                                node.setSelected(newSelected);
-                            });
-                        }
-                        else {
-                            editor.update(() => {
-                                const node = $getNodeByKey(nodeKey);
-                                if (!$isProblemSelectNode(node)) {
-                                    return;
-                                }
-                                const newSelected = [...selected];
-                                newSelected.push(selection.value);
-                                node.setSelected(newSelected);
-                            });
-                        }
-                    }, fullWidth: true }, index));
-            }) }));
+        return (_jsx(_Fragment, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(field.value), image: field.show.image, text: field.show.text, onClick: () => {
+                    const isSelected = selected.includes(field.value);
+                    if (isSelected) {
+                        editor.update(() => {
+                            const node = $getNodeByKey(nodeKey);
+                            if (!$isProblemSelectNode(node)) {
+                                return;
+                            }
+                            const newSelected = [...selected];
+                            const index = newSelected.indexOf(field.value);
+                            newSelected.splice(index, 1);
+                            node.setSelected(newSelected);
+                        });
+                    }
+                    else {
+                        editor.update(() => {
+                            const node = $getNodeByKey(nodeKey);
+                            if (!$isProblemSelectNode(node)) {
+                                return;
+                            }
+                            const newSelected = [...selected];
+                            newSelected.push(field.value);
+                            node.setSelected(newSelected);
+                        });
+                    }
+                }, fullWidth: true }, index))) }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
@@ -67,7 +65,7 @@ export function SelectComponent(props) {
             display: flex;
             flex-direction: column;
             gap: 4px;
-          ` }, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: field.isAnswer, text: field.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+          ` }, { children: fields.map((field, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: field.isAnswer, image: field.show.image, text: field.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
                             setSettingOpen(true);
                         } })] })), settingOpen && (_jsx(SettingForm, { control: control, handleSubmit: handleSubmit, fields: fields, append: append, remove: remove, update: update, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
 }

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

@@ -1,34 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import styled from "@emotion/styled";
 import { Controller, } from "react-hook-form";
 import { css } from "@emotion/react";
 import Input from "../../../../../components/Input";
-import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, } from "../../../../../icons";
+import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, } from "../../../../../icons";
 import SquareButton from "../../../../../components/SquareButton";
 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;
-    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _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" : "default", value: value, onChange: onChange, inputProps: {
-                        onBlur: (_e) => {
-                            // onBlur시에 선택지 미리보기에 반영합니다.
-                            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;
-            ` })) }), _jsx(SquareButton, { color: "icon", size: "xsmall", icon: _jsx(ImageAddFillIcon, {}), onClick: () => {
-                    // TODO: 이미지 추가
-                } }), _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 }))] }));
+    const [imageOpen, setImageOpen] = useState(false);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
+                    update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: props }) }));
+                } }), _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);
+                                            // onBlur시에 선택지 미리보기에 반영합니다.
+                                            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 }))] }))] })] }));
 }
 const Container = styled.div(({ theme }) => css `
     display: flex;
     padding: 4px 12px;
     gap: 8px;
-    align-items: center;
     border-radius: 8px;
     background: ${theme.color.background.neutralAlt};
   `);
@@ -38,6 +67,7 @@ const Index = styled.div(({ theme }) => css `
     width: 20px;
     height: 20px;
     padding: 4px;
+    margin-top: 8px;
     justify-content: center;
     align-items: center;
     border-radius: 4px;
@@ -51,6 +81,7 @@ const Index = styled.div(({ theme }) => css `
   `);
 const Answer = styled.div(({ theme }) => css `
     display: flex;
+    align-items: center;
     padding-right: 4px;
     gap: 8px;
     color: ${theme.color.foreground.neutralBase};

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

@@ -0,0 +1,7 @@
+import { ImageProps } from "../ProblemSelectNode";
+export interface InsertImageDialogProps {
+    open: boolean;
+    onClose: () => void;
+    updateImg: (props: ImageProps) => void;
+}
+export declare function InsertImageDialog(props: InsertImageDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,96 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { useTheme } from "@emotion/react";
+import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../../icons";
+import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../../components/AlertDialog";
+import Button from "../../../../../components/Button";
+import { CodleDesignSystemContext } from "../../../../../CodleDesignSystemProvider";
+import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
+import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
+export function InsertImageDialog(props) {
+    const { open, onClose, updateImg } = 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 onClick = (props) => {
+        updateImg(props);
+        handleOnClose();
+    };
+    const handleOnClose = () => {
+        setMode(null);
+        setSrc("");
+        setAltText("");
+        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: () => {
+                                        var _a;
+                                        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+                                    } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                                        var _a, _b;
+                                        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                        if (!file)
+                                            return;
+                                        const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                                        if (uploadByFile) {
+                                            setSrc(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 }))] })));
+}
+const StyledAlertDialog = styled(AlertDialog) `
+  gap: 16px;
+`;
+const StyledAlertDialogTitle = styled(AlertDialogTitle) `
+  color: ${({ theme }) => theme.color.foreground.neutralBase};
+  text-align: center;
+
+  /* Default/Heading/20px-Bd */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 28px; /* 140% */
+  letter-spacing: 0.25px;
+`;
+const Buttons = styled.div `
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+
+  // Actions가 없는 경우 하단이 디자인과 맞지 않는다
+  margin-bottom: -16px;
+`;
+const ButtonAndDescription = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  flex: 1 0 0;
+`;
+const Description = styled.div `
+  color: ${({ theme }) => theme.color.foreground.neutralBaseDisabled};
+  text-align: center;
+
+  /* Default/Label/12px-Md */
+  font-family: ${({ theme }) => theme.fontFamily.ui};
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px; /* 133.333% */
+`;
+const HiddenInput = styled.input `
+  display: none;
+`;

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

@@ -0,0 +1,9 @@
+import { ImageProps } from "../ProblemSelectNode";
+export interface InsertImageUploadedDialogBodyProps {
+    src: string;
+    setSrc: (src: string) => void;
+    altText: string;
+    setAltText: (altText: string) => void;
+    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

@@ -0,0 +1,51 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useRef } from "react";
+import styled from "@emotion/styled";
+import { CodleDesignSystemContext } from "../../../../../CodleDesignSystemProvider";
+import { AlertDialogActions, AlertDialogContent, } from "../../../../../components/AlertDialog";
+import Button from "../../../../../components/Button";
+import { RefreshLineIcon } from "../../../../../icons";
+import Input from "../../../../../components/Input";
+export function InsertImageUploadedDialogBody(props) {
+    const { src, setSrc, altText, setAltText, onClick } = props;
+    const inputRef = useRef(null);
+    const cdsContext = useContext(CodleDesignSystemContext);
+    const isDisabled = 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();
+                            }, startIcon: _jsx(RefreshLineIcon, {}) }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
+                                var _a, _b;
+                                const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                                if (!file)
+                                    return;
+                                const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
+                                if (uploadByFile) {
+                                    setSrc(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 }) }) })] }));
+}
+const Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;
+const HiddenInput = styled.input `
+  display: none;
+`;
+const ImagePreview = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;

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

@@ -0,0 +1,9 @@
+import { ImageProps } from "../ProblemSelectNode";
+export interface InsertImageUriDialogBodyProps {
+    src: string;
+    setSrc: (src: string) => void;
+    altText: string;
+    setAltText: (altText: string) => void;
+    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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "@emotion/styled";
+import { AlertDialogActions, AlertDialogContent, } from "../../../../../components/AlertDialog";
+import Input from "../../../../../components/Input";
+import { LinkIcon } from "../../../../../icons";
+import Button from "../../../../../components/Button";
+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 Inputs = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+`;

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

@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import styled from "@emotion/styled";
 import shadows from "../../../../../foundation/shadows";
-import { AddFillIcon, ListRadioIcon } from "../../../../../icons";
+import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../../icons";
 import Button from "../../../../../components/Button";
 import { FormSelection } from "./FormSelection";
 export default function SettingForm(props) {
@@ -31,6 +31,7 @@ export default function SettingForm(props) {
             return true;
         return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
     }
+    const hasMultipleAnswers = fields.filter((field) => field.isAnswer).length > 1;
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
             width: 12px;
             height: 12px;
@@ -49,7 +50,10 @@ export default function SettingForm(props) {
                                 },
                                 value: (fields.length + 1).toString(),
                             });
-                        } })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })));
+                        } }), hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                width: 14px;
+                height: 14px;
+              ` }), "\uC815\uB2F5\uC774 \uC5EC\uB7EC \uAC1C\uC778 \uBB38\uC81C\uC5D0\uB294 \uC815\uB2F5\uC744 \uBAA8\uB450 \uC120\uD0DD\uD574\uC57C \uD55C\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })));
 }
 const Form = styled.form(({ theme }) => css `
     display: flex;
@@ -102,3 +106,14 @@ const Buttons = styled.div `
   align-items: center;
   gap: 8px;
 `;
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);

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

@@ -14,6 +14,7 @@ import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
 import { useTheme } from "@emotion/react";
 import { css } from "@emotion/css";
 import { $isProblemInputNode } from "../../nodes";
+import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 function getParagraphContextMenuOptions(editor, node, setOpen) {
     return [
         new ComponentPickerOption("본문", {
@@ -185,6 +186,17 @@ function getProblemInputContextMenuOptions(node) {
         }),
     ];
 }
+function getProblemSelectContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
 function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption("회색", {
@@ -264,6 +276,9 @@ export function useContextMenuOptions() {
         if ($isProblemInputNode(node)) {
             return getProblemInputContextMenuOptions(node);
         }
+        else if ($isProblemSelectNode(node)) {
+            return getProblemSelectContextMenuOptions(node);
+        }
         else if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node, setImageOpen);
         }

package/package.json

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