@team-monolith/cds 1.51.2 → 1.52.1

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SheetSelectNode.js

@@ -0,0 +1,82 @@
+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를 담고 있습니다.(view mode에서만 노출)
+ */
+export class SheetSelectNode extends DecoratorNode {
+    isInline() {
+        return false;
+    }
+    static getType() {
+        return "sheet-select";
+    }
+    getSelections() {
+        return this.__selections;
+    }
+    getSelected() {
+        return this.__selected;
+    }
+    getAllowMultipleAnswers() {
+        return this.__allowMultipleAnswers;
+    }
+    setSelections(selections) {
+        const self = this.getWritable();
+        self.__selections = selections;
+    }
+    setSelected(selected) {
+        const self = this.getWritable();
+        self.__selected = selected;
+    }
+    setAllowMultipleAnswers(allowMultipleAnswers) {
+        const self = this.getWritable();
+        self.__allowMultipleAnswers = allowMultipleAnswers;
+    }
+    static clone(node) {
+        return new SheetSelectNode(node.__selections, node.__selected, node.__allowMultipleAnswers, node.__key);
+    }
+    constructor(selections, selected, allowMultipleAnswers, key) {
+        super(key);
+        this.__selections = selections;
+        this.__selected = selected;
+        this.__allowMultipleAnswers = allowMultipleAnswers;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.sheetSelect);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        return $createSheetSelectNode({
+            key: serializedNode.key,
+            selections: serializedNode.selections,
+            selected: serializedNode.selected,
+            allowMultipleAnswers: serializedNode.allowMultipleAnswers,
+        });
+    }
+    exportJSON() {
+        return {
+            type: "sheet-select",
+            version: 1,
+            selections: this.__selections,
+            selected: this.__selected,
+            allowMultipleAnswers: this.__allowMultipleAnswers,
+        };
+    }
+    decorate() {
+        return (_jsx(SelectComponent, { selections: this.__selections, selected: this.__selected, allowMultipleAnswers: this.__allowMultipleAnswers, nodeKey: this.__key }));
+    }
+}
+export function $createSheetSelectNode(payload) {
+    const { selections, selected, key, allowMultipleAnswers } = payload;
+    return $applyNodeReplacement(new SheetSelectNode(selections, selected, allowMultipleAnswers, key));
+}
+export function $isSheetSelectNode(node) {
+    return node instanceof SheetSelectNode;
+}

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

@@ -0,0 +1 @@
+export * from "./SheetSelectNode";

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

@@ -0,0 +1 @@
+export * from "./SheetSelectNode";

package/dist/patterns/LexicalEditor/nodes/{ProblemSelectNode/SettingForm → insertImageDialog}/InsertImageDialog.d.ts

