@team-monolith/cds 1.51.1 → 1.52.0

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

@@ -0,0 +1,9 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { Selection } from "./SheetSelectNode";
+export declare function SelectComponent(props: {
+    selections: Selection[];
+    selected: string[];
+    allowMultipleAnswers: boolean;
+    nodeKey: NodeKey;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSheetSelectNode } from "./SheetSelectNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useContext, useState } from "react";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { LexicalCustomConfigContext } from "../../LexicalCustomConfigContext";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { AlarmWarningFillIcon, Settings3FillIcon } from "../../../../icons";
+import { SelectBoxEdit, SelectBoxView } from "./SelectBox";
+import SquareButton from "../../../../components/SquareButton";
+import { SettingForm } from "./SettingForm";
+export function SelectComponent(props) {
+    const { selections, selected, allowMultipleAnswers, nodeKey } = props;
+    const [editor] = useLexicalComposerContext();
+    const [settingOpen, setSettingOpen] = useState(false);
+    const isEditable = useLexicalEditable();
+    const { freezeProblemNode } = useContext(LexicalCustomConfigContext);
+    // view
+    if (!isEditable) {
+        return (_jsxs(_Fragment, { children: [allowMultipleAnswers && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                width: 14px;
+                height: 14px;
+              ` }), "\uC9C8\uBB38\uC5D0 \uD574\uB2F9\uD558\uB294 \uB2F5\uC744 \uBAA8\uB450 \uACE0\uB974\uB294 \uBB38\uD56D\uC785\uB2C8\uB2E4."] })), selections.map((selection, index) => (_jsx(SelectBoxView, { index: index + 1, isSelected: selected.includes(selection.value), image: selection.show.image, text: selection.show.text, onClick: freezeProblemNode
+                        ? undefined
+                        : () => {
+                            const isSelected = selected.includes(selection.value);
+                            if (isSelected) {
+                                editor.update(() => {
+                                    const node = $getNodeByKey(nodeKey);
+                                    if (!$isSheetSelectNode(node)) {
+                                        return;
+                                    }
+                                    node.setSelected(selected.filter((v) => v !== selection.value));
+                                });
+                            }
+                            else {
+                                editor.update(() => {
+                                    const node = $getNodeByKey(nodeKey);
+                                    if (!$isSheetSelectNode(node)) {
+                                        return;
+                                    }
+                                    if (allowMultipleAnswers) {
+                                        node.setSelected([...selected, selection.value]);
+                                    }
+                                    else {
+                                        node.setSelected([selection.value]);
+                                    }
+                                });
+                            }
+                        } }, index)))] }));
+    }
+    // edit
+    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          gap: 4px;
+        ` }, { children: [_jsx("div", Object.assign({ css: css `
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+          ` }, { children: selections.map((selection, index) => (_jsx(SelectBoxEdit, { index: index + 1, image: selection.show.image, text: selection.show.text || `${index + 1}번 선택지`, onClick: () => setSettingOpen((open) => !open) }, index))) })), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setSettingOpen((open) => !open);
+                        } })] })), settingOpen && (_jsx(SettingForm, { data: {
+                    selections,
+                    allowMultipleAnswers,
+                }, nodeKey: nodeKey, onClose: () => setSettingOpen(false) }))] }));
+}
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    margin-bottom: 12px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SettingForm/FormAllowMultipleAnswers.d.ts

@@ -0,0 +1,6 @@
+import { Control } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
+/** SheetSelectNode SettingForm의 다중 선택 허용 여부 폼입니다. */
+export declare function FormAllowMultipleAnswers(props: {
+    control: Control<SettingFormData, any>;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../SegmentedControl";
+/** SheetSelectNode SettingForm의 다중 선택 허용 여부 폼입니다. */
+export function FormAllowMultipleAnswers(props) {
+    const { control } = props;
+    return (_jsx(Controller, { name: "allowMultipleAnswers", control: control, render: ({ field: { value, onChange } }) => {
+            return (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value, onChange: onChange, fullWidth: true }, { children: [_jsx(SegmentedControlButton, { value: false, label: "\uD558\uB098\uB9CC \uC120\uD0DD" }), _jsx(SegmentedControlButton, { value: true, label: "\uC5EC\uB7EC \uAC1C \uC120\uD0DD" })] })));
+        } }));
+}

package/dist/patterns/LexicalEditor/nodes/SheetSelectNode/SettingForm/FormSelection.d.ts

