@team-monolith/cds 1.120.3 → 1.121.0

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

@@ -146,11 +146,7 @@ export function ComponentAdderPlugin(props) {
         resolves.forEach((resolve) => resolve());
         setResolves((newResolves) => newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1));
     });
-    const getContextMenuOptions = useContextMenuOptions({
-        isSheetEnabled,
-        isQuizEnabled,
-        showFileUpload,
-    });
+    const getContextMenuOptions = useContextMenuOptions();
     const filteredOptions = options.filter((option) => {
         if (!query) {
             return true;
@@ -244,7 +240,7 @@ export function ComponentAdderPlugin(props) {
                                 // Add a node key to the selection.
                                 nodeSelection.add(newNode.getKey());
                                 $setSelection(nodeSelection);
-                                const contextMenuOptions = getContextMenuOptions(editor, newNode, setImageOpen, setVideoOpen, setFileOpen);
+                                const contextMenuOptions = getContextMenuOptions(editor, newNode);
                                 setOptions(contextMenuOptions);
                                 if (nodeKey === null) {
                                     setNodeKey(newNode.getKey());

package/dist/patterns/LexicalEditor/plugins/ComponentAdderPlugin/useContextMenuOptions.d.ts

@@ -3,8 +3,4 @@
  */
 import { LexicalEditor, LexicalNode } from "lexical";
 import { ComponentDrawerOption, ComponentPickerOption } from "../ComponentPickerMenuPlugin";
-export declare function useContextMenuOptions(props: {
-    isSheetEnabled: boolean;
-    isQuizEnabled: boolean;
-    showFileUpload: boolean;
-}): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void, setVideoOpen: (open: boolean) => void, setFileOpen: (open: boolean) => void) => (ComponentPickerOption | ComponentDrawerOption)[];
+export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode) => (ComponentPickerOption | ComponentDrawerOption)[];

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

@@ -1,81 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Context Menu (:: 버튼)
  */
 import { $createParagraphNode, ParagraphNode, } from "lexical";
-import { ComponentPickerOption, getBaseOptions, } from "../ComponentPickerMenuPlugin";
 import { $createHeadingNode, $createQuoteNode, HeadingNode, } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { ListItemNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, } from "@lexical/list";
 import { $createCodeNode } from "@lexical/code";
-import { H1Icon, H2Icon, H3Icon, CloseFillIcon, ListUnorderedIcon, ListOrderedIcon, InputMethodLineIcon, CodeViewIcon, DoubleQuotesLIcon, TextIcon, } from "../../../../icons";
 import { $isColoredQuoteNode, } from "../../nodes/ColoredQuoteNode";
 import { useTheme } from "@emotion/react";
-import { css } from "@emotion/css";
-import { $isFileNode, $isImageNode, $isVideoNode, $isProblemInputNode, } from "../../nodes";
-import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
-import { $isSheetInputNode } from "../../nodes/SheetInputNode";
-import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
-import { $isSelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
 import { useTranslation } from "react-i18next";
+import { getComponentPickerOptions, getQuoteColorOptions, getRemoveBlockMenu, } from "../ComponentPickerMenuPlugin/componentPickerOptionUtils";
 function getParagraphContextMenuOptions(editor, node, t) {
     return [
-        new ComponentPickerOption(t("본문", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(TextIcon, {}),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
+        getComponentPickerOptions({
+            key: "p",
             onSelect: () => editor.update(() => {
                 const selection = node.selectStart();
                 $setBlocksType(selection, () => $createParagraphNode());
             }),
-        }),
+        }, t),
         ...[1, 2, 3].map((n) => {
-            const titleMap = {
-                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
-            };
-            const iconMap = {
-                1: _jsx(H1Icon, {}),
-                2: _jsx(H2Icon, {}),
-                3: _jsx(H3Icon, {}),
-            };
-            return new ComponentPickerOption(titleMap[n], {
-                icon: iconMap[n],
-                keywords: ["heading", "header", `h${n}`, titleMap[n]],
+            const headerKey = `h${n}`;
+            return getComponentPickerOptions({
+                key: headerKey,
                 onSelect: () => editor.update(() => {
                     const selection = node.selectStart();
-                    $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                    $setBlocksType(selection, () => $createHeadingNode(headerKey));
                 }),
-            });
+            }, t);
         }),
-        new ComponentPickerOption(t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListUnorderedIcon, {}),
-            keywords: ["bulleted list", "unordered list", "ul"],
+        getComponentPickerOptions({
+            key: "ul",
             onSelect: () => {
                 node.selectStart();
                 editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
             },
-        }),
-        new ComponentPickerOption(t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListOrderedIcon, {}),
-            keywords: ["numbered list", "ordered list", "ol"],
+        }, t),
+        getComponentPickerOptions({
+            key: "ol",
             onSelect: () => {
                 node.selectStart();
                 editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
             },
-        }),
-        new ComponentPickerOption(t("인용 블록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(DoubleQuotesLIcon, {}),
-            keywords: ["block quote"],
+        }, t),
+        getComponentPickerOptions({
+            key: "quote",
             onSelect: () => editor.update(() => {
                 const selection = node.selectStart();
                 $setBlocksType(selection, () => $createQuoteNode());
             }),
-        }),
-        new ComponentPickerOption(t("코드 블록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(CodeViewIcon, {}),
-            keywords: ["javascript", "python", "js", "codeblock"],
+        }, t),
+        getComponentPickerOptions({
+            key: "code",
             onSelect: () => editor.update(() => {
                 const selection = node.selectStart();
                 if (selection.isCollapsed()) {
@@ -89,307 +65,72 @@ function getParagraphContextMenuOptions(editor, node, t) {
                     selection.insertRawText(textContent);
                 }
             }),
-        }),
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                editor.update(() => {
-                    node.remove();
-                });
-            },
-        }),
+        }, t),
+        getRemoveBlockMenu(editor, node, t),
     ];
 }
 function getHeadingContextMenuOptions(editor, node, t) {
     return [
         ...[1, 2, 3].map((n) => {
-            const titleMap = {
-                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
-            };
-            const iconMap = {
-                1: _jsx(H1Icon, {}),
-                2: _jsx(H2Icon, {}),
-                3: _jsx(H3Icon, {}),
-            };
-            return new ComponentPickerOption(titleMap[n], {
-                icon: iconMap[n],
-                keywords: ["heading", "header", `h${n}`, titleMap[n]],
+            const headerKey = `h${n}`;
+            return getComponentPickerOptions({
+                key: headerKey,
                 onSelect: () => editor.update(() => {
                     const selection = node.selectStart();
-                    $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                    $setBlocksType(selection, () => $createHeadingNode(headerKey));
                 }),
-            });
-        }),
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                editor.update(() => {
-                    node.remove();
-                });
-            },
+            }, t);
         }),