@@ -1,4 +1,7 @@
-import { ImageProps } from "../ProblemSelectNode";
+export interface ImageProps {
+    src: string;
+    altText: string;
+}
 export interface InsertImageDialogProps {
     title: string;
     open: boolean;

package/dist/patterns/LexicalEditor/nodes/{ProblemSelectNode/SettingForm → insertImageDialog}/InsertImageDialog.js

@@ -12,10 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/reac
 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 { 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";
 import { useForm } from "react-hook-form";

package/dist/patterns/LexicalEditor/nodes/{ProblemSelectNode/SettingForm → insertImageDialog}/InsertImageUploadedDialogBody.d.ts

@@ -1,5 +1,5 @@
-import { ImageProps } from "../ProblemSelectNode";
 import { Control, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import { ImageProps } from "./InsertImageDialog";
 export interface InsertImageUploadedDialogBodyProps {
     control: Control<ImageProps, any>;
     watch: UseFormWatch<ImageProps>;

package/dist/patterns/LexicalEditor/nodes/{ProblemSelectNode/SettingForm → insertImageDialog}/InsertImageUploadedDialogBody.js

@@ -10,11 +10,11 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 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";
+import { CodleDesignSystemContext } from "../../../../CodleDesignSystemProvider";
+import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
+import Button from "../../../../components/Button";
+import { RefreshLineIcon } from "../../../../icons";
+import Input from "../../../../components/Input";
 import { Controller, } from "react-hook-form";
 export function InsertImageUploadedDialogBody(props) {
     const { control, watch, setValue } = props;

package/dist/patterns/LexicalEditor/nodes/{ProblemSelectNode/SettingForm → insertImageDialog}/InsertImageUriDialogBody.d.ts

@@ -1,5 +1,5 @@
-import { ImageProps } from "../ProblemSelectNode";
 import { Control, UseFormWatch } from "react-hook-form";
+import { ImageProps } from "./InsertImageDialog";
 export interface InsertImageUriDialogBodyProps {
     control: Control<ImageProps, any>;
     watch: UseFormWatch<ImageProps>;

package/dist/patterns/LexicalEditor/nodes/{ProblemSelectNode/SettingForm → insertImageDialog}/InsertImageUriDialogBody.js

@@ -1,9 +1,9 @@
 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";
+import { AlertDialogActions, AlertDialogContent, } from "../../../../components/AlertDialog";
+import Input from "../../../../components/Input";
+import { LinkIcon } from "../../../../icons";
+import Button from "../../../../components/Button";
 import { Controller } from "react-hook-form";
 export function InsertImageUriDialogBody(props) {
     const { control, watch } = props;

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

@@ -0,0 +1 @@
+export * from "./InsertImageDialog";

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

@@ -0,0 +1 @@
+export * from "./InsertImageDialog";

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

@@ -6,6 +6,7 @@
 /// <reference types="react" />
 export interface ComponentAdderPluginProps {
     anchorElem: HTMLElement;
+    isSheetEnabled: boolean;
     isQuizEnabled: boolean;
 }
 export declare const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";

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

@@ -54,7 +54,7 @@ function getTextUpToAnchor(selection) {
     return anchorNode.getTextContent().slice(0, anchorOffset);
 }
 export function ComponentAdderPlugin(props) {
-    const { anchorElem, isQuizEnabled } = props;
+    const { anchorElem, isSheetEnabled, isQuizEnabled } = props;
     const theme = useTheme();
     const [editor] = useLexicalComposerContext();
     const [nodeKey, setNodeKey] = useState(null);
@@ -137,7 +137,10 @@ export function ComponentAdderPlugin(props) {
             return newResolves.filter((newResolve) => resolves.indexOf(newResolve) === -1);
         });
     });
-    const getContextMenuOptions = useContextMenuOptions({ isQuizEnabled });
+    const getContextMenuOptions = useContextMenuOptions({
+        isSheetEnabled,
+        isQuizEnabled,
+    });
     const filteredOptions = options.filter((option) => {
         if (!query) {
             return true;
@@ -197,6 +200,7 @@ export function ComponentAdderPlugin(props) {
                                 editor,
                                 theme,
                                 setImageOpen,
+                                isSheetEnabled,
                                 isQuizEnabled,
                             });
                             setOptions(baseOptions);

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

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

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

@@ -15,6 +15,8 @@ import { useTheme } from "@emotion/react";
 import { css } from "@emotion/css";
 import { $isProblemInputNode } from "../../nodes";
 import { $isProblemSelectNode, } from "../../nodes/ProblemSelectNode";
+import { $isSheetInputNode } from "../../nodes/SheetInputNode";
+import { $isSheetSelectNode, } from "../../nodes/SheetSelectNode";
 function getParagraphContextMenuOptions(editor, node, setOpen) {
     return [
         new ComponentPickerOption("본문", {
@@ -197,6 +199,28 @@ function getProblemSelectContextMenuOptions(node) {
         }),
     ];
 }
+function getSheetInputContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
+function getSheetSelectContextMenuOptions(node) {
+    return [
+        new ComponentPickerOption("블록 삭제", {
+            icon: _jsx(CloseFillIcon, {}),
+            keywords: [],
+            onSelect: () => {
+                node.remove();
+            },
+        }),
+    ];
+}
 function getColoredQuoteContextMenuOptions(editor, theme, node) {
     return [
         new ComponentPickerOption("회색", {
@@ -271,7 +295,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)) {
@@ -280,6 +304,12 @@ export function useContextMenuOptions(props) {
         else if ($isProblemSelectNode(node)) {
             return getProblemSelectContextMenuOptions(node);
         }
+        else if ($isSheetInputNode(node)) {
+            return getSheetInputContextMenuOptions(node);
+        }
+        else if ($isSheetSelectNode(node)) {
+            return getSheetSelectContextMenuOptions(node);
+        }
         else if (node instanceof ParagraphNode) {
             return getParagraphContextMenuOptions(editor, node, setImageOpen);
         }
@@ -294,7 +324,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.2",
+  "version": "1.52.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,