@team-monolith/cds 1.9.9 → 1.10.0

package/dist/icons/Custom.d.ts

@@ -87,3 +87,11 @@ export declare const customQuizColorSvg: string;
 export declare const CustomQuizColorIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
 } & React.RefAttributes<any>>;
+export declare const customPdfColorSvg: string;
+export declare const CustomPdfColorIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;
+export declare const customPdfSvg: string;
+export declare const CustomPdfIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & React.RefAttributes<any>>;

package/dist/icons/Custom.js

@@ -91,3 +91,14 @@ export const CustomQuizColorIcon = forwardRef((props, ref) => {
     const uniqueId = useMemo(uid, []);
     return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", Object.assign({ clipPath: `url(#clip0_${uniqueId})` }, { children: [_jsx("path", { d: "M19.5238 19.81C19.5238 20.3913 19.2927 20.9478 18.8819 21.3584C18.4712 21.7691 17.9137 22.0002 17.3333 22.0002H4.19048C3.60913 22.0002 3.05258 21.7691 2.64186 21.3584C2.23115 20.9478 2 20.3903 2 19.81V6.09309C2 5.5118 2.23115 4.95531 2.64186 4.54463C3.05258 4.13396 3.61012 3.90283 4.19048 3.90283H17.3333C17.9147 3.90283 18.4712 4.13396 18.8819 4.54463C19.2927 4.95531 19.5238 5.51279 19.5238 6.09309V19.81C19.5238 20.3913 19.2927 20.9478 18.8819 21.3584C18.4712 21.7691 17.9137 22.0002 17.3333 22.0002", fill: "#FBEAF3" }), _jsx("path", { d: "M21.9999 17.9072C21.9999 18.4884 21.7687 19.0449 21.358 19.4556C20.9473 19.8663 20.3898 20.0974 19.8094 20.0974H6.66655C6.0852 20.0974 5.52865 19.8663 5.11794 19.4556C4.70723 19.0449 4.47607 18.4875 4.47607 17.9072V4.19026C4.47607 3.60897 4.70723 3.05247 5.11794 2.6418C5.52865 2.23113 6.08619 2 6.66655 2H19.8094C20.3908 2 20.9473 2.23113 21.358 2.6418C21.7687 3.05247 21.9999 3.60996 21.9999 4.19026V17.9072C21.9999 18.4884 21.7687 19.0449 21.358 19.4556C20.9473 19.8663 20.3898 20.0974 19.8094 20.0974", fill: "#F889AA" }), _jsx("path", { d: "M17.2836 14.917C18.4152 13.8846 19.0484 12.3944 19.0484 10.7363C19.0484 7.62109 16.8132 5.09766 13.2381 5.09766C9.66292 5.09766 7.42773 7.62274 7.42773 10.7363C7.42773 13.8499 9.66292 16.375 13.2381 16.375C14.044 16.375 14.7805 16.246 15.4394 16.0113L16.0651 16.9064C16.118 16.9833 16.2147 17.0172 16.304 16.9916L18.0341 16.494C18.1011 16.4742 18.1556 16.4237 18.1796 16.3568C18.2028 16.2907 18.1928 16.2171 18.1523 16.1584L17.2836 14.917ZM13.2381 13.6656C11.3815 13.6656 10.2192 12.3539 10.2192 10.7363C10.2192 9.11878 11.3798 7.80706 13.2381 7.80706C15.0963 7.80706 16.2569 9.11878 16.2569 10.7363C16.2569 11.4331 16.0403 12.0728 15.6468 12.5762L14.8864 11.4885C14.8326 11.4124 14.7367 11.3777 14.6475 11.4033L12.9165 11.9009C12.8496 11.9208 12.795 11.9712 12.771 12.0381C12.7479 12.1042 12.7578 12.1778 12.7983 12.2365L13.7696 13.6251C13.6001 13.6499 13.4241 13.6656 13.2381 13.6656Z", fill: "#FBEAF3" })] })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: `clip0_${uniqueId}` }, { children: _jsx("rect", { width: "20", height: "20", fill: "white", transform: "translate(2 2)" }) })) })] })));
 });
