@team-monolith/cds 1.8.7 → 1.9.0

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/ProblemInputNode/InputComponent.js

@@ -32,7 +32,10 @@ export function InputComponent(props) {
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), inputProps: {
+        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), 
+            // 한글 입력시에 onChange마다 update가 일어나는 것을 방지하기 위해 입력 완료후 onBlur시에 update하는 전략을 사용합니다.
+            // 이를 위해 answerInput을 state로 관리합니다.
+            inputProps: {
                 onBlur: (_e) => {
                     editor.update(() => {
                         const node = $getNodeByKey(nodeKey);

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.d.ts

@@ -1,9 +1,9 @@
 import { Control } from "react-hook-form";
 import { ProblemInputPayload } from "../ProblemInputNode";
-export interface FormAnswerProps {
+export interface FormSolutionProps {
     index: number;
     control: Control<ProblemInputPayload, any>;
     rules?: any;
     onDelete?: () => void;
 }
-export declare function FormSolution(props: FormAnswerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function FormSolution(props: FormSolutionProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/FormSolution.js

@@ -2,39 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import { Controller } from "react-hook-form";
-import Dropdown from "../../../../Dropdown";
-import DropdownItem from "../../../../Dropdown/DropdownItem";
 import Input from "../../../../../components/Input";
 import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../../../../icons";
 import SquareButton from "../../../../../components/SquareButton";
 import Tooltip from "../../../../../components/Tooltip";
+import TextTypeDropdown from "./TextTypeDropdown";
 export function FormSolution(props) {
     const { index, control, rules, onDelete } = props;
     const theme = useTheme();
-    const TextTypeDropdown = (disabled) => (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
-            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
-            > span {
-              font-weight: 700;
-            }
-          `, menuProps: {
-                anchorOrigin: {
-                    vertical: "bottom",
-                    horizontal: "center",
-                },
-                transformOrigin: {
-                    vertical: "top",
-                    horizontal: "center",
-                },
-            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
-                    onChange(value === "normal" ? "code" : "normal");
-                } }) }))) }));
     return (_jsx(Controller, { name: `solutions.${index}.value`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => {
-            const disabled = (error === null || error === void 0 ? void 0 : error.type) === "multiAnswerDisabled";
+            const disabled = (error === null || error === void 0 ? void 0 : error.type) === "enabled";
             return (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: !disabled && invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: !disabled ? error === null || error === void 0 ? void 0 : error.message : undefined, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
               > div {
                 padding: 4px 12px;
               }
-            `, startIcon: TextTypeDropdown(disabled), endIcon: _jsxs("div", Object.assign({ css: css `
+            `, startIcon: _jsx(TextTypeDropdown, { index: index, control: control, disabled: disabled }), endIcon: _jsxs("div", Object.assign({ css: css `
                   display: flex;
                   gap: 4px;
                 ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true }) })))] })) }));

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

@@ -4,7 +4,7 @@ import { css, useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import shadows from "../../../../../foundation/shadows";
 import { AddFillIcon, AlarmWarningFillIcon, InputMethodLineIcon, QuestionFillIcon, } from "../../../../../icons";
-import { useFieldArray, useForm, } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 import { $isProblemInputNode, } from "../ProblemInputNode";
 import { FormSolution } from "./FormSolution";
 import Button from "../../../../../components/Button";
@@ -42,15 +42,15 @@ export default function SettingForm(props) {
         });
         onClose();
     };
-    const multiAnswerDisabled = watch("showCharacterCount");
+    const multipleSolutionsDisabled = watch("showCharacterCount");
     return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
             width: 12px;
             height: 12px;
           ` }), "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC815\uB2F5" }), fields.map((field, index) => (_jsx(FormSolution, { index: index, control: control, rules: {
                                             validate: {
                                                 // required 옵션보다 먼저 검증되어야 하는데 priority 옵션이 없어서 validate에서 통합해서 검증합니다.
-                                                multiAnswerDisabled: () => index === 0 ||
-                                                    !multiAnswerDisabled ||
+                                                enabled: () => index === 0 ||
+                                                    !multipleSolutionsDisabled ||
                                                     "복수 정답이 불가능합니다.",
                                                 required: (value) => value !== "" || "정답을 입력해주세요.",
                                             },
@@ -58,7 +58,7 @@ export default function SettingForm(props) {
                                             ? () => {
                                                 remove(index);
                                             }
-                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multiAnswerDisabled, onClick: () => {
+                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multipleSolutionsDisabled, onClick: () => {
                                     append({
                                         textType: "normal",
                                         value: "",

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/TextTypeDropdown.d.ts

@@ -0,0 +1,7 @@
+import { Control } from "react-hook-form";
+import { ProblemInputPayload } from "../ProblemInputNode";
+export default function TextTypeDropdown(props: {
+    index: number;
+    control: Control<ProblemInputPayload, any>;
+    disabled: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/SettingForm/TextTypeDropdown.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import Dropdown from "../../../../Dropdown";
+import { css, useTheme } from "@emotion/react";
+import DropdownItem from "../../../../Dropdown/DropdownItem";
+export default function TextTypeDropdown(props) {
+    const theme = useTheme();
+    const { index, control, disabled } = props;
+    return (_jsx(Controller, { name: `solutions.${index}.textType`, control: control, render: ({ field: { value, onChange } }) => (_jsx(Dropdown, Object.assign({ label: value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
+            > span {
+              font-weight: 700;
+            }
+          `, menuProps: {
+                anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "center",
+                },
+                transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                },
+            } }, { children: _jsx(DropdownItem, { index: 0, label: value === "normal" ? "코드 텍스트" : "일반 텍스트", onClick: () => {
+                    onChange(value === "normal" ? "code" : "normal");
+                } }) }))) }));
+}

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

@@ -0,0 +1,39 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+export interface Selection {
+    isAnswer: boolean;
+    show: {
+        image?: any;
+        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,12 @@
+/** @jsxImportSource @emotion/react */
+import { ImagePayload } from "../ImageNode";
+export interface SelectBoxProps {
+    index: number;
+    isSelected?: boolean;
+    isAnswer?: boolean;
+    image?: ImagePayload;
+    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,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+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) })), _jsx(Content, { children: 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,73 @@
+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: 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));
+            }) }));
+    }
+    // 교사 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, 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,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { Controller, } from "react-hook-form";
+import { css } from "@emotion/react";
+import Input from "../../../../../components/Input";
+import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, } from "../../../../../icons";
+import SquareButton from "../../../../../components/SquareButton";
+import Switch from "../../../../../components/Switch";
+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 Container = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    gap: 8px;
+    align-items: center;
+    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;
+    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;
+    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/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,104 @@
+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, 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}번 선택지와 같은 내용입니다.`;
+    }
+    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(),
+                            });
+                        } })] }), _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;
+`;

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/ComponentAdderPlugin/ComponentAdderPlugin.js

@@ -22,7 +22,7 @@ import ReactDOM, { createPortal } from "react-dom";
 import { LexicalNodeMenuPlugin } from "@lexical/react/LexicalNodeMenuPlugin";
 import { useDraggableBlockMenu } from "./useDraggableBlockMenu";
 import { css as cssToClassName } from "@emotion/css";
-import { ComponentPickerMenuList, getBaseOptions, ComponentDrawerOption, } from "../ComponentPickerMenuPlugin";
+import { ComponentPickerOption, ComponentPickerMenuList, getBaseOptions, ComponentDrawerOption, } from "../ComponentPickerMenuPlugin";
 import { useFloatingMenu } from "./useFloatingMenu";
 import ComponentAdder from "./ComponentAdder";
 import styled from "@emotion/styled";
@@ -137,7 +137,7 @@ export function ComponentAdderPlugin(props) {
             return true;
         }
         const regex = new RegExp(query, "i");
-        return (option.keywords &&
+        return (option instanceof ComponentPickerOption &&
             (regex.test(option.title) ||
                 option.keywords.some((keyword) => regex.test(keyword))));
     });

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.d.ts

@@ -13,8 +13,7 @@ import { Theme } from "@emotion/react";
 export declare class ComponentDrawerOption extends MenuOption {
     title: string;
     component: ReactElement;
-    keywords?: Array<string>;
-    constructor(title: string, component: ReactElement, keywords?: Array<string>);
+    constructor(title: string, component: ReactElement);
 }
 export declare class ComponentPickerOption extends MenuOption {
     title: string;

package/dist/patterns/LexicalEditor/plugins/ComponentPickerMenuPlugin/ComponentPickerMenuPlugin.js

@@ -25,15 +25,15 @@ 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";
 export class ComponentDrawerOption extends MenuOption {
-    constructor(title, component, keywords) {
+    constructor(title, component) {
         super(title);
         this.title = title;
         this.component = component;
-        this.keywords = keywords;
     }
 }
 export class ComponentPickerOption extends MenuOption {
@@ -87,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 `
@@ -205,7 +216,7 @@ export function ComponentPickerMenuPlugin() {
         const regex = new RegExp(queryString, "i");
         return [
             ...getDynamicOptions(editor, queryString),
-            ...baseOptions.filter((option) => option.keywords &&
+            ...baseOptions.filter((option) => option instanceof ComponentPickerOption &&
                 (regex.test(option.title) ||
                     option.keywords.some((keyword) => regex.test(keyword)))),
         ];

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.7",
+  "version": "1.9.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,