@team-monolith/cds 1.51.1 → 1.52.0

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

@@ -271,7 +271,7 @@ function getColoredQuoteContextMenuOptions(editor, theme, node) {
     ];
 }
 export function useContextMenuOptions(props) {
-    const { isQuizEnabled } = props;
+    const { isSheetEnabled, isQuizEnabled } = props;
     const theme = useTheme();
     return (editor, node, setImageOpen) => {
         if ($isProblemInputNode(node)) {
@@ -294,7 +294,13 @@ export function useContextMenuOptions(props) {
         }
         else {
             return [
-                ...getBaseOptions({ editor, theme, setImageOpen, isQuizEnabled }),
+                ...getBaseOptions({
+                    editor,
+                    theme,
+                    setImageOpen,
+                    isSheetEnabled,
+                    isQuizEnabled,
+                }),
                 new ComponentPickerOption("블록 삭제", {
                     icon: _jsx(CloseFillIcon, {}),
                     keywords: [],

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

@@ -34,8 +34,10 @@ export declare function getBaseOptions(props: {
     editor: LexicalEditor;
     theme: Theme;
     setImageOpen: (open: boolean) => void;
+    isSheetEnabled: boolean;
     isQuizEnabled: boolean;
 }): (ComponentPickerOption | ComponentDrawerOption)[];
 export declare function ComponentPickerMenuPlugin(props: {
+    isSheetEnabled: boolean;
     isQuizEnabled: boolean;
 }): JSX.Element;

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

@@ -21,12 +21,14 @@ import * as ReactDOM from "react-dom";
 import { css as cssToClassName } from "@emotion/css";
 import { ComponentPickerMenuList } from "./ComponentPickerMenuList";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
-import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, } from "../../../../icons";
+import { TextIcon, H1Icon, H2Icon, H3Icon, ListUnorderedIcon, ListOrderedIcon, DoubleQuotesLIcon, CodeViewIcon, SeparatorIcon, ImageLineIcon, InputMethodLineIcon, ListRadioIcon, LayoutColumnLineIcon, FileList2LineIcon, } from "../../../../icons";
 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 { INSERT_LAYOUT_COMMAND } from "../LayoutPlugin";
+import { INSERT_SHEET_SELECT_COMMAND } from "../SheetSelectPlugin";
+import { INSERT_SHEET_INPUT_COMMAND } from "../SheetInputPlugin";
 // import useModal from "../../hooks/useModal";
 // import catTypingGif from "../../images/cat-typing.gif";
 // import { INSERT_IMAGE_COMMAND, InsertImageDialog } from "../ImagesPlugin";
@@ -67,6 +69,51 @@ function getDynamicOptions(editor, queryString) {
     }
     return options;
 }
+function getSheetContextOptions(editor, theme) {
+    return [
+        new ComponentPickerOption("선택형 입력 칸", {
+            icon: _jsx(ListRadioIcon, { color: theme.color.foreground.primary }),
+            keywords: ["sheet select", "선택형 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_SHEET_SELECT_COMMAND, {
+                selections: [
+                    {
+                        show: {
+                            image: null,
+                            text: "",
+                        },
+                        value: "1",
+                    },
+                ],
+                selected: [],
+                allowMultipleAnswers: false,
+            }),
+        }),
+        new ComponentPickerOption("단답형 입력 칸", {
+            icon: _jsx(InputMethodLineIcon, { color: theme.color.foreground.primary }),
+            keywords: ["sheet short input", "단답형 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_SHEET_INPUT_COMMAND, {
+                multiline: false,
+                value: "",
+                placeholder: "",
+            }),
+        }),
+        new ComponentPickerOption("서술형 입력 칸", {
+            icon: _jsx(FileList2LineIcon, { color: theme.color.foreground.primary }),
+            keywords: ["sheet long input", "서술형 입력"],
+            onSelect: () => editor.dispatchCommand(INSERT_SHEET_INPUT_COMMAND, {
+                multiline: true,
+                value: "",
+                placeholder: "",
+            }),
+        }),
+        new ComponentDrawerOption("활동지 메뉴구분선", (_jsx("div", { css: css `
+            width: 100%;
+            height: 1px;
+            background: ${theme.color.background.neutralAltActive};
+            margin: 4px 0;
+          ` }))),
+    ];
+}
 function getQuizContextOptions(editor, theme) {
     return [
         new ComponentPickerOption("주관식 입력 칸", {
@@ -103,7 +150,7 @@ function getQuizContextOptions(editor, theme) {
                 });
             },
         }),
-        new ComponentDrawerOption("메뉴구분선", (_jsx("div", { css: css `
+        new ComponentDrawerOption("퀴즈 메뉴구분선", (_jsx("div", { css: css `
             width: 100%;
             height: 1px;
             background: ${theme.color.background.neutralAltActive};
@@ -112,7 +159,7 @@ function getQuizContextOptions(editor, theme) {
     ];
 }
 export function getBaseOptions(props) {
-    const { editor, theme, setImageOpen, isQuizEnabled } = props;
+    const { editor, theme, setImageOpen, isSheetEnabled, isQuizEnabled } = props;
     const baseOptions = [
         new ComponentPickerOption("본문", {
             icon: _jsx(TextIcon, {}),
@@ -202,6 +249,10 @@ export function getBaseOptions(props) {
     if (isQuizEnabled || isDevMode) {
         baseOptions.unshift(...getQuizContextOptions(editor, theme));
     }
+    // isSheetEnabled이거나 devMode이면 활동지 컨텍스트 메뉴를 꼭대기에 추가합니다.
+    if (isSheetEnabled || isDevMode) {
+        baseOptions.unshift(...getSheetContextOptions(editor, theme));
+    }
     // devMode이면 칼럼 컨텍스트 메뉴를 추가합니다.
     if (isDevMode) {
         baseOptions.push(new ComponentPickerOption("칼럼", {
@@ -213,7 +264,7 @@ export function getBaseOptions(props) {
     return baseOptions;
 }
 export function ComponentPickerMenuPlugin(props) {
-    const { isQuizEnabled } = props;
+    const { isSheetEnabled, isQuizEnabled } = props;
     const [editor] = useLexicalComposerContext();
     const theme = useTheme();
     const [queryString, setQueryString] = useState(null);
@@ -226,6 +277,7 @@ export function ComponentPickerMenuPlugin(props) {
             editor,
             theme,
             setImageOpen: setOpen,
+            isSheetEnabled,
             isQuizEnabled,
         });
         if (!queryString) {

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LexicalCommand } from "lexical";
+import { SheetInputPayload } from "../../nodes/SheetInputNode";
+export declare const INSERT_SHEET_INPUT_COMMAND: LexicalCommand<SheetInputPayload>;
+export default function SheetInputPlugin(): JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createSheetInputNode, SheetInputNode, } from "../../nodes/SheetInputNode";
+export const INSERT_SHEET_INPUT_COMMAND = createCommand("INSERT_SHEET_INPUT_COMMAND");
+export default function SheetInputPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([SheetInputNode])) {
+            throw new Error("SheetInputNode: SheetInputNode not registered on editor");
+        }
+        editor.registerCommand(INSERT_SHEET_INPUT_COMMAND, (payload) => {
+            const sheetInputNode = $createSheetInputNode(payload);
+            $insertNodeToNearestRoot(sheetInputNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LexicalCommand } from "lexical";
+import { SheetSelectPayload } from "../../nodes/SheetSelectNode";
+export declare const INSERT_SHEET_SELECT_COMMAND: LexicalCommand<SheetSelectPayload>;
+export default function SheetSelectPlugin(): JSX.Element | null;

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

@@ -0,0 +1,20 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, createCommand, } from "lexical";
+import { useEffect } from "react";
+import { $createSheetSelectNode, SheetSelectNode, } from "../../nodes/SheetSelectNode";
+export const INSERT_SHEET_SELECT_COMMAND = createCommand("INSERT_SHEET_SELECT_COMMAND");
+export default function SheetSelectPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        if (!editor.hasNodes([SheetSelectNode])) {
+            throw new Error("SheetSelectNode: SheetSelectNode not registered on editor");
+        }
+        editor.registerCommand(INSERT_SHEET_SELECT_COMMAND, (payload) => {
+            const sheetSelectNode = $createSheetSelectNode(payload);
+            $insertNodeToNearestRoot(sheetSelectNode);
+            return true;
+        }, COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    return null;
+}

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

@@ -31,6 +31,8 @@ export declare function getTheme(theme: Theme, editable: boolean): {
     };
     problemInput: string;
     problemSelect: string;
+    sheetSelect: string;
+    sheetInput: string;
     layoutContainer: string;
     layoutItem: string | false;
 };

package/dist/patterns/LexicalEditor/theme.js

@@ -262,6 +262,20 @@ export function getTheme(theme, editable) {
       flex: 1;
       gap: 4px;
       margin-bottom: 8px;
+    `,
+        sheetSelect: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
+    `,
+        sheetInput: css `
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      gap: 4px;
+      margin-bottom: 8px;
     `,
         layoutContainer: css `
       display: grid;

package/package.json

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