@team-monolith/cds 1.10.0 → 1.10.1

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export type LexicalCustomConfig = {
+    freezeProblemNode: boolean;
+};
+declare const LexicalCustomConfigContext: import("react").Context<LexicalCustomConfig>;
+export { LexicalCustomConfigContext };

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const LexicalCustomConfigContext = createContext({
+    freezeProblemNode: false,
+});
+export { LexicalCustomConfigContext };

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

@@ -2,12 +2,16 @@
 import { SerializedEditorState, SerializedLexicalNode } from "lexical";
 export interface LexicalEditorProps {
     className?: string;
+    contentEditableClassName?: string;
     value?: any;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
     /** editable. 수정 모드 / 읽기 모드 여부
      *  initialConfig에 전달되므로 마운트 된 이후 수정해도 반영되지 않음
      */
     editable?: boolean;
+    /** freeze. 문제 블록을 수정하지 못하도록 함
+     */
+    freezeProblemNode?: boolean;
     /** 외부에서 플러그인을 주입하는 경우 활용함 */
     children?: JSX.Element | string | (JSX.Element | string)[];
 }

package/dist/patterns/LexicalEditor/LexicalEditor.js

@@ -11,6 +11,8 @@ import { getTheme } from "./theme";
 import { useTheme } from "@emotion/react";
 import Plugins from "./Plugins";
 import { ColoredQuoteNode, ProblemInputNode } from "./nodes";
+import { LexicalCustomConfigContext } from "./LexicalCustomConfigContext";
+import { ProblemSelectNode } from "./nodes/ProblemSelectNode";
 function validateValue(value) {
     var _a, _b;
     if (value && typeof value !== "object") {
@@ -28,13 +30,14 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, value, onChange, editable = true, children } = props;
+    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, children, } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
         onError: (error) => console.error(error),
         nodes: [
             ProblemInputNode,
+            ProblemSelectNode,
             HeadingNode,
             ListNode,
             ListItemNode,
@@ -60,5 +63,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, onChange: onChange }), _jsx(_Fragment, { children: children })] })));
+    return (_jsx(LexicalCustomConfigContext.Provider, Object.assign({ value: { freezeProblemNode: freezeProblemNode !== null && freezeProblemNode !== void 0 ? freezeProblemNode : false } }, { children: _jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, contentEditableClassName: contentEditableClassName, onChange: onChange }), _jsx(_Fragment, { children: children })] })) })));
 }

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

@@ -6,6 +6,7 @@ import { ReactElement } from "react";
 import { SerializedEditorState, SerializedLexicalNode } from "lexical";
 export interface PluginsProps {
     className?: string;
+    contentEditableClassName?: string;
     onChange?: (blocks: SerializedEditorState<SerializedLexicalNode>) => void;
 }
 export default function Plugins(props: PluginsProps): ReactElement;

package/dist/patterns/LexicalEditor/Plugins.js

