@team-monolith/cds 1.10.0 → 1.10.1

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

@@ -0,0 +1,109 @@
+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 "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useContext, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { css, 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";
+import { useForm } from "react-hook-form";
+export function InsertImageDialog(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 { control, setValue, watch, reset } = useForm({
+        defaultValues: { src: "", altText: "" },
+    });
+    const onClick = (props) => {
+        updateImg(props);
+        handleOnClose();
+    };
+    const handleOnClose = () => {
+        setMode(null);
+        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 `
+              display: flex;
+              flex-direction: column;
+              gap: 16px;
+              // Actions가 없는 경우 하단이 디자인과 맞지 않는다
+              margin-bottom: -16px;
+            ` }, { 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) {
+                                                    setValue("src", yield uploadByFile(file));
+                                                    setMode("file");
+                                                }
+                                            }) })] })] }), 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;
+`;
+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;
+  flex: 1;
+  align-items: flex-start;
+  gap: 8px;
+`;
+const Divider = styled.div(({ theme }) => css `
+    width: 100%;
+    height: 1px;
+    background: ${theme.color.background.neutralAltActive};
+  `);
+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";
+import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
+export interface InsertImageUploadedDialogBodyProps {
+    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

@@ -0,0 +1,50 @@
+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";
+import { Controller, } from "react-hook-form";
+export function InsertImageUploadedDialogBody(props) {
+    const { control, watch, setValue, onClick } = props;
+    const inputRef = useRef(null);
+    const cdsContext = useContext(CodleDesignSystemContext);
+    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();
+                            }, 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) {
+                                    setValue("src", yield uploadByFile(file));
+                                }
+                            }) }), _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;
+  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,8 @@
+import { ImageProps } from "../ProblemSelectNode";
+import { Control, UseFormWatch } from "react-hook-form";
+export interface InsertImageUriDialogBodyProps {
+    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

@@ -0,0 +1,17 @@
+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";
+import { Controller } from "react-hook-form";
+export function InsertImageUriDialogBody(props) {
+    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;
+  flex-direction: column;
+  gap: 16px;
+`;

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

@@ -0,0 +1,8 @@
+import { Selection } from "../ProblemSelectNode";
+import { NodeKey } from "lexical";
+export interface SettingFormProps {
+    selections: Selection[];
+    nodeKey: NodeKey;
+    onClose: () => void;
+}
+export default function SettingForm(props: SettingFormProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { useFieldArray, useForm, } from "react-hook-form";
+import { $isProblemSelectNode } from "../ProblemSelectNode";
+import { $getNodeByKey } from "lexical";
+import { css } from "@emotion/react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import styled from "@emotion/styled";
+import shadows from "../../../../../foundation/shadows";
+import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../../icons";
+import Button from "../../../../../components/Button";
+import { FormSelection } from "./FormSelection";
+import Tooltip from "../../../../../components/Tooltip";
+import { useState } from "react";
+export default function SettingForm(props) {
+    const { selections, nodeKey, onClose } = props;
+    const [editor] = useLexicalComposerContext();
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const { control, handleSubmit, watch } = useForm({
+        mode: "all",
+        defaultValues: {
+            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 } = useFieldArray({
+        control,
+        name: "selections",
+        keyName: "uid",
+    });
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isProblemSelectNode(node)) {
+                return;
+            }
+            node.setSelections(data.selections);
+        });
+        onClose();
+    };
+    function validateDuplicatedSelection(fields, index) {
+        if (index === 0)
+            return true;
+        const duplicatedIndex = fields
+            .slice(0, index)
+            .findIndex((prevField) => prevField.show.text === fields[index].show.text);
+        if (duplicatedIndex < 0)
+            return true;
+        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+    }
+    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, watch: watch, rules: {
+                                    required: "필수 입력 항목입니다.",
+                                    validate: () => validateDuplicatedSelection(fields, index),
+                                }, onDelete: index !== 0
+                                    ? () => {
+                                        remove(index);
+                                    }
+                                    : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uC120\uD0DD\uC9C0 \uCD94\uAC00", onClick: () => {
+                            append({
+                                isAnswer: false,
+                                show: {
+                                    text: "",
+                                },
+                                value: (fields.length + 1).toString(),
+                            });
+                        } }), 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(Tooltip, Object.assign({ open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) }) }))] })] })));
+}
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
+  `);
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const Label = styled.div(({ theme }) => css `
+    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% */
+  `);
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  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/nodes/ProblemSelectNode/SettingForm/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./SettingForm";

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

@@ -0,0 +1 @@
+export { default } from "./SettingForm";

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

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

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { ReactElement } from "react";
+export default function ActionsPlugin(): ReactElement;

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { mergeRegister } from "@lexical/utils";
+import { useEffect, useState } from "react";
+import { Button, LockFillIcon, LockUnlockFillIcon } from "../../../..";
+export default function ActionsPlugin() {
+    const [editor] = useLexicalComposerContext();
+    const [isEditable, setIsEditable] = useState(() => editor.isEditable());
+    useEffect(() => {
+        return mergeRegister(editor.registerEditableListener((editable) => {
+            setIsEditable(editable);
+        }));
+    }, [editor]);
+    return (_jsx(Button, { color: "primary", size: "small", startIcon: isEditable ? _jsx(LockFillIcon, {}) : _jsx(LockUnlockFillIcon, {}), onClick: () => {
+            editor.setEditable(!editor.isEditable());
+        }, title: "Read-Only Mode", label: `${!isEditable ? "수정 모드" : "읽기 모드"}로 변경`, "aria-label": `${!isEditable ? "Unlock" : "Lock"} read-only mode` }));
+}

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/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -25,6 +25,7 @@ import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, D
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
+import { INSERT_PROBLEM_SELECT_COMMAND } from "../ProblemSelectPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -86,7 +87,18 @@ function getQuizContextOptions(editor, theme) {
             icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
             keywords: ["problem select", "객관식 입력"],
             onSelect: () => {
-                // TODO: 객관식 입력 칸 추가
+                editor.dispatchCommand(INSERT_PROBLEM_SELECT_COMMAND, {
+                    selections: [
+                        {
+                            isAnswer: false,
+                            show: {
+                                text: "",
+                            },
+                            value: "1",
+                        },
+                    ],
+                    selected: [],
+                });
             },
         }),
         new ComponentDrawerOption("메뉴구분선", (_jsx("div", { css: css `

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/dist/patterns/LexicalEditor/plugins/ProblemSelectPlugin/index.d.ts

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