@@ -0,0 +1,11 @@
+/** @jsxImportSource @emotion/react */
+import { Control, UseFormWatch } from "react-hook-form";
+import { SettingFormData } from "./SettingForm";
+/** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
+export default function FormSelection(props: {
+    index: number;
+    control: Control<SettingFormData, any>;
+    watch: UseFormWatch<SettingFormData>;
+    rules?: any;
+    onDelete?: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { Controller } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { useState } from "react";
+import { InsertImageDialog } from "../../insertImageDialog";
+import { DeleteBinLineIcon, ErrorWarningFillIcon, ImageAddFillIcon, ImageEditFillIcon, Input, SquareButton, } from "../../../../..";
+/** SheetSelectNode SettingForm의 단일 선택지 폼입니다. */
+export default function FormSelection(props) {
+    const { index, control, watch, rules, onDelete } = props;
+    const [imageOpen, setImageOpen] = useState(false);
+    const [inputFocused, setInputFocused] = useState(false);
+    return (_jsxs(Container, { children: [_jsx(Index, { children: index + 1 }), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          gap: 4px;
+        ` }, { children: [_jsx(Controller, { name: `selections.${index}.show.image`, control: control, render: ({ field: { value, onChange } }) => (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { title: value ? "이미지 바꾸기" : "이미지 삽입하기", open: imageOpen, onClose: () => setImageOpen(false), updateImg: (props) => onChange(props), deleteButton: Boolean(value) }), value && value.src && (_jsx("img", { src: value.src, alt: value.altText, css: css `
+                    height: auto;
+                    // 이미지로 인해 좌우로 스크롤이 생기는 것을 방지
+                    max-width: min(400px, 100%);
+                    width: fit-content;
+                    border-radius: 6px;
+                  `, draggable: "false" }))] })) }), _jsx(Controller, { name: `selections.${index}.show.text`, control: control, rules: rules, render: ({ field: { value, onChange }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid
+                                ? "activeDanger"
+                                : inputFocused
+                                    ? "activePrimary"
+                                    : "default", value: value, onChange: onChange, inputProps: {
+                                onFocus: (_e) => {
+                                    setInputFocused(true);
+                                },
+                                onBlur: (_e) => {
+                                    setInputFocused(false);
+                                },
+                            }, placeholder: `${index + 1}번 선택지`, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, multiline: true, fullWidth: true, css: css `
+                flex: 1;
+              ` })) })] })), _jsxs("div", Object.assign({ css: css `
+          display: flex;
+          // 이미지가 들어가서 container height가 커져도 높이가 유지되도록 설정
+          height: 36px;
+          gap: 8px;
+          align-items: center;
+        ` }, { children: [_jsx(SquareButton, { color: "icon", size: "xsmall", icon: watch(`selections.${index}.show.image`) ? (_jsx(ImageEditFillIcon, {})) : (_jsx(ImageAddFillIcon, {})), onClick: () => {
+                            setImageOpen(true);
+                        } }), onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete }))] }))] }));
+}
+const Container = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 4px 12px;
+    gap: 8px;
+    border-radius: 8px;
+    background: ${theme.color.background.neutralAlt};
+  `);
+const Index = styled.div(({ theme }) => css `
+    display: flex;
+    box-sizing: border-box;
+    width: 20px;
+    height: 20px;
+    padding: 4px;
+    margin-top: 8px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-weight: 800;
+    line-height: 16px;
+  `);
+const Answer = styled.div(({ theme }) => css `
+    display: flex;
+    align-items: center;
+    padding-right: 4px;
+    gap: 8px;
+    color: ${theme.color.foreground.neutralBase};
+    cursor: pointer;
+    /* Default/Label/14px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 114.286% */
+  `);

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

@@ -0,0 +1,13 @@
+/** @jsxImportSource @emotion/react */
+import { NodeKey } from "lexical";
+import { Selection } from "../SheetSelectNode";
+export interface SettingFormData {
+    selections: Selection[];
+    allowMultipleAnswers: boolean;
+}
+/** 활동지 활동의 선택형 입력칸 설정 컴포넌트입니다. */
+export declare function SettingForm(props: {
+    data: SettingFormData;
+    nodeKey: NodeKey;
+    onClose: () => void;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,148 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { $getNodeByKey } from "lexical";
+import { $isSheetSelectNode } from "../SheetSelectNode";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useFieldArray, useForm } from "react-hook-form";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
+import { AddFillIcon, AlarmWarningFillIcon, Button, ListRadioIcon, shadows, } from "../../../../..";
+import { uid } from "uid";
+import FormSelection from "./FormSelection";
+import { FormAllowMultipleAnswers } from "./FormAllowMultipleAnswers";
+/** 활동지 활동의 선택형 입력칸 설정 컴포넌트입니다. */
+export function SettingForm(props) {
+    const { data, nodeKey, onClose } = props;
+    const { selections, allowMultipleAnswers } = data;
+    const [editor] = useLexicalComposerContext();
+    const { control, handleSubmit, watch } = useForm({
+        mode: "all",
+        defaultValues: {
+            selections,
+            allowMultipleAnswers,
+        },
+    });
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name: "selections",
+        keyName: "uid",
+    });
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            if (!$isSheetSelectNode(node)) {
+                return;
+            }
+            node.setSelections(data.selections);
+            node.setAllowMultipleAnswers(data.allowMultipleAnswers);
+        });
+        onClose();
+    };
+    function validateDuplicatedSelection(index) {
+        const selections = watch("selections");
+        if (index === 0)
+            return true;
+        const duplicatedIndex = selections
+            .slice(0, index)
+            .findIndex((selection) => selection.show.text === selections[index].show.text);
+        if (duplicatedIndex < 0)
+            return true;
+        return `${duplicatedIndex + 1}번 선택지와 같은 내용입니다.`;
+    }
+    return (_jsxs(Form, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(ListRadioIcon, { css: css `
+            width: 12px;
+            height: 12px;
+          ` }), "\uC120\uD0DD\uD615 \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC120\uD0DD\uC9C0" }), fields.map((field, index) => (_jsx(FormSelection, { index: index, control: control, watch: watch, rules: {
+                                            required: "필수 입력 항목입니다.",
+                                            validate: () => validateDuplicatedSelection(index),
+                                        }, onDelete: index !== 0
+                                            ? () => {
+                                                remove(index);
+                                            }
+                                            : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uC120\uD0DD\uC9C0 \uCD94\uAC00", onClick: () => {
+                                    append({
+                                        show: {
+                                            image: null,
+                                            text: "",
+                                        },
+                                        value: uid(),
+                                    });
+                                } })] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uB2E4\uC911 \uC120\uD0DD \uD5C8\uC6A9 \uC5EC\uBD80" }), _jsx(FormAllowMultipleAnswers, { control: control })] }), watch("allowMultipleAnswers") && (_jsxs(Alert, { children: [_jsx(AlarmWarningFillIcon, { css: css `
+                  min-width: 14px;
+                  width: 14px;
+                  height: 14px;
+                ` }), "\uB2E4\uC911 \uC120\uD0DD\uC744 \uD5C8\uC6A9\uD55C \uBB38\uD56D\uC5D0\uB294 \uC5EC\uB7EC \uC120\uD0DD\uC9C0\uB97C \uACE0\uB97C \uC218 \uC788\uB2E4\uB294 \uC548\uB0B4\uAC00 \uC81C\uACF5\uB429\uB2C8\uB2E4."] }))] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: onClose }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", bold: true, type: "submit" })] })] })));
+}
+const Form = styled.form(({ theme }) => css `
+    display: flex;
+    width: 620px;
+    flex-direction: column;
+    border-radius: 6px;
+    border: 1px solid ${theme.color.background.neutralAltActive};
+    background: ${theme.color.background.neutralBase};
+    box-shadow: ${shadows.shadow08};
+  `);
+const Title = styled.div(({ theme }) => css `
+    display: flex;
+    padding: 8px 12px;
+    gap: 4px;
+    align-items: center;
+    color: ${theme.color.foreground.neutralBase};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Content = styled.div(({ theme }) => css `
+    display: flex;
+    border-top: 1px solid ${theme.color.background.neutralAltActive};
+    border-bottom: 1px solid ${theme.color.background.neutralAltActive};
+  `);
+const Left = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+`;
+const Right = styled.div `
+  width: 240px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+`;
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const Label = styled.div(({ theme }) => css `
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);
+const Buttons = styled.div `
+  display: flex;
+  padding: 12px;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 8px;
+`;
+const Alert = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    color: ${theme.color.foreground.neutralBaseDisabled};
+    /* Default/Label/12px-Md */
+    font-family: ${theme.fontFamily.ui};
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px; /* 133.333% */
+  `);

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

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

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

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

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

@@ -0,0 +1,43 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from "lexical";
+import { ReactNode } from "react";
+import { ImageProps } from "../insertImageDialog";
+export interface Selection {
+    show: {
+        image: ImageProps | null;
+        text: string;
+    };
+    value: string;
+}
+export interface SheetSelectPayload {
+    selected: string[];
+    selections: Selection[];
+    allowMultipleAnswers: boolean;
+    key?: NodeKey;
+}
+export type SerializedSheetSelectNode = Spread<SheetSelectPayload, SerializedLexicalNode>;
+/**
+ * selections는 Selection타입의 배열로서 객관식 정보를 담고 있습니다.
+ * selected는 선택한 답의 value를 담고 있습니다.(view mode에서만 노출)
+ */
+export declare class SheetSelectNode extends DecoratorNode<ReactNode> {
+    __selections: Selection[];
+    __selected: string[];
+    __allowMultipleAnswers: boolean;
+    isInline(): boolean;
+    static getType(): string;
+    getSelections(): Selection[];
+    getSelected(): string[];
+    getAllowMultipleAnswers(): boolean;
+    setSelections(selections: Selection[]): void;
+    setSelected(selected: string[]): void;
+    setAllowMultipleAnswers(allowMultipleAnswers: boolean): void;
+    static clone(node: SheetSelectNode): SheetSelectNode;
+    constructor(selections: Selection[], selected: string[], allowMultipleAnswers: boolean, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedSheetSelectNode): SheetSelectNode;
+    exportJSON(): SerializedSheetSelectNode;
+    decorate(): ReactNode;
+}
+export declare function $createSheetSelectNode(payload: SheetSelectPayload): SheetSelectNode;
+export declare function $isSheetSelectNode(node: LexicalNode | null | undefined): node is SheetSelectNode;

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,2 @@
+export * from "./SelectComponent";
+export * from "./SheetSelectNode";

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

@@ -0,0 +1,2 @@
+export * from "./SelectComponent";
+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)[];