@@ -28,8 +28,9 @@ 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 { className, contentEditableClassName, onChange } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -38,11 +39,11 @@ export default function Plugins(props) {
             setFloatingAnchorElem(_floatingAnchorElem);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextPlugin, { contentEditable: _jsx(ScrollArea, Object.assign({ className: className }, { children: _jsx(FloatingAnchor, Object.assign({ ref: onRef }, { children: _jsx(StyledContentEditable, { className: contentEditableClassName, isEditable: isEditable }) })) })), placeholder: null, ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: (editorState) => {
                     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

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import Input from "../../../../components/Input";
 import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
@@ -22,6 +22,7 @@ import useLexicalEditable from "@lexical/react/useLexicalEditable";
 import { $isProblemInputNode } from "./ProblemInputNode";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { $getNodeByKey } from "lexical";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
 export function InputComponent(props) {
     const { answer } = props, settingFormProps = __rest(props, ["answer"]);
     const { placeholder, nodeKey } = settingFormProps;
@@ -29,23 +30,29 @@ export function InputComponent(props) {
     const [settingOpen, setSettingOpen] = useState(false);
     const isEditable = useLexicalEditable();
     const [answerInput, setAnswerInput] = useState(answer);
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
     // 학생 view
     // TODO: "글자 수대로" 옵션시에 글자 수대로 입력칸을 표시해야 합니다.
     if (!isEditable) {
-        return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => setAnswerInput(e.target.value), 
-            // 한글 입력시에 onChange마다 update가 일어나는 것을 방지하기 위해 입력 완료후 onBlur시에 update하는 전략을 사용합니다.
-            // 이를 위해 answerInput을 state로 관리합니다.
-            inputProps: {
-                onBlur: (_e) => {
+        if (lexicalCustomConfig.freezeProblemNode) {
+            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, color: "default", fullWidth: true, inputProps: { readOnly: true } }));
+        }
+        else {
+            return (_jsx(Input, { size: "small", placeholder: placeholder || "여기에 입력하세요.", value: answerInput, onChange: (e) => {
+                    // SoT를 EditorState로 설정하는 경우 한글 입력시 문제가 생김.
+                    // ex) "나비" 입력시 -> "ㄴ나납ㅂ비"
+                    // SoT를 내부 State로 관리하고 EditorState를 따로 설정.
+                    // 문제를 더 파악하고 추후 개선 필요.
+                    setAnswerInput(e.target.value);
                     editor.update(() => {
                         const node = $getNodeByKey(nodeKey);
                         if (!$isProblemInputNode(node)) {
                             return;
                         }
-                        node.setAnswer(answerInput);
+                        node.setAnswer(e.target.value);
                     });
-                },
-            }, color: "default", fullWidth: true }));
+                }, color: "default", fullWidth: true }));
+        }
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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

@@ -0,0 +1,45 @@
+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 | null;
+        text: string;
+    };
+    value: string;
+}
+export interface ProblemSelectPayload {
+    selections: Selection[];
+    selected: string[];
+    hasMultipleAnswers?: boolean;
+    key?: NodeKey;
+}
+export type SerializedProblemSelectNode = Spread<ProblemSelectPayload, SerializedLexicalNode>;
+/**
+ * selections는 Selection타입의 배열로서 객관식 정보를 담고 있습니다. (교사용)
+ * selected는 학생이 선택한 답의 value를 담고 있습니다.(학생용)
+ */
+export declare class ProblemSelectNode extends DecoratorNode<ReactNode> {
+    __selections: Selection[];
+    __selected: string[];
+    __hasMultipleAnswers: boolean | undefined;
+    isInline(): boolean;
+    static getType(): string;
+    getSelections(): Selection[];
+    getSelected(): string[];
+    setSelections(selections: Selection[]): void;
+    setSelected(selected: string[]): void;
+    static clone(node: ProblemSelectNode): ProblemSelectNode;
+    constructor(selections: Selection[], selected: string[], hasMultipleAnswers?: boolean, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedProblemSelectNode): ProblemSelectNode;
+    exportJSON(): SerializedProblemSelectNode;
+    decorate(): ReactNode;
+}
+export declare function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, 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,74 @@
+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;
+    }
+    setSelections(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.__hasMultipleAnswers, node.__key);
+    }
+    constructor(selections, selected, hasMultipleAnswers, key) {
+        super(key);
+        this.__selections = selections;
+        this.__selected = selected;
+        this.__hasMultipleAnswers = hasMultipleAnswers;
+    }
+    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,
+            hasMultipleAnswers: serializedNode.hasMultipleAnswers,
+        });
+        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, hasMultipleAnswers: this.__hasMultipleAnswers, nodeKey: this.getKey() }));
+    }
+}
+export function $createProblemSelectNode({ selections, selected, hasMultipleAnswers, key, }) {
+    return $applyNodeReplacement(new ProblemSelectNode(selections, selected, hasMultipleAnswers, 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 | null;
+    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: 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,9 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { Selection } from "./ProblemSelectNode";
+export declare function SelectComponent(props: {
+    selections: Selection[];
+    selected: string[];
+    hasMultipleAnswers?: boolean;
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,85 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isProblemSelectNode } from "./ProblemSelectNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useContext, useState } from "react";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import SelectBox from "./SelectBox";
+import { css } from "@emotion/react";
+import SquareButton from "../../../../components/SquareButton";
+import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../icons";
+import SettingForm from "./SettingForm";
+import styled from "@emotion/styled";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
+export function SelectComponent(props) {
+    const { selected, hasMultipleAnswers } = props, settingFormProps = __rest(props, ["selected", "hasMultipleAnswers"]);
+    const { selections, nodeKey } = settingFormProps;
+    const [editor] = useLexicalComposerContext();
+    const [settingOpen, setSettingOpen] = useState(false);
+    const isEditable = useLexicalEditable();
+    const lexicalCustomConfig = useContext(LexicalCustomConfigContext);
+    // 학생 view
+    if (!isEditable) {
+        return (_jsxs(_Fragment, { children: [hasMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                width: 14px;
+                height: 14px;
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uC81C\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: () => {
+                        if (lexicalCustomConfig.freezeProblemNode)
+                            return;
+                        const isSelected = selected.includes(selection.value);
+                        if (isSelected) {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                node.setSelected(selected.filter((v) => v !== selection.value));
+                            });
+                        }
+                        else {
+                            editor.update(() => {
+                                const node = $getNodeByKey(nodeKey);
+                                if (!$isProblemSelectNode(node)) {
+                                    return;
+                                }
+                                node.setSelected([...selected, selection.value]);
+                            });
+                        }
+                    }, 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: selections.map((selection, index) => (_jsx(SelectBox, { index: index + 1, isAnswer: selection.isAnswer, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen(true) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setSettingOpen(true);
+                        } })] })), settingOpen && (_jsx(SettingForm, Object.assign({}, settingFormProps, { onClose: () => setSettingOpen(false) })))] }));
+}
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    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/FormSelection.d.ts