+import customPdfColorSvgImport from "./custom/pdf-color.svg";
+export const customPdfColorSvg = customPdfColorSvgImport;
+export const CustomPdfColorIcon = forwardRef((props, ref) => {
+    const uniqueId = useMemo(uid, []);
+    return (_jsxs("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", Object.assign({ clipPath: `url(#clip0_${uniqueId})` }, { children: [_jsx("path", { d: "M21 6.5V20.8C21 21.3839 20.7626 21.9428 20.3407 22.3553C19.9188 22.7678 19.3461 23 18.75 23H5.25C4.65285 23 4.08118 22.7678 3.65931 22.3553C3.23743 21.9428 3 21.3829 3 20.8V3.2C3 2.61612 3.23743 2.05716 3.65931 1.64466C4.08118 1.23216 4.65285 1 5.25 1H15.375L21 6.5Z", fill: "#FF5850" }), _jsx("path", { d: "M16.5 6.5H21L15.375 1V5.4C15.375 5.69194 15.4932 5.97192 15.7041 6.17817C15.9151 6.38442 16.2014 6.5 16.5 6.5Z", fill: "#F1E0E0" }), _jsx("path", { d: "M12.7437 6.80746H10.6651C10.5459 6.80746 10.4507 6.90052 10.4481 7.01705C10.4089 8.90249 9.84591 11.0932 8.91557 13.1195C7.98522 15.1502 6.7418 16.8982 5.43701 17.9757C5.35073 18.047 5.3365 18.1723 5.40321 18.2618L6.63863 19.9133C6.70711 20.0046 6.83608 20.0273 6.93303 19.9646C10.4934 17.6731 14.4149 16.1077 18.2217 16.5695C18.332 16.5825 18.4352 16.5138 18.4609 16.4086L18.9439 14.4066C18.9697 14.3005 18.9083 14.1944 18.8043 14.1579C15.6165 13.0343 13.0719 9.94435 12.9598 7.00923C12.9554 6.89617 12.8584 6.80833 12.7437 6.80833V6.80746ZM11.1427 15.0989C10.9586 15.165 10.7869 14.9788 10.8732 14.8067C10.9871 14.5805 11.0965 14.3527 11.2023 14.1222C11.478 13.5195 11.728 12.8986 11.9476 12.269C12.0046 12.1055 12.2269 12.075 12.3292 12.2168C12.7926 12.8577 13.3209 13.4526 13.9053 13.9909C14.0334 14.1083 13.9729 14.317 13.8012 14.3518C12.8984 14.5336 12.0108 14.7884 11.1427 15.0989Z", fill: "#F1E0E0" })] })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: `clip0_${uniqueId}` }, { children: _jsx("rect", { width: "18", height: "22", fill: "white", transform: "translate(3 1)" }) })) })] })));
+});
+import customPdfSvgImport from "./custom/pdf.svg";
+export const customPdfSvg = customPdfSvgImport;
+export const CustomPdfIcon = forwardRef((props, ref) => {
+    return (_jsx("svg", Object.assign({}, props, { ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M21 20.8V6.5L15.375 1H5.25C4.65285 1 4.08118 1.23216 3.65931 1.64466C3.23743 2.05716 3 2.61612 3 3.2V20.8C3 21.3829 3.23743 21.9428 3.65931 22.3553C4.08118 22.7678 4.65285 23 5.25 23H18.75C19.3461 23 19.9188 22.7678 20.3407 22.3553C20.7626 21.9428 21 21.3839 21 20.8ZM10.6651 6.80746H12.7437V6.80832C12.8585 6.80832 12.9554 6.89616 12.9599 7.00922C13.0719 9.94434 15.6166 13.0343 18.8043 14.1579C18.9084 14.1944 18.9698 14.3005 18.944 14.4066L18.461 16.4086C18.4352 16.5138 18.332 16.5825 18.2217 16.5695C14.415 16.1077 10.4935 17.6731 6.93308 19.9646C6.83613 20.0272 6.70717 20.0046 6.63868 19.9133L5.40326 18.2618C5.33655 18.1723 5.35078 18.047 5.43706 17.9757C6.74186 16.8982 7.98528 15.1502 8.91562 13.1195C9.84597 11.0932 10.409 8.90248 10.4481 7.01704C10.4508 6.90051 10.546 6.80746 10.6651 6.80746ZM10.8733 14.8066C10.787 14.9788 10.9586 15.1649 11.1428 15.0989C12.0108 14.7884 12.8985 14.5336 13.8013 14.3518C13.9729 14.317 14.0334 14.1083 13.9053 13.9909C13.321 13.4526 12.7927 12.8577 12.3293 12.2168C12.227 12.075 12.0046 12.1055 11.9477 12.269C11.728 12.8986 11.4781 13.5195 11.2024 14.1222C11.0965 14.3527 10.9871 14.5805 10.8733 14.8066Z", fill: "#363636" }) })));
+});

package/dist/icons/custom/pdf-color.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_881_50)">
+<path d="M21 6.5V20.8C21 21.3839 20.7626 21.9428 20.3407 22.3553C19.9188 22.7678 19.3461 23 18.75 23H5.25C4.65285 23 4.08118 22.7678 3.65931 22.3553C3.23743 21.9428 3 21.3829 3 20.8V3.2C3 2.61612 3.23743 2.05716 3.65931 1.64466C4.08118 1.23216 4.65285 1 5.25 1H15.375L21 6.5Z" fill="#FF5850" style="fill:#FF5850;fill:color(display-p3 1.0000 0.3449 0.3125);fill-opacity:1;"/>
+<path d="M16.5 6.5H21L15.375 1V5.4C15.375 5.69194 15.4932 5.97192 15.7041 6.17817C15.9151 6.38442 16.2014 6.5 16.5 6.5Z" fill="#F1E0E0" style="fill:#F1E0E0;fill:color(display-p3 0.9451 0.8784 0.8784);fill-opacity:1;"/>
+<path d="M12.7437 6.80746H10.6651C10.5459 6.80746 10.4507 6.90052 10.4481 7.01705C10.4089 8.90249 9.84591 11.0932 8.91557 13.1195C7.98522 15.1502 6.7418 16.8982 5.43701 17.9757C5.35073 18.047 5.3365 18.1723 5.40321 18.2618L6.63863 19.9133C6.70711 20.0046 6.83608 20.0273 6.93303 19.9646C10.4934 17.6731 14.4149 16.1077 18.2217 16.5695C18.332 16.5825 18.4352 16.5138 18.4609 16.4086L18.9439 14.4066C18.9697 14.3005 18.9083 14.1944 18.8043 14.1579C15.6165 13.0343 13.0719 9.94435 12.9598 7.00923C12.9554 6.89617 12.8584 6.80833 12.7437 6.80833V6.80746ZM11.1427 15.0989C10.9586 15.165 10.7869 14.9788 10.8732 14.8067C10.9871 14.5805 11.0965 14.3527 11.2023 14.1222C11.478 13.5195 11.728 12.8986 11.9476 12.269C12.0046 12.1055 12.2269 12.075 12.3292 12.2168C12.7926 12.8577 13.3209 13.4526 13.9053 13.9909C14.0334 14.1083 13.9729 14.317 13.8012 14.3518C12.8984 14.5336 12.0108 14.7884 11.1427 15.0989Z" fill="#F1E0E0" style="fill:#F1E0E0;fill:color(display-p3 0.9451 0.8784 0.8784);fill-opacity:1;"/>
+</g>
+<defs>
+<clipPath id="clip0_881_50">
+<rect width="18" height="22" fill="white" style="fill:white;fill-opacity:1;" transform="translate(3 1)"/>
+</clipPath>
+</defs>
+</svg>

package/dist/icons/custom/pdf.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 20.8V6.5L15.375 1H5.25C4.65285 1 4.08118 1.23216 3.65931 1.64466C3.23743 2.05716 3 2.61612 3 3.2V20.8C3 21.3829 3.23743 21.9428 3.65931 22.3553C4.08118 22.7678 4.65285 23 5.25 23H18.75C19.3461 23 19.9188 22.7678 20.3407 22.3553C20.7626 21.9428 21 21.3839 21 20.8ZM10.6651 6.80746H12.7437V6.80832C12.8585 6.80832 12.9554 6.89616 12.9599 7.00922C13.0719 9.94434 15.6166 13.0343 18.8043 14.1579C18.9084 14.1944 18.9698 14.3005 18.944 14.4066L18.461 16.4086C18.4352 16.5138 18.332 16.5825 18.2217 16.5695C14.415 16.1077 10.4935 17.6731 6.93308 19.9646C6.83613 20.0272 6.70717 20.0046 6.63868 19.9133L5.40326 18.2618C5.33655 18.1723 5.35078 18.047 5.43706 17.9757C6.74186 16.8982 7.98528 15.1502 8.91562 13.1195C9.84597 11.0932 10.409 8.90248 10.4481 7.01704C10.4508 6.90051 10.546 6.80746 10.6651 6.80746ZM10.8733 14.8066C10.787 14.9788 10.9586 15.1649 11.1428 15.0989C12.0108 14.7884 12.8985 14.5336 13.8013 14.3518C13.9729 14.317 14.0334 14.1083 13.9053 13.9909C13.321 13.4526 12.7927 12.8577 12.3293 12.2168C12.227 12.075 12.0046 12.1055 11.9477 12.269C11.728 12.8986 11.4781 13.5195 11.2024 14.1222C11.0965 14.3527 10.9871 14.5805 10.8733 14.8066Z" fill="#363636" style="fill:#363636;fill:color(display-p3 0.2118 0.2118 0.2118);fill-opacity:1;"/>
+</svg>

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

@@ -2,16 +2,12 @@
 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,8 +11,6 @@ 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") {
@@ -30,14 +28,13 @@ function validateValue(value) {
     return true;
 }
 export function LexicalEditor(props) {
-    const { className, contentEditableClassName, value, onChange, editable = true, freezeProblemNode, children, } = props;
+    const { className, value, onChange, editable = true, children } = props;
     const theme = useTheme();
     const initialConfig = {
         namespace: "CodleLexicalEditor",
         onError: (error) => console.error(error),
         nodes: [
             ProblemInputNode,
-            ProblemSelectNode,
             HeadingNode,
             ListNode,
             ListItemNode,
@@ -63,5 +60,5 @@ export function LexicalEditor(props) {
         editorState: validateValue(value) ? JSON.stringify(value) : undefined,
         editable: editable,
     };
-    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 })] })) })));
+    return (_jsxs(LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [_jsx(Plugins, { className: className, onChange: onChange }), _jsx(_Fragment, { children: children })] })));
 }

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