+        getRemoveBlockMenu(editor, node, t),
     ];
 }
-function getListContextMenuOptions(editor, theme, node, t) {
+function getListContextMenuOptions(editor, node, t) {
     return [
-        new ComponentPickerOption(t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListUnorderedIcon, {}),
-            keywords: ["bulleted list", "unordered list", "ul"],
+        getComponentPickerOptions({
+            key: "ul",
             onSelect: () => {
                 node.selectStart();
                 editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
             },
-        }),
-        new ComponentPickerOption(t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListOrderedIcon, {}),
-            keywords: ["numbered list", "ordered list", "ol"],
+        }, t),
+        getComponentPickerOptions({
+            key: "ol",
             onSelect: () => {
                 node.selectStart();
                 editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
             },
-        }),
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                editor.update(() => {
-                    node.remove();
-                });
-            },
-        }),
-    ];
-}
-function getProblemInputContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
-    ];
-}
-function getProblemSelectContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
-    ];
-}
-function getSheetInputContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
-    ];
-}
-function getSheetSelectContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
-    ];
-}
-function getSelfEvaluationContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
-    ];
-}
-function getImageContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
-    ];
-}
-function getVideoContextMenuOptions(node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                node.remove();
-            },
-        }),
+        }, t),
+        getRemoveBlockMenu(editor, node, t),
     ];
 }
 function getColoredQuoteContextMenuOptions(editor, theme, node, t) {
     return [
-        new ComponentPickerOption(t("회색"), {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.marbleOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.marbleContainer};
-      `,
-            keywords: ["grey", "gray"],
-            onSelect: () => {
-                editor.update(() => {
-                    node.setColor("grey");
-                });
-            },
-        }),
-        new ComponentPickerOption(t("빨간색"), {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.redOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.redContainer};
-      `,
-            keywords: ["red"],
-            onSelect: () => {
-                editor.update(() => {
-                    node.setColor("red");
-                });
-            },
-        }),
-        new ComponentPickerOption(t("노란색"), {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.yellowOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.yellowContainer};
-      `,
-            keywords: ["yellow"],
-            onSelect: () => {
-                editor.update(() => {
-                    node.setColor("yellow");
-                });
-            },
-        }),
-        new ComponentPickerOption(t("파란색"), {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.blueOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.blueContainer};
-      `,
-            keywords: ["blue"],
-            onSelect: () => {
-                editor.update(() => {
-                    node.setColor("blue");
-                });
-            },
-        }),
-        new ComponentPickerOption(t("초록색"), {
-            icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.greenOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.greenContainer};
-      `,
-            keywords: ["green"],
-            onSelect: () => {
-                editor.update(() => {
-                    node.setColor("green");
-                });
-            },
-        }),
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                editor.update(() => {
-                    node.remove();
-                });
-            },
-        }),
-    ];
-}
-function getUploadFileContextMenuOptions(editor, node, t) {
-    return [
-        new ComponentPickerOption(t("블록 삭제"), {
-            icon: _jsx(CloseFillIcon, {}),
-            keywords: [],
-            onSelect: () => {
-                editor.update(() => {
-                    node.remove();
-                });
-            },
-        }),
+        getQuoteColorOptions(editor, node, "grey", t, theme),
+        getQuoteColorOptions(editor, node, "red", t, theme),
+        getQuoteColorOptions(editor, node, "yellow", t, theme),
+        getQuoteColorOptions(editor, node, "blue", t, theme),
+        getQuoteColorOptions(editor, node, "green", t, theme),
+        getRemoveBlockMenu(editor, node, t),
     ];
 }
-export function useContextMenuOptions(props) {
-    const { isSheetEnabled, isQuizEnabled, showFileUpload } = props;
+export function useContextMenuOptions() {
     const theme = useTheme();
     const { t } = useTranslation();
-    return (editor, node, setImageOpen, setVideoOpen, setFileOpen) => {
-        if ($isProblemInputNode(node)) {
-            return getProblemInputContextMenuOptions(node, t);
-        }
-        else if ($isProblemSelectNode(node)) {
-            return getProblemSelectContextMenuOptions(node, t);
-        }
-        else if ($isSheetInputNode(node)) {
-            return getSheetInputContextMenuOptions(node, t);
-        }
-        else if ($isSheetSelectNode(node)) {
-            return getSheetSelectContextMenuOptions(node, t);
-        }
-        else if ($isSelfEvaluationNode(node)) {
-            return getSelfEvaluationContextMenuOptions(node, t);
-        }
-        else if ($isImageNode(node)) {
-            return getImageContextMenuOptions(node, t);
-        }
-        else if ($isVideoNode(node)) {
-            return getVideoContextMenuOptions(node, t);
-        }
-        else if (node instanceof ParagraphNode) {
+    return (editor, node) => {
+        if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node, t);
         }
         else if (node instanceof HeadingNode) {
             return getHeadingContextMenuOptions(editor, node, t);
         }
         else if (node instanceof ListNode || node instanceof ListItemNode) {
-            return getListContextMenuOptions(editor, theme, node, t);
+            return getListContextMenuOptions(editor, node, t);
         }
         else if ($isColoredQuoteNode(node)) {
             return getColoredQuoteContextMenuOptions(editor, theme, node, t);
         }
-        else if ($isFileNode(node)) {
-            return getUploadFileContextMenuOptions(editor, node, t);
-        }
         else {
-            return [
-                ...getBaseOptions({
-                    editor,
-                    theme,
-                    t,
-                    setImageOpen,
-                    setVideoOpen,
-                    isSheetEnabled,
-                    isQuizEnabled,
-                    setFileOpen,
-                    showFileUpload,
-                }),
-                new ComponentPickerOption(t("블록 삭제"), {
-                    icon: _jsx(CloseFillIcon, {}),
-                    keywords: [],
-                    onSelect: () => {
-                        editor.update(() => {
-                            node.remove();
-                        });
-                    },
-                }),
-            ];
+            return [getRemoveBlockMenu(editor, node, t)];
         }
     };
 }

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

@@ -14,13 +14,11 @@ import { INSERT_HORIZONTAL_RULE_COMMAND } from "@lexical/react/LexicalHorizontal
 import { LexicalTypeaheadMenuPlugin, MenuOption, useBasicTypeaheadTriggerMatch, } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { $createHeadingNode, $createQuoteNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
-import { INSERT_TABLE_COMMAND } from "@lexical/table";
 import { $createParagraphNode, $getSelection, $isRangeSelection, } from "lexical";
 import { useCallback, useMemo, useState } from "react";
 import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
-import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, VideoLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, EmojiStickerLineIcon, File3LineIcon, } from "../../../../icons";
 import { ZINDEX } from "../../../../utils/zIndex";
 import { css, useTheme } from "@emotion/react";
 import { INSERT_PROBLEM_INPUT_COMMAND } from "../ProblemInputPlugin";
@@ -37,6 +35,7 @@ import { UploadFileDialog } from "../../components/UploadFileDialog";
 import { UPLOAD_FILE_COMMAND } from "../FilePlugin";
 import { useTranslation } from "react-i18next";
 import { getTexts } from "../../../../texts";
+import { getComponentPickerOptions, getTableComponentPickerOption, getThemedComponentPickerOptions, } from "./componentPickerOptionUtils";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -71,20 +70,18 @@ function getDynamicOptions(editor, queryString) {
         const colOptions = tableMatch[2]
             ? [tableMatch[2]]
             : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String);
-        options.push(...colOptions.map((columns) => new ComponentPickerOption(`${rows}x${columns} Table`, {
-            icon: _jsx("i", { className: "icon table" }),
-            keywords: ["table"],
-            onSelect: () => editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows }),
+        options.push(...colOptions.map((columns) => getTableComponentPickerOption({
+            editor,
+            rows,
+            columns,
         })));
     }
     return options;
 }
 function getSheetContextOptions(editor, theme, t) {
     return [
-        new ComponentPickerOption(t("선택형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["sheet select", "선택형 입력"],
+        getThemedComponentPickerOptions({
+            key: "sheet_select",
             onSelect: () => editor.dispatchCommand(INSERT_SHEET_SELECT_COMMAND, {
                 selections: [
                     {
@@ -98,14 +95,16 @@ function getSheetContextOptions(editor, theme, t) {
                 selected: [],
                 allowMultipleAnswers: false,
             }),
-        }),
-        new ComponentPickerOption(t("3단계 평가 입력 칸"), {
-            icon: _jsx(EmojiStickerLineIcon, { color: theme.color.foreground.primary }),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["self evaluation", "3단계 평가 입력"],
+        }, t, theme),
+        getThemedComponentPickerOptions({
+            key: "self_evaluation",
             onSelect: () => editor.dispatchCommand(INSERT_SELF_EVALUATION_COMMAND, {
                 iconType: "emoji",
-                labels: [t("아주 잘했어요!"), t("보통이에요."), t("잘 모르겠어요.")],
+                labels: [
+                    t("아주 잘했어요!"),
+                    t("보통이에요."),
+                    t("잘 모르겠어요."),
+                ],
                 evaluations: [
                     {
                         question: {
@@ -115,27 +114,23 @@ function getSheetContextOptions(editor, theme, t) {
                     },
                 ],
             }),
-        }),
-        new ComponentPickerOption(t("단답형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["sheet short input", "단답형 입력"],
+        }, t, theme),
+        getThemedComponentPickerOptions({
+            key: "sheet_input",
             onSelect: () => editor.dispatchCommand(INSERT_SHEET_INPUT_COMMAND, {
                 multiline: false,
                 value: "",
                 placeholder: "",
             }),
-        }),
-        new ComponentPickerOption(t("서술형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(FileList2LineIcon, { color: theme.color.foreground.primary }),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["sheet long input", "서술형 입력"],
+        }, t, theme),
+        getThemedComponentPickerOptions({
+            key: "sheet_long_input",
             onSelect: () => editor.dispatchCommand(INSERT_SHEET_INPUT_COMMAND, {
                 multiline: true,
                 value: "",
                 placeholder: "",
             }),
-        }),
+        }, t, theme),
         new ComponentDrawerOption(t("활동지 메뉴구분선"), (_jsx("div", { css: css `
             width: 100%;
             height: 1px;
@@ -146,10 +141,8 @@ function getSheetContextOptions(editor, theme, t) {
 }
 function getQuizContextOptions(editor, theme, t) {
     return [
-        new ComponentPickerOption(t("주관식 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["problem input", "주관식 입력"],
+        getThemedComponentPickerOptions({
+            key: "problem_input",
             onSelect: () => editor.dispatchCommand(INSERT_PROBLEM_INPUT_COMMAND, {
                 solutions: [
                     {
@@ -163,11 +156,9 @@ function getQuizContextOptions(editor, theme, t) {
                 caseSensitive: false,
                 ignoreWhitespace: true,
             }),
-        }),
-        new ComponentPickerOption(t("객관식 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["problem select", "객관식 입력"],
+        }, t, theme),
+        getThemedComponentPickerOptions({
+            key: "problem_select",
             onSelect: () => {
                 editor.dispatchCommand(INSERT_PROBLEM_SELECT_COMMAND, {
                     selections: [
@@ -183,7 +174,7 @@ function getQuizContextOptions(editor, theme, t) {
                     selected: [],
                 });
             },
-        }),
+        }, t, theme),
         new ComponentDrawerOption(t("퀴즈 메뉴구분선"), (_jsx("div", { css: css `
             width: 100%;
             height: 1px;
@@ -195,62 +186,46 @@ function getQuizContextOptions(editor, theme, t) {
 export function getBaseOptions(props) {
     const { editor, theme, t, setImageOpen, setVideoOpen, setFileOpen, isSheetEnabled, isQuizEnabled, showFileUpload, } = props;
     const baseOptions = [
-        new ComponentPickerOption(t("본문", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(TextIcon, {}),
-            // eslint-disable-next-line i18next/no-literal-string
-            keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
+        getComponentPickerOptions({
+            key: "p",
             onSelect: () => editor.update(() => {
                 const selection = $getSelection();
                 if ($isRangeSelection(selection)) {
                     $setBlocksType(selection, () => $createParagraphNode());
                 }
             }),
-        }),
+        }, t),
         ...[1, 2, 3].map((n) => {
-            const titleMap = {
-                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
-            };
-            const iconMap = {
-                1: _jsx(H1Icon, {}),
-                2: _jsx(H2Icon, {}),
-                3: _jsx(H3Icon, {}),
-            };
-            return new ComponentPickerOption(titleMap[n], {
-                icon: iconMap[n],
-                keywords: ["heading", "header", `h${n}`, titleMap[n]],
+            const headerKey = `h${n}`;
+            return getComponentPickerOptions({
+                key: headerKey,
                 onSelect: () => editor.update(() => {
                     const selection = $getSelection();
                     if ($isRangeSelection(selection)) {
-                        $setBlocksType(selection, () => $createHeadingNode(`h${n}`));
+                        $setBlocksType(selection, () => $createHeadingNode(headerKey));
                     }
                 }),
-            });
+            }, t);
         }),
-        new ComponentPickerOption(t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListUnorderedIcon, {}),
-            keywords: ["bulleted list", "unordered list", "ul"],
+        getComponentPickerOptions({
+            key: "ul",
             onSelect: () => editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined),
-        }),
-        new ComponentPickerOption(t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(ListOrderedIcon, {}),
-            keywords: ["numbered list", "ordered list", "ol"],
+        }, t),
+        getComponentPickerOptions({
+            key: "ol",
             onSelect: () => editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined),
-        }),
-        new ComponentPickerOption(t("인용 블록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(DoubleQuotesLIcon, {}),
-            keywords: ["block quote"],
+        }, t),
+        getComponentPickerOptions({
+            key: "quote",
             onSelect: () => editor.update(() => {
                 const selection = $getSelection();
                 if ($isRangeSelection(selection)) {
                     $setBlocksType(selection, () => $createQuoteNode());
                 }
             }),
-        }),
-        new ComponentPickerOption(t("코드 블록", { context: "렉시컬 드롭다운 메뉴" }), {
-            icon: _jsx(CodeViewIcon, {}),
-            keywords: ["javascript", "python", "js", "codeblock"],
+        }, t),
+        getComponentPickerOptions({
+            key: "code",
             onSelect: () => editor.update(() => {
                 const selection = $getSelection();
                 if ($isRangeSelection(selection)) {
@@ -266,22 +241,19 @@ export function getBaseOptions(props) {
                     }
                 }
             }),
-        }),
-        new ComponentPickerOption(t("구분선"), {
-            icon: _jsx(SeparatorIcon, {}),
-            keywords: ["horizontal rule", "divider", "hr"],
+        }, t),
+        getComponentPickerOptions({
+            key: "divider",
             onSelect: () => editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND, undefined),
-        }),
-        new ComponentPickerOption(t("이미지"), {
-            icon: _jsx(ImageLineIcon, {}),
-            keywords: ["image", "photo", "picture", "file"],
+        }, t),
+        getComponentPickerOptions({
+            key: "image",
             onSelect: () => setImageOpen(true),
-        }),
-        new ComponentPickerOption(t("동영상"), {
-            icon: _jsx(VideoLineIcon, {}),
-            keywords: ["video", "movie"],
+        }, t),
+        getComponentPickerOptions({
+            key: "video",
             onSelect: () => setVideoOpen(true),
-        }),
+        }, t),
     ];
     // devMode, labMode 여부를 로컬스토리지에서 가져옵니다.
     const isDevMode = localStorage.getItem("devMode") === "true";
@@ -296,19 +268,17 @@ export function getBaseOptions(props) {
     }
     // devMode || labMode이면 칼럼 컨텍스트 메뉴를 추가합니다. (일부공개)
     if (isDevMode || isLabMode) {
-        baseOptions.push(new ComponentPickerOption(t("칼럼"), {
-            icon: _jsx(LayoutColumnLineIcon, {}),
-            keywords: ["columns", "layout", "grid"],
+        baseOptions.push(getComponentPickerOptions({
+            key: "column",
             onSelect: () => editor.dispatchCommand(INSERT_LAYOUT_COMMAND, "1fr 1fr"),
-        }));
+        }, t));
     }
     // showFileUpload 이면 파일블록을 추가합니다.
     if (showFileUpload || isDevMode) {
-        baseOptions.push(new ComponentPickerOption(t("파일 게시"), {
-            icon: _jsx(File3LineIcon, {}),
-            keywords: ["file", "upload"],
+        baseOptions.push(getComponentPickerOptions({
+            key: "file",
             onSelect: () => setFileOpen(true),
-        }));
+        }, t));
     }
     return baseOptions;
 }

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

@@ -0,0 +1,24 @@
+import { LexicalEditor, LexicalNode } from "lexical";
+import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
+import { TFunction } from "i18next";
+import { Theme } from "@emotion/react";
+import { ColoredQuoteNode } from "../../nodes";
+type ComponentPickerOptionKey = "p" | "h1" | "h2" | "h3" | "ul" | "ol" | "quote" | "code" | "toggle" | "divider" | "file" | "image" | "video" | "column";
+type ThemedComponentPickerOptionKey = "sheet_select" | "sheet_input" | "sheet_long_input" | "self_evaluation" | "problem_select" | "problem_input";
+type QuoteColorKey = "grey" | "red" | "yellow" | "blue" | "green";
+export declare function getComponentPickerOptions(props: {
+    key: ComponentPickerOptionKey;
+    onSelect: (queryString: string) => void;
+}, t: TFunction): ComponentPickerOption;
+export declare function getThemedComponentPickerOptions(props: {
+    key: ThemedComponentPickerOptionKey;
+    onSelect: (queryString: string) => void;
+}, t: TFunction, theme: Theme): ComponentPickerOption;
+export declare function getTableComponentPickerOption(params: {
+    editor: LexicalEditor;
+    rows: string;
+    columns: string;
+}): ComponentPickerOption;
+export declare function getQuoteColorOptions(editor: LexicalEditor, node: ColoredQuoteNode, colorKey: QuoteColorKey, t: TFunction, theme: Theme): ComponentPickerOption;
+export declare function getRemoveBlockMenu(editor: LexicalEditor, node: LexicalNode, t: TFunction): ComponentPickerOption;
+export {};

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

@@ -0,0 +1,221 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseFillIcon, CodeViewIcon, DoubleQuotesLIcon, EmojiStickerLineIcon, File3LineIcon, FileList2LineIcon, H1Icon, H2Icon, H3Icon, ImageLineIcon, InputMethodLineIcon, LayoutColumnLineIcon, ListOrderedIcon, ListRadioIcon, ListUnorderedIcon, PlayList2FillIcon, SeparatorIcon, TextIcon, VideoLineIcon, } from "../../../../icons";
+import { ComponentPickerOption } from "./ComponentPickerMenuPlugin";
+import { css } from "@emotion/css";
+import { INSERT_TABLE_COMMAND } from "@lexical/table";
+import { expectNever } from "../../../../utils/types";
+const getHeaderInfo = (key, t) => ({
+    h1: {
+        title: t("큰 제목"),
+        icon: _jsx(H1Icon, {}),
+    },
+    h2: {
+        title: t("중간 제목"),
+        icon: _jsx(H2Icon, {}),
+    },
+    h3: {
+        title: t("작은 제목"),
+        icon: _jsx(H3Icon, {}),
+    },
+})[key];
+export function getComponentPickerOptions(props, t) {
+    const { key, onSelect } = props;
+    switch (key) {
+        case "p":
+            return new ComponentPickerOption(t("본문"), {
+                icon: _jsx(TextIcon, {}),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
+                onSelect,
+            });
+        case "h1":
+        case "h2":
+        case "h3": {
+            const { title, icon } = getHeaderInfo(key, t);
+            return new ComponentPickerOption(title, {
+                icon,
+                keywords: ["heading", "header", key, title],
+                onSelect,
+            });
+        }
+        case "ul":
+            return new ComponentPickerOption(t("일반 목록"), {
+                icon: _jsx(ListUnorderedIcon, {}),
+                keywords: ["bulleted list", "unordered list", "ul"],
+                onSelect,
+            });
+        case "ol":
+            return new ComponentPickerOption(t("숫자 목록"), {
+                icon: _jsx(ListOrderedIcon, {}),
+                keywords: ["numbered list", "ordered list", "ol"],
+                onSelect,
+            });
+        case "quote":
+            return new ComponentPickerOption(t("인용 블록"), {
+                icon: _jsx(DoubleQuotesLIcon, {}),
+                keywords: ["block quote"],
+                onSelect,
+            });
+        case "code":
+            return new ComponentPickerOption(t("코드 블록"), {
+                icon: _jsx(CodeViewIcon, {}),
+                keywords: ["javascript", "python", "js", "codeblock"],
+                onSelect,
+            });
+        case "toggle":
+            return new ComponentPickerOption(t("토글 목록", { context: "렉시컬 드롭다운 메뉴" }), {
+                icon: _jsx(PlayList2FillIcon, {}),
+                keywords: ["toggle", "collapsible"],
+                onSelect,
+            });
+        case "divider":
+            return new ComponentPickerOption(t("구분선"), {
+                icon: _jsx(SeparatorIcon, {}),
+                keywords: ["horizontal rule", "divider", "hr"],
+                onSelect,
+            });
+        case "file":
+            return new ComponentPickerOption(t("파일 게시"), {
+                icon: _jsx(File3LineIcon, {}),
+                keywords: ["file", "upload"],
+                onSelect,
+            });
+        case "image":
+            return new ComponentPickerOption(t("이미지"), {
+                icon: _jsx(ImageLineIcon, {}),
+                keywords: ["image", "photo", "picture", "file"],
+                onSelect,
+            });
+        case "video":
+            return new ComponentPickerOption(t("동영상"), {
+                icon: _jsx(VideoLineIcon, {}),
+                keywords: ["video", "movie"],
+                onSelect,
+            });
+        case "column":
+            return new ComponentPickerOption(t("칼럼"), {
+                icon: _jsx(LayoutColumnLineIcon, {}),
+                keywords: ["columns", "layout", "grid"],
+                onSelect,
+            });
+        default:
+            expectNever(key);
+    }
+}
+export function getThemedComponentPickerOptions(props, t, theme) {
+    const { key, onSelect } = props;
+    switch (key) {
+        case "sheet_select":
+            return new ComponentPickerOption(t("선택형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
+                icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["sheet select", "선택형 입력"],
+                onSelect,
+            });
+        case "sheet_input":
+            return new ComponentPickerOption(t("단답형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
+                icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["sheet short input", "단답형 입력"],
+                onSelect,
+            });
+        case "sheet_long_input":
+            return new ComponentPickerOption(t("서술형 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
+                icon: _jsx(FileList2LineIcon, { color: theme.color.foreground.primary }),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["sheet long input", "서술형 입력"],
+                onSelect,
+            });
+        case "self_evaluation":
+            return new ComponentPickerOption(t("3단계 평가 입력 칸"), {
+                icon: _jsx(EmojiStickerLineIcon, { color: theme.color.foreground.primary }),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["self evaluation", "3단계 평가 입력"],
+                onSelect,
+            });
+        case "problem_select":
+            return new ComponentPickerOption(t("객관식 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
+                icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["problem select", "객관식 입력"],
+                onSelect,
+            });
+        case "problem_input":
+            return new ComponentPickerOption(t("주관식 입력 칸", { context: "렉시컬 드롭다운 메뉴" }), {
+                icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
+                // eslint-disable-next-line i18next/no-literal-string
+                keywords: ["problem input", "주관식 입력"],
+                onSelect,
+            });
+        default:
+            expectNever(key);
+    }
+}
+export function getTableComponentPickerOption(params) {
+    const { editor, rows, columns } = params;
+    return new ComponentPickerOption(`${rows}x${columns} Table`, {
+        icon: _jsx("i", { className: "icon table" }),
+        keywords: ["table"],
+        onSelect: () => {
+            editor.dispatchCommand(INSERT_TABLE_COMMAND, { columns, rows });
+        },
+    });
+}
+const getColoredQuoteInfo = (key, t, theme) => ({
+    grey: {
+        title: t("회색"),
+        iconColor: theme.color.container.marbleOnContainer,
+        containerColor: theme.color.container.marbleContainer,
+        keywords: ["grey", "gray"],
+    },
+    red: {
+        title: t("빨간색"),
+        iconColor: theme.color.container.redOnContainer,
+        containerColor: theme.color.container.redContainer,
+        keywords: ["red"],
+    },
+    yellow: {
+        title: t("노란색"),
+        iconColor: theme.color.container.yellowOnContainer,
+        containerColor: theme.color.container.yellowContainer,
+        keywords: ["yellow"],
+    },
+    blue: {
+        title: t("파란색"),
+        iconColor: theme.color.container.blueOnContainer,
+        containerColor: theme.color.container.blueContainer,
+        keywords: ["blue"],
+    },
+    green: {
+        title: t("초록색"),
+        iconColor: theme.color.container.greenOnContainer,
+        containerColor: theme.color.container.greenContainer,
+        keywords: ["green"],
+    },
+})[key];
+export function getQuoteColorOptions(editor, node, colorKey, t, theme) {
+    const { title, iconColor, containerColor, keywords } = getColoredQuoteInfo(colorKey, t, theme);
+    return new ComponentPickerOption(title, {
+        icon: _jsx(InputMethodLineIcon, { color: iconColor }),
+        iconContainerClassName: css `
+      background: ${containerColor};
+    `,
+        keywords,
+        onSelect: () => {
+            editor.update(() => {
+                node.setColor(colorKey);
+            });
+        },
+    });
+}
+export function getRemoveBlockMenu(editor, node, t) {
+    return new ComponentPickerOption(t("블록 삭제"), {
+        icon: _jsx(CloseFillIcon, {}),
+        keywords: [],
+        onSelect: () => {
+            editor.update(() => {
+                node.remove();
+            });
+        },
+    });
+}

package/dist/utils/types.d.ts

@@ -0,0 +1 @@
+export declare function expectNever(never: never): never;

package/dist/utils/types.js

@@ -0,0 +1,3 @@
+export function expectNever(never) {
+    throw new Error("unreachable: " + never);
+}

package/package.json

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