@@ -0,0 +1,14 @@
+import { Selection } from "../ProblemSelectNode";
+import { Control, UseFormWatch } from "react-hook-form";
+export interface FormSelectionProps {
+    index: number;
+    control: Control<{
+        selections: Selection[];
+    }, any>;
+    watch: UseFormWatch<{
+        selections: Selection[];
+    }>;
+    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,91 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+import { Controller } from "react-hook-form";
+import { 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, rules, watch, onDelete } = props;
+    const [imageOpen, setImageOpen] = useState(false);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          gap: 4px;
+        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
+                                        onChange(props);
+                                    }, deleteButton: value !== null }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
+                    height: auto;
+                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                    max-width: min(400px, 100%);
+                    width: fit-content;
+                    border-radius: 6px;
+                  `, draggable: "false" }))] })) }), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+                                ? "activeDanger"
+                                : inputFocused
+                                    ? "activePrimary"
+                                    : "default", value: value, onChange: onChange, inputProps: {
+                                onFocus: (_e) => {
+                                    setInputFocused(true);
+                                },
+                                onBlur: (_e) => {
+                                    setInputFocused(false);
+                                },
+                            }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
+                flex: 1;
+              ` })) })] })), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          height: 36px;
+          gap: 8px;
+          align-items: center;
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+                            setImageOpen(true);
+                        } }), _jsx(Controller, { name: `selections.${index}.isAnswer`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(Answer, Object.assign({ onClick: () => {
+                                onChange(!value);
+                            } }, { children: ["\uC815\uB2F5", _jsx(Switch, { checked: value, size: "small" })] }))) }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+}
+const Container = styled.div(({ theme }) => css `
+    display: flex;
+    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,10 @@
+import { ImageProps } from "../ProblemSelectNode";
+export interface InsertImageDialogProps {
+    title: string;
+    open: boolean;
+    onClose: () => void;
+    updateImg: (props: ImageProps | null) => void;
+    /** 전달하면 "이미지 삭제하기" 버튼이 생깁니다. */
+    deleteButton?: boolean;
+}
+export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;