@@ -6,7 +6,6 @@ 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,9 +28,8 @@ 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, contentEditableClassName, onChange } = props;
+    const { className, onChange } = props;
     const isEditable = useLexicalEditable();
     const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
     const [isLinkEditMode, setIsLinkEditMode] = useState(false);
@@ -39,11 +38,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, { className: contentEditableClassName, 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, { 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, {}), _jsx(ProblemSelectPlugin, {})] }));
+                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, {})] }));
 }
 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 { useContext, useState } from "react";
+import { useState } from "react";
 import Input from "../../../../components/Input";
 import SquareButton from "../../../../components/SquareButton";
 import { Settings3FillIcon } from "../../../../icons";
@@ -22,7 +22,6 @@ 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;
@@ -30,29 +29,23 @@ 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) {
-        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);
+        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);
                         if (!$isProblemInputNode(node)) {
                             return;
                         }
-                        node.setAnswer(e.target.value);
+                        node.setAnswer(answerInput);
                     });
-                }, color: "default", fullWidth: true }));
-        }
+                },
+            }, color: "default", fullWidth: true }));
     }
     // 교사 edit view
     return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `

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

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

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

@@ -25,7 +25,6 @@ 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";
@@ -87,18 +86,7 @@ function getQuizContextOptions(editor, theme) {
             icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
             keywords: ["problem select", "객관식 입력"],
             onSelect: () => {
-                editor.dispatchCommand(INSERT_PROBLEM_SELECT_COMMAND, {
-                    selections: [
-                        {
-                            isAnswer: false,
-                            show: {
-                                text: "",
-                            },
-                            value: "1",
-                        },
-                    ],
-                    selected: [],
-                });
+                // TODO: 객관식 입력 칸 추가
             },
         }),
         new ComponentDrawerOption("메뉴구분선", (_jsx("div", { css: css `

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

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

