@team-monolith/cds 1.7.0 → 1.8.0

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormAnswer.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { Controller } from "react-hook-form";
+import Dropdown from "../../../../Dropdown";
+import DropdownItem from "../../../../Dropdown/DropdownItem";
+import Input from "../../../../../components/Input";
+import { AlertFillIcon, DeleteBinLineIcon, ErrorWarningFillIcon, } from "../../../../../icons";
+import SquareButton from "../../../../../components/SquareButton";
+import Tooltip from "../../../../../components/Tooltip";
+export function FormAnswer(props) {
+    const { index, control, onDelete, disabled } = props;
+    const theme = useTheme();
+    const TextTypeDropdown = (_jsx(Controller, { name: `answers.${index}.textType`, control: control, render: ({ field }) => (_jsx(Dropdown, Object.assign({ label: field.value === "normal" ? "일반 텍스트" : "코드 텍스트", size: "xsmall", color: "textNeutral", closeOnItemClick: true, disabled: disabled, buttonCss: css `
+            ${disabled && `color: ${theme.color.foreground.neutralAlt};`}
+            > span {
+              font-weight: 700;
+            }
+          `, menuProps: {
+                anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "center",
+                },
+                transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                },
+            } }, { children: field.value === "code" ? (_jsx(DropdownItem, { index: 0, label: "일반 텍스트", onClick: () => {
+                    field.onChange("normal");
+                } })) : (_jsx(DropdownItem, { index: 0, label: "코드 텍스트", onClick: () => {
+                    field.onChange("code");
+                } })) }))) }));
+    return (_jsx(Controller, { name: `answers.${index}.value`, control: control, rules: {
+            required: "정답을 입력해주세요.",
+        }, render: ({ field: { onChange, value }, fieldState: { invalid, error }, }) => (_jsx(Input, { size: "small", color: invalid ? "activeDanger" : "default", onChange: onChange, disabled: disabled, value: value, hintIcon: invalid ? _jsx(ErrorWarningFillIcon, {}) : undefined, hintText: error === null || error === void 0 ? void 0 : error.message, placeholder: "\uC548\uB155\uD558\uC138\uC694", fullWidth: true, css: css `
+            > div {
+              padding: 4px 12px;
+            }
+          `, startIcon: TextTypeDropdown, endIcon: _jsxs("div", Object.assign({ css: css `
+                display: flex;
+                gap: 4px;
+              ` }, { children: [onDelete && (_jsx(SquareButton, { color: "white", size: "xsmall", icon: _jsx(DeleteBinLineIcon, {}), onClick: onDelete })), disabled && (_jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC785\uB825 \uCE78 \uC124\uC815\uC774 '\uAE00\uC790 \uC218\uB300\uB85C'\uC778 \uACBD\uC6B0", _jsx("br", {}), "\uC815\uB2F5\uC744 \uD558\uB098\uB9CC \uB4F1\uB85D\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4."] }) }, { children: _jsx(SquareButton, { color: "danger", size: "xsmall", icon: _jsx(AlertFillIcon, { color: theme.color.foreground.neutralAlt }), disabled: true }) })))] })) })) }));
+}

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormCharacterCount.d.ts

@@ -0,0 +1,8 @@
+import { Control } from "react-hook-form";
+import { ProblemInputPayload } from "../InputComponent";
+import React from "react";
+export interface FormCharacterCountProps {
+    control: Control<ProblemInputPayload, any>;
+    setMultiAnswerDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function FormCharacterCount(props: FormCharacterCountProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormCharacterCount.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import { SegmentedControlButton, SegmentedControlGroup, } from "../../../../SegmentedControl";
+export function FormCharacterCount(props) {
+    const { control, setMultiAnswerDisabled } = props;
+    return (_jsx(Controller, { name: "showCharacterCount", control: control, render: ({ field: { value, onChange } }) => {
+            return (_jsxs(SegmentedControlGroup, Object.assign({ size: "xsmall", value: value.toString(), onChange: (value) => {
+                    onChange(value === "true");
+                    setMultiAnswerDisabled(value === "true");
+                }, fullWidth: true }, { children: [_jsx(SegmentedControlButton, { value: "false", label: "\uD55C \uCE78\uC73C\uB85C" }), _jsx(SegmentedControlButton, { value: "true", label: "\uAE00\uC790 \uC218\uB300\uB85C" })] })));
+        } }));
+}

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormPlaceholder.d.ts

@@ -0,0 +1,6 @@
+import { Control } from "react-hook-form";
+import { ProblemInputPayload } from "../InputComponent";
+export interface FormPlaceholderProps {
+    control: Control<ProblemInputPayload, any>;
+}
+export declare function FormPlaceholder(props: FormPlaceholderProps): import("react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/FormPlaceholder.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+import Input from "../../../../../components/Input";
+export function FormPlaceholder(props) {
+    const { control } = props;
+    return (_jsx(Controller, { name: "placeholder", control: control, render: ({ field: { value, onChange } }) => {
+            return (_jsx(Input, { size: "small", color: "default", value: value, onChange: onChange, placeholder: "\uC608) \uC5EC\uAE30\uC5D0 \uC785\uB825\uD558\uC138\uC694." }));
+        } }));
+}

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./FormAnswer";
+export * from "./FormCharacterCount";
+export * from "./FormPlaceholder";

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/Form/index.js

@@ -0,0 +1,3 @@
+export * from "./FormAnswer";
+export * from "./FormCharacterCount";
+export * from "./FormPlaceholder";

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.d.ts

@@ -0,0 +1,16 @@
+import { NodeKey, SerializedLexicalNode } from "lexical";
+export interface Answer {
+    textType: "normal" | "code";
+    value: string;
+    destroyed?: boolean;
+}
+export interface ProblemInputPayload {
+    key?: NodeKey;
+    answers: Answer[];
+    showCharacterCount: boolean;
+    placeholder: string;
+}
+export type SerializedProblemInputNode = SerializedLexicalNode & ProblemInputPayload;
+export declare function InputComponent(props: {
+    data: ProblemInputPayload;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/patterns/LexicalEditor/nodes/ProblemInputNode/InputComponent.js

@@ -0,0 +1,170 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
+/** @jsxImportSource @emotion/react */
+import { css, useTheme } from "@emotion/react";
+import { $getSelection } from "lexical";
+import { Suspense, useState } from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import Input from "../../../../components/Input";
+import SquareButton from "../../../../components/SquareButton";
+import { AddFillIcon, AlarmWarningFillIcon, InputMethodLineIcon, QuestionFillIcon, Settings3FillIcon, } from "../../../../icons";
+import styled from "@emotion/styled";
+import shadows from "../../../../foundation/shadows";
+import Button from "../../../../components/Button";
+import Tooltip from "../../../../components/Tooltip";
+import { FormAnswer, FormCharacterCount, FormPlaceholder } from "./Form";
+import useLexicalEditable from "@lexical/react/useLexicalEditable";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createProblemInputNode } from "./ProblemInputNode";
+export function InputComponent(props) {
+    var _a;
+    const theme = useTheme();
+    const { data } = props;
+    const { answers, showCharacterCount, placeholder } = data;
+    const [settingOpen, setSettingOpen] = useState(false);
+    const [multiAnswerDisabled, setMultiAnswerDisabled] = useState(showCharacterCount);
+    const [editor] = useLexicalComposerContext();
+    const isEditable = useLexicalEditable();
+    const { control, handleSubmit, getValues } = useForm({
+        defaultValues: {
+            answers,
+            showCharacterCount,
+            placeholder,
+        },
+    });
+    // TODO: 읽기전용 모드(학생 view)에서 문제 제출 api를 추가해야 합니다.
+    const { fields, append, remove, update } = useFieldArray({
+        control,
+        name: "answers",
+        keyName: "uid",
+    });
+    const onSettingSubmit = (data) => {
+        editor.update(() => {
+            var _a;
+            const newNode = $createProblemInputNode(Object.assign({}, data));
+            const currentNode = (_a = $getSelection()) === null || _a === void 0 ? void 0 : _a.getNodes()[0];
+            currentNode === null || currentNode === void 0 ? void 0 : currentNode.replace(newNode);
+        });
+        setSettingOpen(false);
+    };
+    // TODO: 읽기전용 모드(학생 view)에서 문제 제출 api를 추가 후 수정해야 합니다.
+    const [answerInput, setAnswerInput] = useState("");
+    if (!isEditable) {
+        return (_jsx(Input, { size: "small", placeholder: (_a = getValues("placeholder")) !== null && _a !== void 0 ? _a : "주관식 입력 칸", value: answerInput, onChange: (e) => {
+                setAnswerInput(e.target.value);
+            }, color: "default", css: css `
+          width: 300px;
+        ` }));
+    }
+    return (_jsxs(Suspense, Object.assign({ fallback: null }, { children: [_jsxs("div", Object.assign({ css: css `
+          display: flex;
+          align-items: center;
+          gap: 4px;
+        ` }, { children: [_jsx(Input, { size: "small", placeholder: "주관식 입력 칸", defaultValue: "", color: "default", css: css `
+            width: 300px;
+          ` }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => {
+                            setSettingOpen(true);
+                        } })] })), settingOpen && (_jsxs(SettingForm, Object.assign({ onSubmit: handleSubmit(onSettingSubmit) }, { children: [_jsxs(Title, { children: [_jsx(InputMethodLineIcon, { css: css `
+                width: 12px;
+                height: 12px;
+              ` }), "\uC8FC\uAD00\uC2DD \uC785\uB825 \uCE78"] }), _jsxs(Content, { children: [_jsxs(Left, { children: [_jsxs(FormArea, { children: [_jsx(Label, { children: "\uC815\uB2F5" }), fields
+                                                .map((field, index) => ({
+                                                field,
+                                                index,
+                                            }))
+                                                .filter(({ field }) => !field.destroyed)
+                                                .map(({ field, index }) => (_jsx(FormAnswer, { index: index, control: control, disabled: index !== 0 && multiAnswerDisabled, onDelete: index !== 0
+                                                    ? () => {
+                                                        if (field.value) {
+                                                            update(index, Object.assign(Object.assign({}, field), { destroyed: true }));
+                                                        }
+                                                        else {
+                                                            remove(index);
+                                                        }
+                                                    }
+                                                    : undefined }, field.uid)))] }), _jsx(Button, { color: "grey", size: "small", startIcon: _jsx(AddFillIcon, {}), label: "\uBCF5\uC218 \uC815\uB2F5 \uCD94\uAC00", disabled: multiAnswerDisabled, onClick: () => {
+                                            append({
+                                                textType: "normal",
+                                                value: "",
+                                            });
+                                        } }), _jsxs("div", Object.assign({ css: css `
+                  display: flex;
+                  gap: 4px;
+                ` }, { children: [_jsx(AlarmWarningFillIcon, { color: theme.color.foreground.neutralBaseDisabled, css: css `
+                    width: 14px;
+                    height: 14px;
+                  ` }), _jsxs(Label, { children: ["\uB744\uC5B4\uC4F0\uAE30, \uC54C\uD30C\uBCB3\uC758 \uB300\uC18C\uBB38\uC790 \uAD6C\uBD84\uAE4C\uC9C0 \uC77C\uCE58\uD574\uC57C \uC815\uB2F5\uC73C\uB85C \uCC98\uB9AC\uB429\uB2C8\uB2E4.", _jsx("br", {}), "\uAC00\uB2A5\uD55C \uC815\uB2F5\uC744 \uBAA8\uB450 \uCD94\uAC00\uD574\uC57C \uC6D0\uD65C\uD558\uAC8C \uC790\uB3D9 \uCC44\uC810\uD560 \uC218 \uC788\uC5B4\uC694."] })] }))] }), _jsxs(Right, { children: [_jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC785\uB825 \uCE78", _jsx(Tooltip, Object.assign({ text: _jsxs("span", { children: ["\uC608\uB97C \uB4E4\uC5B4 \uC815\uB2F5\uC774 '\uAE00\uC790 \uC218'\uC774\uACE0", _jsx("br", {}), _jsx("b", { children: "\uAE00\uC790 \uC218\uB300\uB85C" }), " \uC635\uC158\uC744 \uC120\uD0DD\uD588\uB2E4\uBA74", _jsx("br", {}), "\uC785\uB825 \uCE78\uC774 '\u2610\u2610 \u2610' \uCC98\uB7FC \uD45C\uC2DC\uB429\uB2C8\uB2E4."] }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                        width: 12px;
+                        height: 12px;
+                      ` }) }))] }), _jsx(FormCharacterCount, { control: control, setMultiAnswerDisabled: setMultiAnswerDisabled })] }), _jsxs(FormArea, { children: [_jsxs(Label, { children: ["\uC790\uB9AC \uD45C\uC2DC\uC790", _jsx(Tooltip, Object.assign({ text: _jsx("span", { children: "\uC785\uB825 \uCE78\uC5D0 \uAE30\uBCF8\uC73C\uB85C \uB178\uCD9C\uB418\uB294 \uD14D\uC2A4\uD2B8\uC785\uB2C8\uB2E4." }), placement: "top" }, { children: _jsx(QuestionFillIcon, { css: css `
+                        width: 12px;
+                        height: 12px;
+                      ` }) }))] }), _jsx(FormPlaceholder, { control: control })] })] })] }), _jsxs(Buttons, { children: [_jsx(Button, { color: "grey", size: "xsmall", label: "\uB2EB\uAE30", onClick: () => {
+                                    setSettingOpen(false);
+                                } }), _jsx(Button, { color: "primary", size: "xsmall", label: "\uC774\uB300\uB85C \uB123\uAE30", type: "submit" })] })] })))] })));
+}
+const SettingForm = 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 `
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+  flex: 1;
+`;
+const FormArea = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const Right = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  width: 240px;
+  flex-direction: column;
+  padding: 12px;
+  gap: 12px;
+`;
+const Label = styled.div(({ theme }) => css `
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    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;
+`;

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

@@ -0,0 +1,19 @@
+import { DecoratorNode, EditorConfig, LexicalNode, NodeKey } from "lexical";
+import { ReactNode } from "react";
+import { Answer, ProblemInputPayload, SerializedProblemInputNode } from "./InputComponent";
+export declare class ProblemInputNode extends DecoratorNode<ReactNode> {
+    __answers: Answer[];
+    __showCharacterCount: boolean;
+    __placeholder: string;
+    static getType(): string;
+    get data(): ProblemInputPayload;
+    static clone(node: ProblemInputNode): ProblemInputNode;
+    constructor(answers: Answer[], showCharacterCount: boolean, placeholder: string, key?: NodeKey);
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): boolean;
+    static importJSON(serializedNode: SerializedProblemInputNode): ProblemInputNode;
+    exportJSON(): SerializedProblemInputNode;
+    decorate(): ReactNode;
+}
+export declare function $createProblemInputNode({ key, answers, showCharacterCount, placeholder, }: ProblemInputPayload): ProblemInputNode;
+export declare function $isProblemInputNode(node: LexicalNode | null | undefined): node is ProblemInputNode;

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

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { $applyNodeReplacement, DecoratorNode, } from "lexical";
+import { addClassNamesToElement } from "@lexical/utils";
+import { InputComponent, } from "./InputComponent";
+export class ProblemInputNode extends DecoratorNode {
+    static getType() {
+        return "problem-input";
+    }
+    get data() {
+        //fixme: 필요할 때 수정
+        //const self = this.getLatest();
+        return {
+            answers: this.__answers,
+            showCharacterCount: this.__showCharacterCount,
+            placeholder: this.__placeholder,
+        };
+    }
+    static clone(node) {
+        return $createProblemInputNode({
+            key: node.__key,
+            answers: node.__answers,
+            showCharacterCount: node.__showCharacterCount,
+            placeholder: node.__placeholder,
+        });
+    }
+    constructor(answers, showCharacterCount, placeholder, key) {
+        super(key);
+        this.__answers = answers;
+        this.__showCharacterCount = showCharacterCount;
+        this.__placeholder = placeholder;
+    }
+    createDOM(config) {
+        // Define the DOM element here
+        const root = document.createElement("div");
+        addClassNamesToElement(root, config.theme.problemInput);
+        return root;
+    }
+    updateDOM() {
+        return false;
+    }
+    static importJSON(serializedNode) {
+        const node = $createProblemInputNode({
+            key: serializedNode.key,
+            answers: serializedNode.answers,
+            showCharacterCount: serializedNode.showCharacterCount,
+            placeholder: serializedNode.placeholder,
+        });
+        return node;
+    }
+    exportJSON() {
+        return {
+            version: 1,
+            type: "problem-input",
+            answers: this.__answers,
+            showCharacterCount: this.__showCharacterCount,
+            placeholder: this.__placeholder,
+        };
+    }
+    decorate() {
+        return _jsx(InputComponent, { data: this.data });
+    }
+}
+export function $createProblemInputNode({ key, answers, showCharacterCount, placeholder, }) {
+    return $applyNodeReplacement(new ProblemInputNode(answers, showCharacterCount, placeholder, key));
+}
+export function $isProblemInputNode(node) {
+    return node instanceof ProblemInputNode;
+}

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

@@ -0,0 +1,2 @@
+export * from "./ProblemInputNode";
+export * from "./InputComponent";

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

@@ -0,0 +1,2 @@
+export * from "./ProblemInputNode";
+export * from "./InputComponent";

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

@@ -0,0 +1,3 @@
+export * from "./ColoredQuoteNode";
+export * from "./ImageNode";
+export * from "./ProblemInputNode";

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

@@ -0,0 +1,3 @@
+export * from "./ColoredQuoteNode";
+export * from "./ImageNode";
+export * from "./ProblemInputNode";

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

@@ -29,6 +29,7 @@ import styled from "@emotion/styled";
 import { useContextMenuOptions } from "./useContextMenuOptions";
 import { InsertImageDialog } from "../ImagesPlugin/InsertImageDialog";
 import { ZINDEX } from "../../../../utils/zIndex";
+import { useTheme } from "@emotion/react";
 export const COMPONENT_ADDER_MENU_CLASSNAME = "component-adder-menu";
 function isOnMenu(element) {
     return !!element.closest(`.${COMPONENT_ADDER_MENU_CLASSNAME}`);
@@ -48,6 +49,7 @@ function getTextUpToAnchor(selection) {
 }
 export function ComponentAdderPlugin(props) {
     const { anchorElem } = props;
+    const theme = useTheme();
     const [editor] = useLexicalComposerContext();
     const [nodeKey, setNodeKey] = useState(null);
     const menuRef = useRef(null);
@@ -58,7 +60,7 @@ export function ComponentAdderPlugin(props) {
     });
     const [plusOrMenu, setPlusOrMenu] = useState("plus");
     const [options, setOptions] = useState([]);
-    const [open, setOpen] = useState(false);
+    const [imageOpen, setImageOpen] = useState(false);
     const [query, setQuery] = useState("");
     // EditorState의 Selection 을 추적하여
     // Plus 및 Menu 버튼을 누르고 다른 곳을 클릭하면 메뉴를 닫습니다.
@@ -129,11 +131,12 @@ export function ComponentAdderPlugin(props) {
     const getContextMenuOptions = useContextMenuOptions();
     const filteredOptions = options.filter((option) => {
         const regex = new RegExp(query, "i");
-        return (regex.test(option.title) ||
+        return (option.component ||
+            regex.test(option.title) ||
             option.keywords.some((keyword) => regex.test(keyword)));
     });
     const { onDragStart, onDragEnd, targetLineRef } = useDraggableBlockMenu(editor, anchorElem, blockElem, setBlockElem);
-    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: open, activeEditor: editor, onClose: () => setOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
+    return (_jsxs(_Fragment, { children: [_jsx(InsertImageDialog, { open: imageOpen, activeEditor: editor, onClose: () => setImageOpen(false) }), _jsx(LexicalNodeMenuPlugin, { nodeKey: nodeKey, anchorClassName: cssToClassName `
           z-index: ${ZINDEX.DIALOG + 1};
         `, options: filteredOptions, menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => anchorElementRef.current && filteredOptions.length
                     ? ReactDOM.createPortal(_jsx(ComponentPickerMenuList, { options: filteredOptions, selectedIndex: selectedIndex, selectOptionAndCleanUp: selectOptionAndCleanUp, setHighlightedIndex: setHighlightedIndex }), anchorElementRef.current)
@@ -178,7 +181,7 @@ export function ComponentAdderPlugin(props) {
                                 yield promise;
                                 setNodeKey(newNodeKey);
                             }
-                            const baseOptions = getBaseOptions(editor, setOpen);
+                            const baseOptions = getBaseOptions(editor, theme, setImageOpen);
                             setOptions(baseOptions);
                             setPlusOrMenu("plus");
                         }), onMenuClick: () => __awaiter(this, void 0, void 0, function* () {
@@ -196,7 +199,7 @@ export function ComponentAdderPlugin(props) {
                                 // Add a node key to the selection.
                                 nodeSelection.add(newNode.getKey());
                                 $setSelection(nodeSelection);
-                                const contextMenuOptions = getContextMenuOptions(editor, newNode, setOpen);
+                                const contextMenuOptions = getContextMenuOptions(editor, newNode, setImageOpen);
                                 setOptions(contextMenuOptions);
                                 if (nodeKey === null) {
                                     setNodeKey(newNode.getKey());

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

@@ -3,4 +3,4 @@
  */
 import { LexicalEditor, LexicalNode } from "lexical";
 import { ComponentPickerOption } from "../ComponentPickerMenuPlugin";
-export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setOpen: (open: boolean) => void) => ComponentPickerOption[];
+export declare function useContextMenuOptions(): (editor: LexicalEditor, node: LexicalNode, setImageOpen: (open: boolean) => void) => ComponentPickerOption[];