@team-monolith/cds 1.119.2 → 1.119.4

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

@@ -18,10 +18,10 @@ import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
 import { $isSheetInputNode } from "../../nodes/SheetInputNode";
 import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
 import { $isSelfEvaluationNode, } from "../../nodes/SelfEvaluationNode";
-import { i18n } from "../../../../i18n/i18n";
-function getParagraphContextMenuOptions(editor, node) {
+import { useTranslation } from "react-i18next";
+function getParagraphContextMenuOptions(editor, node, t) {
     return [
-        new ComponentPickerOption(i18n.t("본문", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("본문", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(TextIcon, {}),
             // eslint-disable-next-line i18next/no-literal-string
             keywords: ["normal", "paragraph", "p", "text", "본문", "단락", "내용"],
@@ -32,9 +32,9 @@ function getParagraphContextMenuOptions(editor, node) {
         }),
         ...[1, 2, 3].map((n) => {
             const titleMap = {
-                1: i18n.t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: i18n.t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: i18n.t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
             };
             const iconMap = {
                 1: _jsx(H1Icon, {}),
@@ -50,7 +50,7 @@ function getParagraphContextMenuOptions(editor, node) {
                 }),
             });
         }),
-        new ComponentPickerOption(i18n.t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(ListUnorderedIcon, {}),
             keywords: ["bulleted list", "unordered list", "ul"],
             onSelect: () => {
@@ -58,7 +58,7 @@ function getParagraphContextMenuOptions(editor, node) {
                 editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
             },
         }),
-        new ComponentPickerOption(i18n.t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(ListOrderedIcon, {}),
             keywords: ["numbered list", "ordered list", "ol"],
             onSelect: () => {
@@ -66,7 +66,7 @@ function getParagraphContextMenuOptions(editor, node) {
                 editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
             },
         }),
-        new ComponentPickerOption(i18n.t("인용 블록", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("인용 블록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(DoubleQuotesLIcon, {}),
             keywords: ["block quote"],
             onSelect: () => editor.update(() => {
@@ -74,7 +74,7 @@ function getParagraphContextMenuOptions(editor, node) {
                 $setBlocksType(selection, () => $createQuoteNode());
             }),
         }),
-        new ComponentPickerOption(i18n.t("코드 블록", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("코드 블록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(CodeViewIcon, {}),
             keywords: ["javascript", "python", "js", "codeblock"],
             onSelect: () => editor.update(() => {
@@ -91,7 +91,7 @@ function getParagraphContextMenuOptions(editor, node) {
                 }
             }),
         }),
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -102,13 +102,13 @@ function getParagraphContextMenuOptions(editor, node) {
         }),
     ];
 }
-function getHeadingContextMenuOptions(editor, node) {
+function getHeadingContextMenuOptions(editor, node, t) {
     return [
         ...[1, 2, 3].map((n) => {
             const titleMap = {
-                1: i18n.t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: i18n.t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: i18n.t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
             };
             const iconMap = {
                 1: _jsx(H1Icon, {}),
@@ -124,7 +124,7 @@ function getHeadingContextMenuOptions(editor, node) {
                 }),
             });
         }),
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -135,9 +135,9 @@ function getHeadingContextMenuOptions(editor, node) {
         }),
     ];
 }
-function getListContextMenuOptions(editor, theme, node) {
+function getListContextMenuOptions(editor, theme, node, t) {
     return [
-        new ComponentPickerOption(i18n.t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("일반 목록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(ListUnorderedIcon, {}),
             keywords: ["bulleted list", "unordered list", "ul"],
             onSelect: () => {
@@ -145,7 +145,7 @@ function getListContextMenuOptions(editor, theme, node) {
                 editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined);
             },
         }),
-        new ComponentPickerOption(i18n.t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
+        new ComponentPickerOption(t("숫자 목록", { context: "렉시컬 드롭다운 메뉴" }), {
             icon: _jsx(ListOrderedIcon, {}),
             keywords: ["numbered list", "ordered list", "ol"],
             onSelect: () => {
@@ -153,7 +153,7 @@ function getListContextMenuOptions(editor, theme, node) {
                 editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined);
             },
         }),
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -164,13 +164,19 @@ function getListContextMenuOptions(editor, theme, node) {
         }),
     ];
 }
+/**
+ * 토글 노드를 헤딩 노드로 변환하는 함수
+ * - 토글 컨테이너의 제목을 지정된 Heading 노드로 변환하고 (제목이 빈 경우 빈 텍스트 노드를 추가)
+ * - 본문과 컨테이너를 언랩하여 계층을 평탄화한다.
+ */
 function convertToggleTitleToHeading(container, tag) {
-    const titleNode = container.getFirstChild();
-    if (!$isToggleTitleNode(titleNode)) {
+    const children = container.getChildren();
+    const titleNode = children.find($isToggleTitleNode);
+    if (!titleNode) {
         return;
     }
-    const contentNode = titleNode.getNextSibling();
-    if (!$isToggleContentNode(contentNode)) {
+    const contentNode = children.find($isToggleContentNode);
+    if (!contentNode) {
         return;
     }
     const headingNode = $createHeadingNode(tag);
@@ -188,13 +194,13 @@ function convertToggleTitleToHeading(container, tag) {
     $unwrapNode(container);
     headingNode.selectStart();
 }
-function getToggleContextMenuOptions(editor, container) {
+function getToggleContextMenuOptions(editor, container, t) {
     return [
         ...[1, 2, 3].map((n) => {
             const titleMap = {
-                1: i18n.t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                2: i18n.t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
-                3: i18n.t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                1: t("큰 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                2: t("중간 제목", { context: "렉시컬 드롭다운 메뉴" }),
+                3: t("작은 제목", { context: "렉시컬 드롭다운 메뉴" }),
             };
             const iconMap = {
                 1: _jsx(H1Icon, {}),
@@ -209,7 +215,7 @@ function getToggleContextMenuOptions(editor, container) {
                 }),
             });
         }),
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -218,9 +224,9 @@ function getToggleContextMenuOptions(editor, container) {
         }),
     ];
 }
-function getProblemInputContextMenuOptions(node) {
+function getProblemInputContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -229,9 +235,9 @@ function getProblemInputContextMenuOptions(node) {
         }),
     ];
 }
-function getProblemSelectContextMenuOptions(node) {
+function getProblemSelectContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -240,9 +246,9 @@ function getProblemSelectContextMenuOptions(node) {
         }),
     ];
 }