package/dist/patterns/LexicalEditor/theme.js

@@ -252,13 +252,6 @@ 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.9.9",
+  "version": "1.10.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,

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

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

package/dist/patterns/LexicalEditor/LexicalCustomConfigContext.js

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

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

@@ -1,45 +0,0 @@
-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[];
-    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[];
-    setSolutions(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

@@ -1,74 +0,0 @@
-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.__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

@@ -1,11 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,9 +0,0 @@
-/** @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

@@ -1,90 +0,0 @@
-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;
-                                }
-                                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: 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

@@ -1,17 +0,0 @@
-import { Selection } from "../ProblemSelectNode";
-import { Control, FieldArrayWithId, UseFieldArrayUpdate } from "react-hook-form";
-export interface FormSelectionProps {
-    index: number;
-    control: Control<{
-        selections: Selection[];
-    }, any>;
-    field: FieldArrayWithId<{
-        selections: Selection[];
-    }, "selections", "uid">;
-    update: UseFieldArrayUpdate<{
-        selections: Selection[];
-    }, "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

@@ -1,97 +0,0 @@
-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, { title: field.show.image ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => {
-                    update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: props }) }));
-                }, deleteImg: field.show.image
-                    ? () => {
-                        update(index, Object.assign(Object.assign({}, field), { show: Object.assign(Object.assign({}, field.show), { image: undefined }) }));
-                    }
-                    : undefined }), _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);
-                                            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

@@ -1,10 +0,0 @@
-import { ImageProps } from "../ProblemSelectNode";
-export interface InsertImageDialogProps {
-    title: string;
-    open: boolean;
-    onClose: () => void;
-    updateImg: (props: ImageProps) => void;
-    /** 전달하면 "이미지 삭제하기" 버튼이 생깁니다. */
-    deleteImg?: () => void;
-}
-export declare function InsertImageDialog(props: InsertImageDialogProps): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -1,106 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { useContext, useRef, useState } from "react";
-import styled from "@emotion/styled";
-import { css, useTheme } from "@emotion/react";
-import { ImageFillIcon, LinkIcon, UploadLineIcon } from "../../../../../icons";
-import { AlertDialog, AlertDialogContent, AlertDialogTitle, } from "../../../../../components/AlertDialog";
-import Button from "../../../../../components/Button";
-import { CodleDesignSystemContext } from "../../../../../CodleDesignSystemProvider";
-import { InsertImageUriDialogBody } from "./InsertImageUriDialogBody";
-import { InsertImageUploadedDialogBody } from "./InsertImageUploadedDialogBody";
-export function InsertImageDialog(props) {
-    const { title, open, onClose, updateImg, deleteImg } = 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: title })), !mode && (_jsx(AlertDialogContent, { children: _jsxs("div", Object.assign({ css: css `
-              display: flex;
-              flex-direction: column;
-              gap: 16px;
-              // Actions가 없는 경우 하단이 디자인과 맞지 않는다
-              margin-bottom: -16px;
-            ` }, { children: [_jsxs(Buttons, { children: [_jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uC774\uBBF8\uC9C0 URL\uC744 \uC54C\uACE0 \uC788\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "URL\uB85C \uC0BD\uC785\uD558\uAE30", startIcon: _jsx(LinkIcon, {}), onClick: () => setMode("url") })] }), _jsxs(ButtonAndDescription, { children: [_jsx(Description, { children: "\uAC16\uACE0 \uC788\uB294 \uC774\uBBF8\uC9C0\uB97C \uC0BD\uC785\uD558\uACE0 \uC2F6\uB2E4\uBA74" }), _jsx(Button, { color: "grey", size: "medium", fullWidth: true, label: "\uD30C\uC77C \uC120\uD0DD\uD558\uAE30", startIcon: _jsx(UploadLineIcon, {}), onClick: () => {
-                                                var _a;
-                                                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                            } }), _jsx(HiddenInput, { ref: inputRef, type: "file", accept: "image/*", onChange: (event) => __awaiter(this, void 0, void 0, function* () {
-                                                var _a, _b;
-                                                const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
-                                                if (!file)
-                                                    return;
-                                                const uploadByFile = (_b = cdsContext.lexical) === null || _b === void 0 ? void 0 : _b.uploadByFile;
-                                                if (uploadByFile) {
-                                                    setSrc(yield uploadByFile(file));
-                                                    setMode("file");
-                                                }
-                                            }) })] })] }), deleteImg && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Button, { color: "textDanger", size: "medium", fullWidth: true, label: "\uC774\uBBF8\uC9C0 \uC0AD\uC81C\uD558\uAE30", onClick: deleteImg })] }))] })) })), 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;
-  flex: 1;
-  align-items: flex-start;
-  gap: 8px;
-`;
-const Divider = styled.div(({ theme }) => css `
-    width: 100%;
-    height: 1px;
-    background: ${theme.color.background.neutralAltActive};
-  `);
-const ButtonAndDescription = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  flex: 1 0 0;
-`;
-const Description = styled.div `
-  color: ${({ theme }) => theme.color.foreground.neutralBaseDisabled};
-  text-align: center;
-
-  /* Default/Label/12px-Md */
-  font-family: ${({ theme }) => theme.fontFamily.ui};
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 16px; /* 133.333% */
-`;
-const HiddenInput = styled.input `
-  display: none;
-`;

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

