@team-monolith/cds 1.8.8 → 1.9.1

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -11,6 +11,7 @@ import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
 import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
+import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -35,6 +36,7 @@ export function LexicalEditor(props) {
         onError: (error) => console.error(error),
         nodes: [
             ProblemInputNode,
+            ProblemSelectNode,
             HeadingNode,
             ListNode,
             ListItemNode,

package/dist/patterns/LexicalEditor/Plugins.js

@@ -28,6 +28,7 @@ import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import ListMaxIndentLevelPlugin from "./plugins/ListMaxIndentLevelPlugin";
 import styled from "@emotion/styled";
 import ProblemInputPlugin from "./plugins/ProblemInputPlugin";
+import ProblemSelectPlugin from "./plugins/ProblemSelectPlugin";
 export default function Plugins(props) {
     const { className, onChange } = props;
     const isEditable = useLexicalEditable();
@@ -42,7 +43,7 @@ export default function Plugins(props) {
                     onChange === null || onChange === void 0 ? void 0 : onChange(editorState.toJSON());
                 }, 
                 // ignore 하지 않으면 Form에서 수정하지 않았는데 Dirty로 처리됨.
-                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {})] }));
+                ignoreSelectionChange: true }), _jsx(AutoFocusPlugin, {}), isEditable && (_jsxs(_Fragment, { children: [_jsx(TabIndentationPlugin, {}), _jsx(ComponentPickerMenuPlugin, {}), _jsx(MarkdownShortcutPlugin, { transformers: CODLE_TRANSFORMERS }), _jsx(HistoryPlugin, {})] })), floatingAnchorElem && isEditable && (_jsxs(_Fragment, { children: [_jsx(ComponentAdderPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingLinkEditorPlugin, { anchorElem: floatingAnchorElem, isLinkEditMode: isLinkEditMode, setIsLinkEditMode: setIsLinkEditMode })] })), !isEditable && _jsx(LexicalClickableLinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(HorizontalRulePlugin, {}), _jsx(ImagesPlugin, {}), _jsx(TablePlugin, {}), _jsx(LinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 5 }), _jsx(ProblemInputPlugin, {}), _jsx(ProblemSelectPlugin, {})] }));
 }
 const ScrollArea = styled.div `
   min-height: 150px;

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

@@ -0,0 +1,43 @@
+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?: ImageProps;
+        text: string;
+    };
+    value: string;
+}
+export interface ProblemSelectPayload {
+    selections: Selection[];
+    selected: string[];
+    key?: NodeKey;
+}
+export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
+/**
+ * selections는 Selection타입의 배열로서 객관식 정보를 담고 있습니다. (교사용)
+ * selected는 학생이 선택한 답의 value를 담고 있습니다.(학생용)
+ */
+export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
+    __selections: Selection[];
+    __selected: string[];
+    isInline(): boolean;
+    static getType(): string;
+    getSelections(): Selection[];
+    getSelected(): string[];
+    setSolutions(selections: Selection[]): void;
+    setSelected(selected: string[]): void;
+    static clone(node: ProblemSelectNode): ProblemSelectNode;
+    constructor(selections: Selection[], selected: string[], key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedProblemSelectNode): ProblemSelectNode;
+    exportJSON(): SerializedProblemSelectNode;
+    decorate(): ReactNode;
+}
+export declare function $createProblemSelectNode({ selections, selected, key, }: ProblemSelectPayload): ProblemSelectNode;
+export declare function $isProblemSelectNode(node: LexicalNode | null | undefined): node is ProblemSelectNode;

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

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { SelectComponent } from "./SelectComponent";
+/**
+ * selections는 Selection타입의 배열로서 객관식 정보를 담고 있습니다. (교사용)
+ * selected는 학생이 선택한 답의 value를 담고 있습니다.(학생용)
+ */
+export class ProblemSelectNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
+    static getType() {
+        return "problem-select";
+    }
+    getSelections() {
+        return this.__selections;
+    }
+    getSelected() {
+        return this.__selected;
+    }
+    setSolutions(selections) {
+        const self = this.getWritable();
+        self.__selections = selections;
+    }
+    setSelected(selected) {
+        const self = this.getWritable();
+        self.__selected = selected;
+    }
+    static clone(node) {
+        return new ProblemSelectNode(node.__selections, node.__selected, node.__key);
+    }
+    constructor(selections, selected, key) {
+        super(key);
+        this.__selections = selections;
+        this.__selected = selected;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.problemSelect);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        const node = $createProblemSelectNode({
+            key: serializedNode.key,
+            selections: serializedNode.selections,
+            selected: serializedNode.selected,
+        });
+        return node;
+    }
+    exportJSON() {
+        return {
+            version: 1,
+            type: "problem-select",
+            selections: this.__selections,
+            selected: this.__selected,
+        };
+    }
+    decorate() {
+        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, nodeKey: this.getKey() }));
+    }
+}
+export function $createProblemSelectNode({ selections, selected, key, }) {
+    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, key));
+}
+export function $isProblemSelectNode(node) {
+    return node instanceof ProblemSelectNode;
+}

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

@@ -0,0 +1,11 @@
+import { ImageProps } from "./ProblemSelectNode";
+export interface SelectBoxProps {
+    index: number;
+    isSelected?: boolean;
+    isAnswer?: boolean;
+    image?: ImageProps;
+    text: string;
+    onClick: () => void;
+    fullWidth?: boolean;
+}
+export default function SelectBox(props: SelectBoxProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,73 @@
+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";
+export default function SelectBox(props) {
+    const { index, isSelected, isAnswer, image, text, onClick, fullWidth } = props;
+    const theme = useTheme();
+    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) })), _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;
+          ` }))] })));
+}
+const Container = styled.div(({ theme, isSelected, fullWidth }) => css `
+    cursor: pointer;
+    display: flex;
+    box-sizing: border-box;
+    width: ${fullWidth ? "100%" : "400px"};
+    padding: 8px;
+    gap: 8px;
+    border-radius: 8px;
+    background: ${isSelected
+    ? theme.color.container.primaryContainer
+    : theme.color.background.neutralAlt};
+    border: ${isSelected
+    ? `1px solid ${theme.color.foreground.primary}`
+    : "1px solid transparent"};
+    color: ${isSelected
+    ? theme.color.container.primaryOnContainer
+    : theme.color.foreground.neutralBase};
+  `);
+const Index = styled.div(({ theme, isSelected }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: ${isSelected
+    ? "none"
+    : `1px solid ${theme.color.background.neutralAltActive}`};
+    background: ${isSelected
+    ? theme.color.background.primary
+    : theme.color.background.neutralBase};
+    color: ${isSelected
+    ? theme.color.foreground.neutralAlt
+    : theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    flex: 1;
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+  `);

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

@@ -0,0 +1,8 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { Selection } from "./ProblemSelectNode";
+export declare function SelectComponent(props: {
+    selections: Selection[];
+    selected: string[];
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isProblemSelectNode, } from "./ProblemSelectNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useState } from "react";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useFieldArray, useForm } from "react-hook-form";
+import SelectBox from "./SelectBox";
+import { css } from "@emotion/react";
+import SquareButton from "../../../../components/SquareButton";
+import { Settings3FillIcon } from "../../../../icons";
+import SettingForm from "./SettingForm";
+export function SelectComponent(props) {
+    const { selections, selected, nodeKey } = props;
+    const [editor] = useLexicalComposerContext();
+    const [settingOpen, setSettingOpen] = useState(false);
+    const isEditable = useLexicalEditable();
+    const { control, handleSubmit } = useForm({
+        mode: "all",
+        defaultValues: {
+            selections,
+            selected,
+        },
+    });
+    const { fields, append, remove, update } = useFieldArray({
+        control,
+        name: "selections",
+        keyName: "uid",
+    });
+    // 학생 view
+    if (!isEditable) {
+        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 `
+          display: flex;
+          gap: 4px;
+        ` }, { children: [_jsx("div", Object.assign({ css: css `
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+          ` }, { 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.d.ts

@@ -0,0 +1,11 @@
+import { ProblemSelectPayload } from "../ProblemSelectNode";
+import { Control, FieldArrayWithId, UseFieldArrayUpdate } from "react-hook-form";
+export interface FormSelectionProps {
+    index: number;
+    control: Control<ProblemSelectPayload, any>;
+    field: FieldArrayWithId<ProblemSelectPayload, "selections", "uid">;
+    update: UseFieldArrayUpdate<ProblemSelectPayload, "selections">;
+    rules?: any;
+    onDelete?: () => void;
+}
+export declare function FormSelection(props: FormSelectionProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,95 @@
+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, 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;
+    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;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+    margin-top: 8px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Answer = styled.div(({ theme }) => css `
+    display: flex;
+    align-items: center;
+    padding-right: 4px;
+    gap: 8px;
+    color: ${theme.color.foreground.neutralBase};
+    cursor: pointer;
+    /* Default/Label/14px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 114.286% */
+  `);

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.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource @emotion/react */
+import { Control, FieldArrayWithId, UseFieldArrayAppend, UseFieldArrayRemove, UseFieldArrayUpdate, UseFormHandleSubmit } from "react-hook-form";
+import { ProblemSelectPayload } from "../ProblemSelectNode";
+import { NodeKey } from "lexical";
+export interface SettingFormProps {
+    control: Control<ProblemSelectPayload, any>;
+    handleSubmit: UseFormHandleSubmit<ProblemSelectPayload, undefined>;
+    fields: FieldArrayWithId<ProblemSelectPayload, "selections", "uid">[];
+    append: UseFieldArrayAppend<ProblemSelectPayload, "selections">;
+    remove: UseFieldArrayRemove;
+    update: UseFieldArrayUpdate<ProblemSelectPayload, "selections">;
+    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,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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";
+export default function SettingForm(props) {
+    const { control, handleSubmit, fields, append, remove, update, nodeKey, onClose, } = props;
+    const [editor] = useLexicalComposerContext();
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isProblemSelectNode(node)) {
+                return;
+            }
+            node.setSolutions(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 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;
+          ` }), "\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: {
+                                    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(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })));
+}
+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/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/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;

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

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createProblemSelectNode, ProblemSelectNode, } from "../../nodes/ProblemSelectNode";
+export const INSERT_PROBLEM_SELECT_COMMAND = createCommand("INSERT_PROBLEM_SELECT_COMMAND");
+export default function ProblemInputPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([ProblemSelectNode])) {
+            throw new Error("ProblemSelectNode: ProblemSelectNode not registered on editor");
+        }
+        editor.registerCommand(INSERT_PROBLEM_SELECT_COMMAND, (payload) => {
+            const problemInputNode = $createProblemSelectNode(payload);
+            $insertNodeToNearestRoot(problemInputNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

package/dist/patterns/LexicalEditor/theme.d.ts

@@ -29,4 +29,5 @@ export declare function getTheme(theme: Theme): {
         strikethrough: string;
     };
     problemInput: string;
+    problemSelect: string;
 };

package/dist/patterns/LexicalEditor/theme.js

@@ -252,6 +252,13 @@ export function getTheme(theme) {
       flex: 1;
       gap: 4px;
       margin-bottom: 8px;
+    `,
+        problemSelect: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
     };
 }

package/package.json

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