-function getSheetInputContextMenuOptions(node) {
+function getSheetInputContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -251,9 +257,9 @@ function getSheetInputContextMenuOptions(node) {
         }),
     ];
 }
-function getSheetSelectContextMenuOptions(node) {
+function getSheetSelectContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -262,9 +268,9 @@ function getSheetSelectContextMenuOptions(node) {
         }),
     ];
 }
-function getSelfEvaluationContextMenuOptions(node) {
+function getSelfEvaluationContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -273,9 +279,9 @@ function getSelfEvaluationContextMenuOptions(node) {
         }),
     ];
 }
-function getImageContextMenuOptions(node) {
+function getImageContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -284,9 +290,9 @@ function getImageContextMenuOptions(node) {
         }),
     ];
 }
-function getVideoContextMenuOptions(node) {
+function getVideoContextMenuOptions(node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -295,12 +301,12 @@ function getVideoContextMenuOptions(node) {
         }),
     ];
 }
-function getColoredQuoteContextMenuOptions(editor, theme, node) {
+function getColoredQuoteContextMenuOptions(editor, theme, node, t) {
     return [
-        new ComponentPickerOption(i18n.t("회색"), {
+        new ComponentPickerOption(t("회색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.marbleOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.marbleContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.marbleContainer};
       `,
             keywords: ["grey", "gray"],
             onSelect: () => {
@@ -309,10 +315,10 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
                 });
             },
         }),
-        new ComponentPickerOption(i18n.t("빨간색"), {
+        new ComponentPickerOption(t("빨간색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.redOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.redContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.redContainer};
       `,
             keywords: ["red"],
             onSelect: () => {
@@ -321,10 +327,10 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
                 });
             },
         }),
-        new ComponentPickerOption(i18n.t("노란색"), {
+        new ComponentPickerOption(t("노란색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.yellowOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.yellowContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.yellowContainer};
       `,
             keywords: ["yellow"],
             onSelect: () => {
@@ -333,10 +339,10 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
                 });
             },
         }),
-        new ComponentPickerOption(i18n.t("파란색"), {
+        new ComponentPickerOption(t("파란색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.blueOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.blueContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.blueContainer};
       `,
             keywords: ["blue"],
             onSelect: () => {
@@ -345,10 +351,10 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
                 });
             },
         }),
-        new ComponentPickerOption(i18n.t("초록색"), {
+        new ComponentPickerOption(t("초록색"), {
             icon: (_jsx(InputMethodLineIcon, { color: theme.color.container.greenOnContainer })),
-            iconContainerClassName: css `
-        background: ${theme.color.container.greenContainer};
+            iconContainerClassName: css `
+        background: ${theme.color.container.greenContainer};
       `,
             keywords: ["green"],
             onSelect: () => {
@@ -357,7 +363,7 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
                 });
             },
         }),
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -368,9 +374,9 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
         }),
     ];
 }
-function getUploadFileContextMenuOptions(editor, node) {
+function getUploadFileContextMenuOptions(editor, node, t) {
     return [
-        new ComponentPickerOption(i18n.t("블록 삭제"), {
+        new ComponentPickerOption(t("블록 삭제"), {
             icon: _jsx(CloseFillIcon, {}),
             keywords: [],
             onSelect: () => {
@@ -384,58 +390,53 @@ function getUploadFileContextMenuOptions(editor, node) {
 export function useContextMenuOptions(props) {
     const { isSheetEnabled, isQuizEnabled, showFileUpload } = props;
     const theme = useTheme();
+    const { t } = useTranslation();
     return (editor, node, setImageOpen, setVideoOpen, setFileOpen) => {
         if ($isProblemInputNode(node)) {
-            return getProblemInputContextMenuOptions(node);
+            return getProblemInputContextMenuOptions(node, t);
         }
         else if ($isProblemSelectNode(node)) {
-            return getProblemSelectContextMenuOptions(node);
+            return getProblemSelectContextMenuOptions(node, t);
         }
         else if ($isSheetInputNode(node)) {
-            return getSheetInputContextMenuOptions(node);
+            return getSheetInputContextMenuOptions(node, t);
         }
         else if ($isSheetSelectNode(node)) {
-            return getSheetSelectContextMenuOptions(node);
+            return getSheetSelectContextMenuOptions(node, t);
         }
         else if ($isSelfEvaluationNode(node)) {
-            return getSelfEvaluationContextMenuOptions(node);
+            return getSelfEvaluationContextMenuOptions(node, t);
         }
         else if ($isImageNode(node)) {
-            return getImageContextMenuOptions(node);
+            return getImageContextMenuOptions(node, t);
         }
         else if ($isVideoNode(node)) {
-            return getVideoContextMenuOptions(node);
+            return getVideoContextMenuOptions(node, t);
         }
         else if (node instanceof ParagraphNode) {
-            return getParagraphContextMenuOptions(editor, node);
+            return getParagraphContextMenuOptions(editor, node, t);
         }
         else if (node instanceof HeadingNode) {
-            return getHeadingContextMenuOptions(editor, node);
+            return getHeadingContextMenuOptions(editor, node, t);
         }
         else if (node instanceof ListNode || node instanceof ListItemNode) {
-            return getListContextMenuOptions(editor, theme, node);
+            return getListContextMenuOptions(editor, theme, node, t);
         }
         else if ($isToggleContainerNode(node)) {
-            return getToggleContextMenuOptions(editor, node);
-        }
-        else if ($isToggleTitleNode(node) || $isToggleContentNode(node)) {
-            const parent = node.getParent();
-            if (parent && $isToggleContainerNode(parent)) {
-                return getToggleContextMenuOptions(editor, parent);
-            }
-            return [];
+            return getToggleContextMenuOptions(editor, node, t);
         }
         else if ($isColoredQuoteNode(node)) {
-            return getColoredQuoteContextMenuOptions(editor, theme, node);
+            return getColoredQuoteContextMenuOptions(editor, theme, node, t);
         }
         else if ($isFileNode(node)) {
-            return getUploadFileContextMenuOptions(editor, node);
+            return getUploadFileContextMenuOptions(editor, node, t);
         }
         else {
             return [
                 ...getBaseOptions({
                     editor,
                     theme,
+                    t,
                     setImageOpen,
                     setVideoOpen,
                     isSheetEnabled,
@@ -443,7 +444,7 @@ export function useContextMenuOptions(props) {
                     setFileOpen,
                     showFileUpload,
                 }),
-                new ComponentPickerOption(i18n.t("블록 삭제"), {
+                new ComponentPickerOption(t("블록 삭제"), {
                     icon: _jsx(CloseFillIcon, {}),
                     keywords: [],
                     onSelect: () => {

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

@@ -10,6 +10,7 @@ import { MenuOption } from "@lexical/react/LexicalTypeaheadMenuPlugin";
 import { LexicalEditor } from "lexical";
 import { ReactElement } from "react";
 import { Theme } from "@emotion/react";
+import { TFunction } from "i18next";
 export declare class ComponentDrawerOption extends MenuOption {
     title: string;
     component: ReactElement;
@@ -33,6 +34,7 @@ export declare class ComponentPickerOption extends MenuOption {
 export declare function getBaseOptions(props: {
     editor: LexicalEditor;
     theme: Theme;
+    t: TFunction;
     setImageOpen: (open: boolean) => void;
     setVideoOpen: (open: boolean) => void;
     setFileOpen: (open: boolean) => void;