@@ -1,9 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,136 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/** @jsxImportSource @emotion/react */
-import { useFieldArray, useForm, } from "react-hook-form";
-import { $isProblemSelectNode } from "../ProblemSelectNode";
-import { $getNodeByKey } from "lexical";
-import { css } from "@emotion/react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import styled from "@emotion/styled";
-import shadows from "../../../../../foundation/shadows";
-import { AddFillIcon, AlarmWarningFillIcon, ListRadioIcon, } from "../../../../../icons";
-import Button from "../../../../../components/Button";
-import { FormSelection } from "./FormSelection";
-import Tooltip from "../../../../../components/Tooltip";
-import { useState } from "react";
-export default function SettingForm(props) {
-    const { selections, nodeKey, onClose } = props;
-    const [editor] = useLexicalComposerContext();
-    const [tooltipOpen, setTooltipOpen] = useState(false);
-    const { control, handleSubmit } = useForm({
-        mode: "all",
-        defaultValues: {
-            selections,
-        },
-    });
-    const { fields, append, remove, update } = useFieldArray({
-        control,
-        name: "selections",
-        keyName: "uid",
-    });
-    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;
-    const hasAnswer = fields.some((field) => field.isAnswer);
-    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(Tooltip, Object.assign({ open: !hasAnswer && tooltipOpen, text: "\uC120\uD0DD\uC9C0 \uC911 \uC815\uB2F5\uC744 \uD45C\uC2DC\uD574\uC8FC\uC138\uC694.", onOpen: () => setTooltipOpen(true), onClose: () => setTooltipOpen(false), placement: "top-end" }, { children: _jsx("span", { children: _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit", disabled: !hasAnswer }) }) }))] })] })));
-}
-const Form = styled.form(({ theme }) => css `
-    display: flex;
-    width: 620px;
-    flex-direction: column;
-    border-radius: 6px;
-    border: 1px solid ${theme.color.background.neutralAltActive};
-    background: ${theme.color.background.neutralBase};
-    box-shadow: ${shadows.shadow08};
-  `);
-const Title = styled.div(({ theme }) => css `
-    display: flex;
-    padding: 8px 12px;
-    gap: 4px;
-    align-items: center;
-    color: ${theme.color.foreground.neutralBase};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
-  `);
-const Content = styled.div(({ theme }) => css `
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 12px;
-    border-top: 1px solid ${theme.color.background.neutralAltActive};
-    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
-  `);
-const FormArea = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`;
-const Label = styled.div(({ theme }) => css `
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
-  `);
-const Buttons = styled.div `
-  display: flex;
-  padding: 12px;
-  justify-content: flex-end;
-  align-items: center;
-  gap: 8px;
-`;
-const Alert = styled.div(({ theme }) => css `
-    display: flex;
-    gap: 4px;
-    color: ${theme.color.foreground.neutralBaseDisabled};
-    /* Default/Label/12px-Md */
-    font-family: ${theme.fontFamily.ui};
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 16px; /* 133.333% */
-  `);

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-/// <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

@@ -1,20 +0,0 @@
-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;
-}