@examind/block-editor 0.1.1 → 0.1.5

package/dist/index.js

@@ -5215,14 +5215,14 @@ function DistractorButton(props) {
   ] });
 }
 
-// src/plugins/VariablesPlugin/TypeaheadVariablesAgentPlugin.tsx
+// src/plugins/VariablesPlugin/TypeaheadVariableAgentPlugin.tsx
 var import_LexicalComposerContext21 = require("@lexical/react/LexicalComposerContext");
 var import_utils6 = require("@lexical/utils");
 var import_lexical23 = require("lexical");
 var import_react38 = require("react");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var TYPEAHEAD_VARIABLES_COMMAND = (0, import_lexical23.createCommand)("TYPEAHEAD_VARIABLES_COMMAND");
-function TypeaheadVariablesAgentPlugin() {
+var TYPEAHEAD_VARIABLE_COMMAND = (0, import_lexical23.createCommand)("TYPEAHEAD_VARIABLE_COMMAND");
+function TypeaheadVariableAgentPlugin() {
   const { hasModule, modulesNumber } = useBlockEditor();
   const [editor] = (0, import_LexicalComposerContext21.useLexicalComposerContext)();
   (0, import_react38.useEffect)(() => {
@@ -5231,7 +5231,7 @@ function TypeaheadVariablesAgentPlugin() {
         editor.registerUpdateListener(({ tags }) => {
           if (!tags.has("history-merge")) {
             editor.dispatchCommand(
-              TYPEAHEAD_VARIABLES_COMMAND,
+              TYPEAHEAD_VARIABLE_COMMAND,
               void 0
             );
           }
@@ -5758,7 +5758,7 @@ function JournalEntryQuestionItemComponent(props) {
                     decoratorNode: JournalEntryQuestionNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(VariableComponentPlugin, {})
               ] }) }) }),
               (!debit || !credit) && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "controls", children: [
@@ -5817,7 +5817,7 @@ function JournalEntryQuestionItemComponent(props) {
                     decoratorNode: JournalEntryQuestionNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(VariableComponentPlugin, {})
               ] }) }) })
             ]
@@ -5854,7 +5854,7 @@ function JournalEntryQuestionItemComponent(props) {
                     decoratorNode: JournalEntryQuestionNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(VariableComponentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(VariableToolbarAgentPlugin, {})
               ] }) }) }),
@@ -6401,7 +6401,7 @@ function QuestionItemComponent(props) {
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_LexicalHistoryPlugin4.HistoryPlugin, { externalHistoryState: historyState }),
                 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TextToolbarAgentPlugin, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(VariableComponentPlugin, {})
               ] }) }) })
             ]
@@ -6435,7 +6435,7 @@ function QuestionItemComponent(props) {
                     decoratorNode: MatchingQuestionNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(VariableComponentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(VariableToolbarAgentPlugin, {})
               ] }) }) }),
@@ -6810,7 +6810,7 @@ function MultipleOptionQuestionItemComponent(props) {
               decoratorNode: MultipleOptionQuestionNode
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TypeaheadVariablesAgentPlugin, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TypeaheadVariableAgentPlugin, {}),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VariableComponentPlugin, {}),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(VariableToolbarAgentPlugin, {})
         ] }) }) }),
@@ -7253,7 +7253,7 @@ function ShortAnswerQuestionComponent(props) {
                     decoratorNode: ShortAnswerQuestionNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(VariableComponentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(VariableToolbarAgentPlugin, {})
               ] }) }) })
@@ -7648,7 +7648,7 @@ function FillInTheBlankQuestionComponent(props) {
                     decoratorNode: FillInTheBlankQuestionNode
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(VariableComponentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(VariableToolbarAgentPlugin, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
@@ -7827,26 +7827,34 @@ function FinancialStatementQuestionComponent(props) {
         ),
         /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { "data-selectable": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("table", { "data-selectable": "true", style: { width: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("thead", { "data-selectable": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("tr", { "data-selectable": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("th", { colSpan: 2, "data-selectable": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_LexicalNestedComposer7.LexicalNestedComposer, { initialEditor: header, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(NestedEditor, { nodeKey, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SettingsPanelNestedAgentPlugin, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                import_LexicalRichTextPlugin7.RichTextPlugin,
-                {
-                  contentEditable: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NestedContentEditable, {}),
-                  ErrorBoundary: import_LexicalErrorBoundary7.LexicalErrorBoundary,
-                  placeholder: null
-                },
-                nodeKey
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-                import_LexicalHistoryPlugin8.HistoryPlugin,
-                {
-                  externalHistoryState: historyState
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TypeaheadVariablesAgentPlugin, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(VariableComponentPlugin, {})
-            ] }) }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("tr", { "data-selectable": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              "td",
+              {
+                className: "financial-statement-question-header",
+                colSpan: 2,
+                "data-selectable": "true",
+                children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_LexicalNestedComposer7.LexicalNestedComposer, { initialEditor: header, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(NestedEditor, { nodeKey, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SettingsPanelNestedAgentPlugin, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    import_LexicalRichTextPlugin7.RichTextPlugin,
+                    {
+                      contentEditable: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(NestedContentEditable, {}),
+                      ErrorBoundary: import_LexicalErrorBoundary7.LexicalErrorBoundary,
+                      placeholder: null
+                    },
+                    nodeKey
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    import_LexicalHistoryPlugin8.HistoryPlugin,
+                    {
+                      externalHistoryState: historyState
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TypeaheadVariableAgentPlugin, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(VariableComponentPlugin, {})
+                ] }) })
+              }
+            ) }),
             columnHeaders.length >= 2 && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("tr", { "data-selectable": "true", children: [
               /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                 "th",
@@ -7934,7 +7942,7 @@ function FinancialStatementQuestionComponent(props) {
                                     externalHistoryState: historyState
                                   }
                                 ),
-                                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TypeaheadVariableAgentPlugin, {}),
                                 /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(VariableComponentPlugin, {})
                               ] })
                             }
@@ -14123,16 +14131,48 @@ var PopupToolbar = (0, import_react86.forwardRef)((props, ref) => {
 
 // src/content/colorDialog/colorConstants.ts
 var textColorList = [
-  { label: "Red", color: "var(--td-editor-text-color-red)" },
-  { label: "Green", color: "var(--td-editor-text-color-green)" },
-  { label: "Blue", color: "var(--td-editor-text-color-blue)" },
-  { label: "Purple", color: "var(--td-editor-text-color-purple)" }
+  {
+    label: "Red",
+    color: "var(--td-editor-text-color-red)",
+    bgColor: "default"
+  },
+  {
+    label: "Green",
+    color: "var(--td-editor-text-color-green)",
+    bgColor: "default"
+  },
+  {
+    label: "Blue",
+    color: "var(--td-editor-text-color-blue)",
+    bgColor: "default"
+  },
+  {
+    label: "Purple",
+    color: "var(--td-editor-text-color-purple)",
+    bgColor: "default"
+  }
 ];
 var bgColorList = [
-  { label: "Red", color: "var(--td-editor-bg-color-red)" },
-  { label: "Green", color: "var(--td-editor-bg-color-green)" },
-  { label: "Blue", color: "var(--td-editor-bg-color-blue)" },
-  { label: "Purple", color: "var(--td-editor-bg-color-purple)" }
+  {
+    label: "Red",
+    bgColor: "var(--td-editor-bg-color-red)",
+    color: "var(--td-editor-text-color-red)"
+  },
+  {
+    label: "Green",
+    bgColor: "var(--td-editor-bg-color-green)",
+    color: "var(--td-editor-text-color-green)"
+  },
+  {
+    label: "Blue",
+    bgColor: "var(--td-editor-bg-color-blue)",
+    color: "var(--td-editor-text-color-blue)"
+  },
+  {
+    label: "Purple",
+    bgColor: "var(--td-editor-bg-color-purple)",
+    color: "var(--td-editor-text-color-purple)"
+  }
 ];
 
 // src/components/feedback/ProgressBar.tsx
@@ -14894,8 +14934,8 @@ function replaceWithVariable(variableName, variableFormat, editor, textToReplace
   );
 }
 
-// src/plugins/VariablesPlugin/renderVariablesMenu.tsx
-function renderVariablesMenu(list, popupRef, highlighterRef, activeEditorRef, textToReplaceTargetRef, onUpdateCb) {
+// src/plugins/VariablesPlugin/renderVariableMenu.tsx
+function renderVariableMenu(list, popupRef, highlighterRef, activeEditorRef, textToReplaceTargetRef, onUpdateCb) {
   return [...list].map((variableName) => {
     return {
       id: variableName,
@@ -14946,15 +14986,52 @@ function useTypeaheadTriggerMatch(trigger, {
   );
 }
 
+// src/utils/visitVariableNodes.ts
+var import_lexical91 = require("lexical");
+function visitVariableNodes(rootNode, cb) {
+  if ($isVariableNode(rootNode)) {
+    cb(rootNode);
+  }
+  if ((0, import_lexical91.$isElementNode)(rootNode)) {
+    const children = rootNode.getChildren();
+    for (const childNode of children) {
+      visitVariableNodes(childNode, cb);
+    }
+  }
+}
+
 // src/plugins/VariablesPlugin/VariablesContext.tsx
+var import_lexical92 = require("lexical");
 var import_react92 = __toESM(require("react"));
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var VariablesContext = import_react92.default.createContext(null);
 function VariablesProvider(props) {
-  const { children, variablesSettings, renameVariable } = props;
+  const { getEditor, getAllNestedEditors } = useBlockEditor();
+  const { children, variablesSettings } = props;
   const [variableList, setVariableList] = (0, import_react92.useState)(
     variablesSettings.list
   );
+  const updateVariablesInEditor = (newName, oldName, editor) => {
+    editor.update(() => {
+      visitVariableNodes((0, import_lexical92.$getRoot)(), (variableNode) => {
+        if (variableNode.__variable === oldName) {
+          variableNode.setVariable(newName);
+        }
+      });
+    });
+  };
+  const renameVariable = (newName, oldName) => {
+    const allNestedEditors = getAllNestedEditors();
+    for (const nestedEditor of allNestedEditors) {
+      updateVariablesInEditor(newName, oldName, nestedEditor);
+    }
+    const editorRef = getEditor();
+    if (editorRef) {
+      updateVariablesInEditor(newName, oldName, editorRef);
+      clearVariableSelection(editorRef, newName);
+      setVariableSelection(editorRef, newName);
+    }
+  };
   (0, import_react92.useEffect)(() => {
     setVariableList(variablesSettings.list);
   }, [variablesSettings]);
@@ -14963,13 +15040,17 @@ function VariablesProvider(props) {
     const newVariableList = [...variableList, name];
     setVariableList(newVariableList);
   };
+  const handleOnRenamed = (newName, oldName) => {
+    renameVariable(newName, oldName);
+    variablesSettings.onUpdated(newName, oldName);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     VariablesContext.Provider,
     {
       value: {
         variableList,
         onCreated: handleOnCreated,
-        onRenameVariable: renameVariable
+        onRenamed: handleOnRenamed
       },
       children
     }
@@ -14986,11 +15067,11 @@ var useVariables = () => {
 };
 
 // src/utils/getSelectionDOMRangeRect.ts
-var import_lexical91 = require("lexical");
+var import_lexical93 = require("lexical");
 function getSelectionDOMRangeRect(editor, leadOffset) {
   const editorWindow = editor._window || window;
   const range = editorWindow.document.createRange();
-  const domSelection = (0, import_lexical91.getDOMSelection)(editorWindow);
+  const domSelection = (0, import_lexical93.getDOMSelection)(editorWindow);
   if (domSelection === null || !domSelection.isCollapsed) {
     return;
   }
@@ -15011,7 +15092,7 @@ function getSelectionDOMRangeRect(editor, leadOffset) {
 }
 
 // src/utils/removeTextInDomSelection.ts
-var import_lexical92 = require("lexical");
+var import_lexical94 = require("lexical");
 function removeText(editorWindow, leadOffset) {
   const domSelection = editorWindow.getSelection();
   if (!domSelection || !domSelection.anchorNode) {
@@ -15036,14 +15117,14 @@ function removeTextInDomSelection(editor, leadOffset, onUpdate) {
   const editorWindow = editor._window || window;
   editor.update(
     () => {
-      const selection = (0, import_lexical92.$getSelection)();
+      const selection = (0, import_lexical94.$getSelection)();
       let selectedNode;
-      if ((0, import_lexical92.$isRangeSelection)(selection)) {
+      if ((0, import_lexical94.$isRangeSelection)(selection)) {
         selectedNode = selection.focus.getNode();
       }
       removeText(editorWindow, leadOffset);
       if (selectedNode) {
-        const selection2 = (0, import_lexical92.$createRangeSelection)();
+        const selection2 = (0, import_lexical94.$createRangeSelection)();
         selection2.anchor.set(
           selectedNode.getKey(),
           leadOffset,
@@ -15054,7 +15135,7 @@ function removeTextInDomSelection(editor, leadOffset, onUpdate) {
           leadOffset,
           "text"
         );
-        (0, import_lexical92.$setSelection)(selection2);
+        (0, import_lexical94.$setSelection)(selection2);
       }
     },
     {
@@ -15063,14 +15144,14 @@ function removeTextInDomSelection(editor, leadOffset, onUpdate) {
   );
 }
 
-// src/plugins/VariablesPlugin/TypeaheadVariablesPlugin.tsx
+// src/plugins/VariablesPlugin/TypeaheadVariablePlugin.tsx
 var import_LexicalComposerContext63 = require("@lexical/react/LexicalComposerContext");
-var import_utils30 = require("@lexical/utils");
-var import_lexical93 = require("lexical");
+var import_utils31 = require("@lexical/utils");
+var import_lexical95 = require("lexical");
 var import_react93 = require("react");
 var import_jsx_runtime114 = require("react/jsx-runtime");
-var CREATE_VARIABLE_FROM_SELECTION_COMMAND = (0, import_lexical93.createCommand)("CREATE_VARIABLE_FROM_SELECTION_COMMAND");
-function TypeaheadVariablesPlugin() {
+var CREATE_VARIABLE_FROM_SELECTION_COMMAND = (0, import_lexical95.createCommand)("CREATE_VARIABLE_FROM_SELECTION_COMMAND");
+function TypeaheadVariablePlugin() {
   const { variableList, onCreated } = useVariables();
   const [editor] = (0, import_LexicalComposerContext63.useLexicalComposerContext)();
   const triggerVariableFn = useTypeaheadTriggerMatch("@", {
@@ -15082,8 +15163,8 @@ function TypeaheadVariablesPlugin() {
   const textToReplaceTargetRef = (0, import_react93.useRef)();
   const handleUpdate = () => {
     activeEditorRef.current?.getEditorState().read(() => {
-      const selection = (0, import_lexical93.$getSelection)();
-      if ((0, import_lexical93.$isRangeSelection)(selection)) {
+      const selection = (0, import_lexical95.$getSelection)();
+      if ((0, import_lexical95.$isRangeSelection)(selection)) {
         if (selection.isCollapsed()) {
           const anchor = selection.anchor;
           const isEmpty = anchor.getNode().getTextContent().trim().length === 0;
@@ -15222,35 +15303,35 @@ function TypeaheadVariablesPlugin() {
     return false;
   };
   (0, import_react93.useEffect)(() => {
-    return (0, import_utils30.mergeRegister)(
+    return (0, import_utils31.mergeRegister)(
       editor.registerCommand(
-        TYPEAHEAD_VARIABLES_COMMAND,
+        TYPEAHEAD_VARIABLE_COMMAND,
         (_payload, activeEditor) => {
           activeEditorRef.current = activeEditor;
           handleUpdate();
           return true;
         },
-        import_lexical93.COMMAND_PRIORITY_HIGH
+        import_lexical95.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical93.KEY_ENTER_COMMAND,
+        import_lexical95.KEY_ENTER_COMMAND,
         execute,
-        import_lexical93.COMMAND_PRIORITY_HIGH
+        import_lexical95.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical93.KEY_ESCAPE_COMMAND,
+        import_lexical95.KEY_ESCAPE_COMMAND,
         hidePopup,
-        import_lexical93.COMMAND_PRIORITY_HIGH
+        import_lexical95.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical93.KEY_ARROW_DOWN_COMMAND,
+        import_lexical95.KEY_ARROW_DOWN_COMMAND,
         handleMenuItemSelect("down"),
-        import_lexical93.COMMAND_PRIORITY_HIGH
+        import_lexical95.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical93.KEY_ARROW_UP_COMMAND,
+        import_lexical95.KEY_ARROW_UP_COMMAND,
         handleMenuItemSelect("up"),
-        import_lexical93.COMMAND_PRIORITY_HIGH
+        import_lexical95.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
         CREATE_VARIABLE_FROM_SELECTION_COMMAND,
@@ -15276,9 +15357,9 @@ function TypeaheadVariablesPlugin() {
               onUpdate: () => {
                 if (newNodeKey) {
                   activeEditor.update(() => {
-                    const newSelection = (0, import_lexical93.$createNodeSelection)();
+                    const newSelection = (0, import_lexical95.$createNodeSelection)();
                     newSelection.add(newNodeKey || "");
-                    (0, import_lexical93.$setSelection)(newSelection);
+                    (0, import_lexical95.$setSelection)(newSelection);
                   });
                 }
               }
@@ -15286,12 +15367,12 @@ function TypeaheadVariablesPlugin() {
           );
           return true;
         },
-        import_lexical93.COMMAND_PRIORITY_HIGH
+        import_lexical95.COMMAND_PRIORITY_HIGH
       )
     );
-  }, [editor]);
+  }, [editor, variableList]);
   const menu = (0, import_react93.useMemo)(() => {
-    return renderVariablesMenu(
+    return renderVariableMenu(
       variableList || [],
       popupRef,
       highlighterRef,
@@ -15410,8 +15491,8 @@ var import_LexicalComposerContext64 = require("@lexical/react/LexicalComposerCon
 var import_rich_text10 = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_table16 = require("@lexical/table");
-var import_utils31 = require("@lexical/utils");
-var import_lexical94 = require("lexical");
+var import_utils32 = require("@lexical/utils");
+var import_lexical96 = require("lexical");
 var import_debounce5 = __toESM(require("lodash-es/debounce"));
 var import_lucide_react19 = require("lucide-react");
 var import_react94 = require("react");
@@ -15440,8 +15521,8 @@ function TextToolbarPlugin() {
   const [selectionType, setSelectionType] = (0, import_react94.useState)("paragraph");
   const formatText = (format) => {
     activeEditorRef.current?.update(() => {
-      const selection = (0, import_lexical94.$getSelection)();
-      if (!(0, import_lexical94.$isRangeSelection)(selection)) {
+      const selection = (0, import_lexical96.$getSelection)();
+      if (!(0, import_lexical96.$isRangeSelection)(selection)) {
         return false;
       }
       selection.formatText(format);
@@ -15449,15 +15530,15 @@ function TextToolbarPlugin() {
   };
   const formatElement = (format) => {
     activeEditorRef.current?.update(() => {
-      const selection = (0, import_lexical94.$getSelection)();
-      if (!(0, import_lexical94.$isRangeSelection)(selection) && !(0, import_lexical94.$isNodeSelection)(selection)) {
+      const selection = (0, import_lexical96.$getSelection)();
+      if (!(0, import_lexical96.$isRangeSelection)(selection) && !(0, import_lexical96.$isNodeSelection)(selection)) {
         return false;
       }
       const nodes = selection.getNodes();
       for (const node of nodes) {
-        const element = (0, import_utils31.$findMatchingParent)(
+        const element = (0, import_utils32.$findMatchingParent)(
           node,
-          (parentNode) => (0, import_lexical94.$isElementNode)(parentNode) && !parentNode.isInline()
+          (parentNode) => (0, import_lexical96.$isElementNode)(parentNode) && !parentNode.isInline()
         );
         if (element !== null) {
           element.setFormat(format);
@@ -15468,7 +15549,7 @@ function TextToolbarPlugin() {
   const formatColor = (newColor) => {
     activeEditorRef.current?.update(
       () => {
-        const selection = (0, import_lexical94.$getSelection)();
+        const selection = (0, import_lexical96.$getSelection)();
         if (selection !== null) {
           (0, import_selection2.$patchStyleText)(selection, {
             color: newColor !== "default" ? newColor : null,
@@ -15488,19 +15569,19 @@ function TextToolbarPlugin() {
       }
     );
   };
-  const formatBackgroundColor = (newColor) => {
+  const formatBackgroundColor = (color, bgColor) => {
     activeEditorRef.current?.update(
       () => {
-        const selection = (0, import_lexical94.$getSelection)();
+        const selection = (0, import_lexical96.$getSelection)();
         if (selection !== null) {
           (0, import_selection2.$patchStyleText)(selection, {
-            color: null,
-            "background-color": newColor !== "default" ? newColor : null,
-            "border-radius": newColor !== "default" ? "calc(var(--sl-border-radius-small) * 0.5)" : null,
-            "outline-width": newColor !== "default" ? "2px" : null,
-            "outline-color": newColor !== "default" ? newColor : null,
-            "outline-style": newColor !== "default" ? "solid" : null,
-            "padding-inline": newColor !== "default" ? "1px" : null
+            color: color !== "default" ? color : null,
+            "background-color": bgColor !== "default" ? bgColor : null,
+            "border-radius": bgColor !== "default" ? "calc(var(--sl-border-radius-small) * 0.5)" : null,
+            "outline-width": bgColor !== "default" ? "2px" : null,
+            "outline-color": bgColor !== "default" ? bgColor : null,
+            "outline-style": bgColor !== "default" ? "solid" : null,
+            "padding-inline": bgColor !== "default" ? "1px" : null
           });
         }
       },
@@ -15514,7 +15595,7 @@ function TextToolbarPlugin() {
   const clearFormatting = () => {
     activeEditorRef.current?.update(
       () => {
-        const selection = (0, import_lexical94.$getSelection)();
+        const selection = (0, import_lexical96.$getSelection)();
         if (selection !== null) {
           (0, import_selection2.$patchStyleText)(selection, {
             "background-color": null,
@@ -15527,10 +15608,10 @@ function TextToolbarPlugin() {
             "font-size": null,
             "font-weight": null
           });
-          if ((0, import_lexical94.$isRangeSelection)(selection)) {
+          if ((0, import_lexical96.$isRangeSelection)(selection)) {
             const selectedNodes = selection.getNodes();
             for (const selectedNode of selectedNodes) {
-              if ((0, import_lexical94.$isTextNode)(selectedNode)) {
+              if ((0, import_lexical96.$isTextNode)(selectedNode)) {
                 if (selectedNode.hasFormat("bold") || selectedNode.hasFormat("italic") || selectedNode.hasFormat("underline") || selectedNode.hasFormat("strikethrough") || selectedNode.hasFormat("subscript") || selectedNode.hasFormat("superscript")) {
                   selectedNode.setFormat(0);
                 }
@@ -15538,7 +15619,7 @@ function TextToolbarPlugin() {
             }
             const newSelection = selection.clone();
             newSelection.format = 0;
-            (0, import_lexical94.$setSelection)(newSelection);
+            (0, import_lexical96.$setSelection)(newSelection);
           }
         }
       },
@@ -15552,7 +15633,7 @@ function TextToolbarPlugin() {
   function createLink() {
     let currentSelection;
     activeEditorRef.current?.getEditorState().read(() => {
-      currentSelection = (0, import_lexical94.$getSelection)()?.clone();
+      currentSelection = (0, import_lexical96.$getSelection)()?.clone();
       if (currentSelection) {
         activeEditorRef.current?.dispatchCommand(
           SHOW_LINK_EDITOR_COMMAND,
@@ -15574,7 +15655,7 @@ function TextToolbarPlugin() {
       } else if (!activeDecoratorRef.current) {
         clearFormatting();
         const selectedNode = selectedNodeRef.current;
-        if ((0, import_lexical94.$isParagraphNode)(selectedNode)) {
+        if ((0, import_lexical96.$isParagraphNode)(selectedNode)) {
           activeEditorRef.current?.getEditorState().read(() => {
             const foundParentTableNode = getParentNodeType(
               selectedNode,
@@ -15686,7 +15767,7 @@ function TextToolbarPlugin() {
     }
   };
   (0, import_react94.useEffect)(() => {
-    return (0, import_utils31.mergeRegister)(
+    return (0, import_utils32.mergeRegister)(
       editor.registerCommand(
         TEXT_TOOLBAR_SELECTION_CHANGE_COMMAND,
         (payload, activeEditor) => {
@@ -15694,18 +15775,18 @@ function TextToolbarPlugin() {
           activeDecoratorRef.current = payload.decoratorNode;
           if (popupToolbarRef.current) {
             activeEditor.getEditorState().read(() => {
-              const selection = (0, import_lexical94.$getSelection)();
+              const selection = (0, import_lexical96.$getSelection)();
               if (!selection || selection.isCollapsed()) {
                 popupToolbarRef.current?.hideToolbar();
                 return false;
               }
-              if (!(0, import_lexical94.$isRangeSelection)(selection)) {
+              if (!(0, import_lexical96.$isRangeSelection)(selection)) {
                 popupToolbarRef.current?.hideToolbar();
                 return false;
               }
               const selectedNodes = selection.getNodes();
               if (selectedNodes.findIndex(
-                (node) => (0, import_lexical94.$isDecoratorNode)(node)
+                (node) => (0, import_lexical96.$isDecoratorNode)(node)
               ) >= 0) {
                 popupToolbarRef.current?.hideToolbar();
                 return false;
@@ -15721,11 +15802,11 @@ function TextToolbarPlugin() {
                 return false;
               }
               const anchorNode = selection.anchor.getNode();
-              let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils31.$findMatchingParent)(
+              let element = anchorNode.getKey() === "root" ? anchorNode : (0, import_utils32.$findMatchingParent)(
                 anchorNode,
                 (e) => {
                   const parent = e.getParent();
-                  return parent !== null && (0, import_lexical94.$isRootOrShadowRoot)(parent);
+                  return parent !== null && (0, import_lexical96.$isRootOrShadowRoot)(parent);
                 }
               );
               selectedNodeRef.current = element;
@@ -15736,7 +15817,7 @@ function TextToolbarPlugin() {
                 setSelectionType("list");
               } else {
                 const type = (0, import_rich_text10.$isHeadingNode)(element) ? element.getTag() : element.getType();
-                if (type === import_lexical94.ParagraphNode.getType()) {
+                if (type === import_lexical96.ParagraphNode.getType()) {
                   setSelectionType("paragraph");
                 } else {
                   setSelectionType("headings");
@@ -15784,7 +15865,7 @@ function TextToolbarPlugin() {
                 "background-color",
                 ""
               );
-              if ((0, import_lexical94.$isElementNode)(element)) {
+              if ((0, import_lexical96.$isElementNode)(element)) {
                 newToolbarState.textAlign = element.getFormatType();
               } else {
                 newToolbarState.textAlign = "left";
@@ -15794,17 +15875,17 @@ function TextToolbarPlugin() {
           }
           return false;
         },
-        import_lexical94.COMMAND_PRIORITY_HIGH
+        import_lexical96.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical94.KEY_ESCAPE_COMMAND,
+        import_lexical96.KEY_ESCAPE_COMMAND,
         () => {
           if (popupToolbarRef.current?.isShown()) {
             popupToolbarRef.current?.hideToolbar();
           }
           return false;
         },
-        import_lexical94.COMMAND_PRIORITY_NORMAL
+        import_lexical96.COMMAND_PRIORITY_NORMAL
       ),
       editor.registerRootListener(
         (rootElement, prevRootElement) => {
@@ -15970,7 +16051,7 @@ function TextToolbarPlugin() {
                   label: "Default",
                   Icon: import_lucide_react19.Circle,
                   onClick: () => {
-                    formatBackgroundColor("default");
+                    formatBackgroundColor("default", "default");
                   }
                 },
                 ...bgColorList.map((simpleColor, index) => {
@@ -15981,7 +16062,10 @@ function TextToolbarPlugin() {
                     color: bgColorList[index].color,
                     bgColor: simpleColor.color,
                     onClick: () => {
-                      formatBackgroundColor(simpleColor.color);
+                      formatBackgroundColor(
+                        simpleColor.color,
+                        simpleColor.bgColor
+                      );
                     }
                   };
                 })
@@ -16095,7 +16179,7 @@ function TextToolbarPlugin() {
             onClick: () => {
               clearFormatting();
               const selectedNode = selectedNodeRef.current;
-              if ((0, import_lexical94.$isParagraphNode)(selectedNode)) {
+              if ((0, import_lexical96.$isParagraphNode)(selectedNode)) {
                 activeEditorRef.current?.getEditorState().read(() => {
                   const foundParentTableNode = getParentNodeType(
                     selectedNode,
@@ -16208,7 +16292,7 @@ function renderCalloutModuleMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
 // src/plugins/TypeaheadMenuPlugin/renderDefaultComponentsMenu.tsx
 var import_list14 = require("@lexical/list");
 var import_rich_text11 = require("@lexical/rich-text");
-var import_lexical95 = require("lexical");
+var import_lexical97 = require("lexical");
 var import_lucide_react21 = require("lucide-react");
 function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
   return [
@@ -16225,7 +16309,7 @@ function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical95.$getNodeByKey)(
+            const targetNode = (0, import_lexical97.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
@@ -16246,7 +16330,7 @@ function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical95.$getNodeByKey)(
+            const targetNode = (0, import_lexical97.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
@@ -16267,7 +16351,7 @@ function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical95.$getNodeByKey)(
+            const targetNode = (0, import_lexical97.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
@@ -16299,11 +16383,11 @@ function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical95.$getNodeByKey)(
+            const targetNode = (0, import_lexical97.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
-              const newParagraphNode = (0, import_lexical95.$createParagraphNode)();
+              const newParagraphNode = (0, import_lexical97.$createParagraphNode)();
               targetNode.replace(newParagraphNode);
               newParagraphNode.select();
               activeEditorRef.current?.dispatchCommand(
@@ -16330,11 +16414,11 @@ function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical95.$getNodeByKey)(
+            const targetNode = (0, import_lexical97.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
-              const newParagraphNode = (0, import_lexical95.$createParagraphNode)();
+              const newParagraphNode = (0, import_lexical97.$createParagraphNode)();
               targetNode.replace(newParagraphNode);
               newParagraphNode.select();
               activeEditorRef.current?.dispatchCommand(
@@ -16361,13 +16445,13 @@ function renderDefaultComponentsMenu(popupRef, targetNodeKeyRef, activeEditorRef
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical95.$getNodeByKey)(
+            const targetNode = (0, import_lexical97.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
               const newNode = $createHorizontalRuleNode();
               targetNode.replace(newNode);
-              const newParagraphNode = (0, import_lexical95.$createParagraphNode)();
+              const newParagraphNode = (0, import_lexical97.$createParagraphNode)();
               newNode.insertAfter(newParagraphNode);
               newParagraphNode.selectStart();
             }
@@ -16405,7 +16489,7 @@ function renderImageModuleMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
 
 // src/plugins/FinancialStatementQuestionPlugin/FinancialStatementQuestionSettings.tsx
 var import_LexicalComposerContext65 = require("@lexical/react/LexicalComposerContext");
-var import_lexical96 = require("lexical");
+var import_lexical98 = require("lexical");
 var import_react95 = require("react");
 
 // src/plugins/FinancialStatementQuestionPlugin/validatePointslnput.ts
@@ -16437,7 +16521,7 @@ function FinancialStatementQuestionSettings(props) {
   (0, import_react95.useEffect)(() => {
     if (nodeKey) {
       editor.getEditorState().read(() => {
-        const fillInTheBlankNode = (0, import_lexical96.$getNodeByKey)(nodeKey);
+        const fillInTheBlankNode = (0, import_lexical98.$getNodeByKey)(nodeKey);
         if (fillInTheBlankNode && $isFinancialStatementQuestionNode(fillInTheBlankNode)) {
           setFoundNode(fillInTheBlankNode);
         }
@@ -16460,7 +16544,7 @@ function FinancialStatementQuestionSettings(props) {
       label: "Points",
       onChange: (value) => {
         editor.update(() => {
-          const targetNode = (0, import_lexical96.$getNodeByKey)(nodeKey);
+          const targetNode = (0, import_lexical98.$getNodeByKey)(nodeKey);
           if (targetNode && $isFinancialStatementQuestionNode(targetNode)) {
             try {
               validatePointsInput6(value);
@@ -16478,11 +16562,11 @@ function FinancialStatementQuestionSettings(props) {
 
 // src/plugins/FinancialStatementQuestionPlugin/FinancialStatementQuestionPlugin.tsx
 var import_LexicalComposerContext66 = require("@lexical/react/LexicalComposerContext");
-var import_utils32 = require("@lexical/utils");
-var import_lexical97 = require("lexical");
+var import_utils33 = require("@lexical/utils");
+var import_lexical99 = require("lexical");
 var import_react96 = require("react");
 var import_jsx_runtime117 = require("react/jsx-runtime");
-var INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND = (0, import_lexical97.createCommand)("INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND");
+var INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND = (0, import_lexical99.createCommand)("INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND");
 function FinancialStatementQuestionPlugin() {
   const {
     registerSettingsPanel,
@@ -16493,7 +16577,7 @@ function FinancialStatementQuestionPlugin() {
   const [editor] = (0, import_LexicalComposerContext66.useLexicalComposerContext)();
   const settingsPanelStickyRef = (0, import_react96.useRef)(null);
   (0, import_react96.useEffect)(() => {
-    return (0, import_utils32.mergeRegister)(
+    return (0, import_utils33.mergeRegister)(
       editor.registerCommand(
         INSERT_FINANCIAL_STATEMENT_QUESTION_COMMAND,
         (payload, activeEditor) => {
@@ -16501,12 +16585,12 @@ function FinancialStatementQuestionPlugin() {
             const { nodeKey, insertionMode } = payload;
             if (activeEditor === editor && nodeKey) {
               activeEditor.update(() => {
-                const targetNode = (0, import_lexical97.$getNodeByKey)(nodeKey);
+                const targetNode = (0, import_lexical99.$getNodeByKey)(nodeKey);
                 if (targetNode) {
-                  const headerEditor = (0, import_lexical97.createEditor)();
+                  const headerEditor = (0, import_lexical99.createEditor)();
                   headerEditor.update(() => {
-                    const root = (0, import_lexical97.$getRoot)();
-                    const paragraph = (0, import_lexical97.$createParagraphNode)();
+                    const root = (0, import_lexical99.$getRoot)();
+                    const paragraph = (0, import_lexical99.$createParagraphNode)();
                     root.append(paragraph);
                   });
                   const financialStatementNode = $createFinancialStatementQuestionNode(
@@ -16523,16 +16607,16 @@ function FinancialStatementQuestionPlugin() {
                   } else if (insertionMode === "before") {
                     targetNode.insertBefore(financialStatementNode);
                   }
-                  const selection = (0, import_lexical97.$createNodeSelection)();
+                  const selection = (0, import_lexical99.$createNodeSelection)();
                   selection.add(financialStatementNode.getKey());
-                  (0, import_lexical97.$setSelection)(selection);
+                  (0, import_lexical99.$setSelection)(selection);
                 }
               });
             }
           }
           return true;
         },
-        import_lexical97.COMMAND_PRIORITY_EDITOR
+        import_lexical99.COMMAND_PRIORITY_EDITOR
       )
     );
   }, [editor]);
@@ -16802,13 +16886,13 @@ function useTypeaheadTriggerMatch2(trigger, {
 var import_LexicalComposerContext67 = require("@lexical/react/LexicalComposerContext");
 var import_rich_text12 = require("@lexical/rich-text");
 var import_table17 = require("@lexical/table");
-var import_utils33 = require("@lexical/utils");
-var import_lexical99 = require("lexical");
+var import_utils34 = require("@lexical/utils");
+var import_lexical101 = require("lexical");
 var import_react98 = require("react");
 
 // src/plugins/TypeaheadMenuPlugin/renderFillInTheBlankMenu.tsx
 var import_list15 = require("@lexical/list");
-var import_lexical98 = require("lexical");
+var import_lexical100 = require("lexical");
 var import_lucide_react25 = require("lucide-react");
 function renderFillInTheBlankMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
   return [
@@ -16831,11 +16915,11 @@ function renderFillInTheBlankMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical98.$getNodeByKey)(
+            const targetNode = (0, import_lexical100.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
-              const newParagraphNode = (0, import_lexical98.$createParagraphNode)();
+              const newParagraphNode = (0, import_lexical100.$createParagraphNode)();
               targetNode.replace(newParagraphNode);
               newParagraphNode.select();
               activeEditorRef.current?.dispatchCommand(
@@ -16862,11 +16946,11 @@ function renderFillInTheBlankMenu(popupRef, targetNodeKeyRef, activeEditorRef) {
       onClick: () => {
         activeEditorRef.current?.update(() => {
           if (targetNodeKeyRef.current) {
-            const targetNode = (0, import_lexical98.$getNodeByKey)(
+            const targetNode = (0, import_lexical100.$getNodeByKey)(
               targetNodeKeyRef.current
             );
             if (targetNode) {
-              const newParagraphNode = (0, import_lexical98.$createParagraphNode)();
+              const newParagraphNode = (0, import_lexical100.$createParagraphNode)();
               targetNode.replace(newParagraphNode);
               newParagraphNode.select();
               activeEditorRef.current?.dispatchCommand(
@@ -16926,8 +17010,8 @@ function TypeaheadMenuPlugin() {
   const [activeDecorator, setActiveDecorator] = (0, import_react98.useState)();
   const handleUpdate = () => {
     activeEditorRef.current?.getEditorState().read(() => {
-      const selection = (0, import_lexical99.$getSelection)();
-      if ((0, import_lexical99.$isRangeSelection)(selection)) {
+      const selection = (0, import_lexical101.$getSelection)();
+      if ((0, import_lexical101.$isRangeSelection)(selection)) {
         if (selection.isCollapsed()) {
           const node = selection.focus.getNode();
           const nodeKey = node.getKey();
@@ -16951,12 +17035,19 @@ function TypeaheadMenuPlugin() {
                   "data-placeholder",
                   `Heading ${level}`
                 );
-              } else if ((0, import_lexical99.$isParagraphNode)(node)) {
+              } else if ((0, import_lexical101.$isParagraphNode)(node)) {
                 if (node.getChildrenSize() === 0) {
-                  dom.setAttribute(
-                    "data-placeholder",
-                    "Type / for commands or @ for variables"
-                  );
+                  if (hasModule("Variables")) {
+                    dom.setAttribute(
+                      "data-placeholder",
+                      "Type / for commands or @ for variables"
+                    );
+                  } else {
+                    dom.setAttribute(
+                      "data-placeholder",
+                      "Type / for commands"
+                    );
+                  }
                 }
               }
               hidePopup();
@@ -16969,7 +17060,7 @@ function TypeaheadMenuPlugin() {
                 const text = anchorNode.getTextContent().slice(0, anchorOffset);
                 if (text) {
                   if (text.startsWith("/")) {
-                    if ((0, import_lexical99.$isParagraphNode)(parentNode)) {
+                    if ((0, import_lexical101.$isParagraphNode)(parentNode)) {
                       const tableCellNode = parentNode.getParent();
                       if (!(0, import_table17.$isTableCellNode)(tableCellNode)) {
                         const match = triggerFn(text, editor);
@@ -17039,7 +17130,7 @@ function TypeaheadMenuPlugin() {
     return false;
   };
   (0, import_react98.useEffect)(() => {
-    return (0, import_utils33.mergeRegister)(
+    return (0, import_utils34.mergeRegister)(
       editor.registerCommand(
         TYPEAHEAD_MENU_COMMAND,
         (payload, activeEditor) => {
@@ -17048,24 +17139,24 @@ function TypeaheadMenuPlugin() {
           handleUpdate();
           return true;
         },
-        import_lexical99.COMMAND_PRIORITY_HIGH
+        import_lexical101.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical99.KEY_ENTER_COMMAND,
+        import_lexical101.KEY_ENTER_COMMAND,
         execute,
-        import_lexical99.COMMAND_PRIORITY_HIGH
+        import_lexical101.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical99.KEY_ESCAPE_COMMAND,
+        import_lexical101.KEY_ESCAPE_COMMAND,
         () => {
           hidePopup();
           editor.update(() => {
             if (targetNodeKeyRef.current) {
-              const foundNode = (0, import_lexical99.$getNodeByKey)(
+              const foundNode = (0, import_lexical101.$getNodeByKey)(
                 targetNodeKeyRef.current
               );
-              if ((0, import_lexical99.$isParagraphNode)(foundNode)) {
-                const newParagraph = (0, import_lexical99.$createParagraphNode)();
+              if ((0, import_lexical101.$isParagraphNode)(foundNode)) {
+                const newParagraph = (0, import_lexical101.$createParagraphNode)();
                 foundNode.replace(newParagraph);
                 newParagraph.selectEnd();
               }
@@ -17073,20 +17164,20 @@ function TypeaheadMenuPlugin() {
           });
           return false;
         },
-        import_lexical99.COMMAND_PRIORITY_HIGH
+        import_lexical101.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical99.KEY_ARROW_DOWN_COMMAND,
+        import_lexical101.KEY_ARROW_DOWN_COMMAND,
         handleMenuItemSelect("down"),
-        import_lexical99.COMMAND_PRIORITY_HIGH
+        import_lexical101.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical99.KEY_ARROW_UP_COMMAND,
+        import_lexical101.KEY_ARROW_UP_COMMAND,
         handleMenuItemSelect("up"),
-        import_lexical99.COMMAND_PRIORITY_HIGH
+        import_lexical101.COMMAND_PRIORITY_HIGH
       ),
       editor.registerCommand(
-        import_lexical99.BLUR_COMMAND,
+        import_lexical101.BLUR_COMMAND,
         (_payload, activeEditor) => {
           activeEditor.getEditorState().read(() => {
             const allPlaceholders = activeEditor.getRootElement()?.querySelectorAll("[data-placeholder]");
@@ -17097,14 +17188,14 @@ function TypeaheadMenuPlugin() {
                 );
               });
             }
-            const rootNode = (0, import_lexical99.$getRoot)();
+            const rootNode = (0, import_lexical101.$getRoot)();
             if (rootNode) {
               const childrenKeys = rootNode.getChildrenKeys();
               if (childrenKeys.length > 0) {
                 const children = rootNode.getChildren();
                 let emptyCounter = 0;
                 for (const childNode of children) {
-                  if ((0, import_lexical99.$isParagraphNode)(childNode) && childNode.getTextContent().trim() === "") {
+                  if ((0, import_lexical101.$isParagraphNode)(childNode) && childNode.getTextContent().trim() === "") {
                     emptyCounter++;
                   }
                 }
@@ -17124,7 +17215,7 @@ function TypeaheadMenuPlugin() {
           });
           return false;
         },
-        import_lexical99.COMMAND_PRIORITY_HIGH
+        import_lexical101.COMMAND_PRIORITY_HIGH
       )
     );
   }, [editor]);
@@ -17416,6 +17507,15 @@ function BlockEditor(props) {
         getNestedEditor: (nestedEditorId) => {
           return nestedEditorsRef.current[nestedEditorId];
         },
+        getAllNestedEditors: () => {
+          const nestedEditors = [];
+          for (const [_, value] of Object.entries(
+            nestedEditorsRef.current
+          )) {
+            nestedEditors.push(value);
+          }
+          return nestedEditors;
+        },
         unregisterNestedEditor: (nestedEditorId) => {
           delete nestedEditorsRef.current[nestedEditorId];
         },
@@ -17485,7 +17585,7 @@ function BlockEditor(props) {
                       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(NodeMousePlugin, {}),
                       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TextToolbarPlugin, {}),
                       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TextToolbarAgentPlugin, {}),
-                      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TypeaheadVariablesAgentPlugin, {}),
+                      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(TypeaheadVariableAgentPlugin, {}),
                       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(VariableComponentPlugin, {}),
                       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(MarkdownPlugin, {})
                     ]
@@ -17573,8 +17673,8 @@ function Image(props) {
 // src/plugins/LinkToolbarPlugin/LinkToolbarPlugin.tsx
 var import_link4 = require("@lexical/link");
 var import_LexicalComposerContext69 = require("@lexical/react/LexicalComposerContext");
-var import_utils34 = require("@lexical/utils");
-var import_lexical100 = require("lexical");
+var import_utils35 = require("@lexical/utils");
+var import_lexical102 = require("lexical");
 var import_debounce6 = __toESM(require("lodash-es/debounce"));
 var import_lucide_react26 = require("lucide-react");
 var import_react104 = require("react");
@@ -17605,9 +17705,9 @@ function LinkToolbarPlugin() {
     [editor]
   );
   (0, import_react104.useEffect)(() => {
-    return (0, import_utils34.mergeRegister)(
+    return (0, import_utils35.mergeRegister)(
       editor.registerCommand(
-        import_lexical100.CLICK_COMMAND,
+        import_lexical102.CLICK_COMMAND,
         (event, activeEditor) => {
           if (popupToolbarRef.current) {
             activeEditorRef.current = activeEditor;
@@ -17616,8 +17716,8 @@ function LinkToolbarPlugin() {
                 popupToolbarRef.current?.hideToolbar();
                 return;
               }
-              const selection = (0, import_lexical100.$getSelection)();
-              if (!(0, import_lexical100.$isRangeSelection)(selection)) {
+              const selection = (0, import_lexical102.$getSelection)();
+              if (!(0, import_lexical102.$isRangeSelection)(selection)) {
                 popupToolbarRef.current?.hideToolbar();
                 return;
               }
@@ -17636,7 +17736,7 @@ function LinkToolbarPlugin() {
                 return;
               }
               const selectionNode = selection.anchor.getNode();
-              if ((0, import_lexical100.$isTextNode)(selectionNode)) {
+              if ((0, import_lexical102.$isTextNode)(selectionNode)) {
                 linkTextNodeRef.current = selectionNode;
                 linkTextNodeOffsetRef.current = selection.focus.offset;
               }
@@ -17666,15 +17766,15 @@ function LinkToolbarPlugin() {
           }
           return false;
         },
-        import_lexical100.COMMAND_PRIORITY_LOW
+        import_lexical102.COMMAND_PRIORITY_LOW
       ),
       editor.registerCommand(
-        import_lexical100.KEY_ESCAPE_COMMAND,
+        import_lexical102.KEY_ESCAPE_COMMAND,
         () => {
           handleClose();
           return false;
         },
-        import_lexical100.COMMAND_PRIORITY_HIGH
+        import_lexical102.COMMAND_PRIORITY_HIGH
       )
     );
   }, [editor]);
@@ -17733,7 +17833,7 @@ function LinkToolbarPlugin() {
                         if (activeEditorRef.current) {
                           activeEditorRef.current.update(() => {
                             if (linkTextNodeRef.current) {
-                              const newSelection = (0, import_lexical100.$createRangeSelection)();
+                              const newSelection = (0, import_lexical102.$createRangeSelection)();
                               newSelection.anchor.set(
                                 linkTextNodeRef.current.getKey(),
                                 linkTextNodeOffsetRef.current || 0,
@@ -17778,7 +17878,7 @@ function LinkToolbarPlugin() {
                         if (activeEditorRef.current) {
                           activeEditorRef.current.update(() => {
                             if (linkTextNodeRef.current) {
-                              const newSelection = (0, import_lexical100.$createRangeSelection)();
+                              const newSelection = (0, import_lexical102.$createRangeSelection)();
                               newSelection.anchor.set(
                                 linkTextNodeRef.current.getKey(),
                                 linkTextNodeOffsetRef.current || 0,
@@ -17791,7 +17891,7 @@ function LinkToolbarPlugin() {
                               );
                               if (newSelection) {
                                 popupToolbarRef.current?.hideToolbar();
-                                (0, import_lexical100.$setSelection)(newSelection);
+                                (0, import_lexical102.$setSelection)(newSelection);
                                 (0, import_link4.$toggleLink)(null);
                               }
                             }
@@ -17884,7 +17984,7 @@ var import_react109 = require("react");
 
 // src/plugins/VariablesPlugin/VariableSettings.tsx
 var import_LexicalComposerContext70 = require("@lexical/react/LexicalComposerContext");
-var import_lexical101 = require("lexical");
+var import_lexical103 = require("lexical");
 var import_lucide_react27 = require("lucide-react");
 var import_react108 = require("react");
 var import_jsx_runtime129 = require("react/jsx-runtime");
@@ -17918,7 +18018,7 @@ function VariableSettings(props) {
     setEditingMode,
     getEditingModeDataCallback
   } = useBlockEditor();
-  const { variableList, onCreated } = useVariables();
+  const { variableList, onRenamed } = useVariables();
   const [editor] = (0, import_LexicalComposerContext70.useLexicalComposerContext)();
   const activeEditorRef = (0, import_react108.useRef)();
   const [currentVariableNode, setCurrentVariableNode] = (0, import_react108.useState)();
@@ -17929,7 +18029,7 @@ function VariableSettings(props) {
       activeEditorRef.current = nestedEditorId ? getNestedEditor(nestedEditorId) || editor : editor;
       if (activeEditorRef.current) {
         activeEditorRef.current.getEditorState().read(() => {
-          const foundNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+          const foundNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
           if ($isVariableNode(foundNode)) {
             setCurrentVariableNode(foundNode);
           }
@@ -17945,7 +18045,7 @@ function VariableSettings(props) {
         onClick: () => {
           activeEditorRef.current?.update(
             () => {
-              const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+              const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
               if ($isVariableNode(foundVariableNode)) {
                 foundVariableNode.setVariable(variableItem);
               }
@@ -17954,7 +18054,7 @@ function VariableSettings(props) {
               onUpdate: () => {
                 setEditingMode({ mode: "edit" });
                 activeEditorRef.current?.update(() => {
-                  const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+                  const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
                   if ($isVariableNode(foundVariableNode)) {
                     const rootEditor = getEditor();
                     const variableName = foundVariableNode.getVariable();
@@ -17990,7 +18090,7 @@ function VariableSettings(props) {
         onClick: () => {
           activeEditorRef.current?.update(
             () => {
-              const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+              const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
               if (!$isVariableNode(foundVariableNode)) return;
               if (typeItem === "number" && !foundVariableNode.getVariableFormat()) {
                 foundVariableNode.setVariableFormat(
@@ -18003,7 +18103,7 @@ function VariableSettings(props) {
             {
               onUpdate: () => {
                 activeEditorRef.current?.getEditorState().read(() => {
-                  const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+                  const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
                   if ($isVariableNode(foundVariableNode)) {
                     setCurrentVariableNode(foundVariableNode);
                   }
@@ -18024,7 +18124,7 @@ function VariableSettings(props) {
         onClick: () => {
           activeEditorRef.current?.update(
             () => {
-              const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+              const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
               if ($isVariableNode(foundVariableNode)) {
                 foundVariableNode.setVariableFormat(formatItem);
               }
@@ -18032,7 +18132,7 @@ function VariableSettings(props) {
             {
               onUpdate: () => {
                 activeEditorRef.current?.getEditorState().read(() => {
-                  const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+                  const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
                   if ($isVariableNode(foundVariableNode)) {
                     setCurrentVariableNode(foundVariableNode);
                   }
@@ -18050,35 +18150,56 @@ function VariableSettings(props) {
       const foundVariable = variableList.find(
         (v) => v === variableNameInputRef.current?.getValue()
       );
+      let prevVariableName = void 0;
       activeEditorRef.current?.update(
         () => {
-          const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+          const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
           if ($isVariableNode(foundVariableNode)) {
+            prevVariableName = foundVariableNode.getVariable();
             foundVariableNode.setVariable(newVariableName);
           }
         },
         {
           onUpdate: () => {
-            if (!foundVariable) {
-              onCreated(newVariableName.toString());
+            if (!foundVariable && prevVariableName) {
+              onRenamed(newVariableName.toString(), prevVariableName);
+              setTimeout(() => {
+                activeEditorRef.current?.getEditorState().read(() => {
+                  setEditingMode({ mode: "edit" });
+                  const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
+                  if ($isVariableNode(foundVariableNode)) {
+                    const rootEditor = getEditor();
+                    clearVariableSelection(
+                      rootEditor || editor,
+                      newVariableName
+                    );
+                    setVariableSelection(
+                      rootEditor || editor,
+                      newVariableName
+                    );
+                    setCurrentVariableNode(foundVariableNode);
+                  }
+                });
+              }, 300);
+            } else {
+              activeEditorRef.current?.getEditorState().read(() => {
+                setEditingMode({ mode: "edit" });
+                const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
+                if ($isVariableNode(foundVariableNode)) {
+                  const rootEditor = getEditor();
+                  const variableName = foundVariableNode.getVariable();
+                  clearVariableSelection(
+                    rootEditor || editor,
+                    variableName
+                  );
+                  setVariableSelection(
+                    rootEditor || editor,
+                    variableName
+                  );
+                  setCurrentVariableNode(foundVariableNode);
+                }
+              });
             }
-            activeEditorRef.current?.getEditorState().read(() => {
-              setEditingMode({ mode: "edit" });
-              const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
-              if ($isVariableNode(foundVariableNode)) {
-                const rootEditor = getEditor();
-                const variableName = foundVariableNode.getVariable();
-                clearVariableSelection(
-                  rootEditor || editor,
-                  variableName
-                );
-                setVariableSelection(
-                  rootEditor || editor,
-                  variableName
-                );
-                setCurrentVariableNode(foundVariableNode);
-              }
-            });
             setSettingsEditingMode(false);
           }
         }
@@ -18209,9 +18330,9 @@ function VariableSettings(props) {
           let parentNodeKey;
           activeEditorRef.current?.update(
             () => {
-              const foundVariableNode = (0, import_lexical101.$getNodeByKey)(nodeKey);
+              const foundVariableNode = (0, import_lexical103.$getNodeByKey)(nodeKey);
               if ($isVariableNode(foundVariableNode)) {
-                const textNode = (0, import_lexical101.$createTextNode)(
+                const textNode = (0, import_lexical103.$createTextNode)(
                   foundVariableNode.getVariable()
                 );
                 foundVariableNode.replace(textNode);
@@ -18224,7 +18345,7 @@ function VariableSettings(props) {
                   activeEditorRef.current?.update(() => {
                     if (parentNodeKey) {
                       activeEditorRef.current?.focus();
-                      const foundNode = (0, import_lexical101.$getNodeByKey)(parentNodeKey);
+                      const foundNode = (0, import_lexical103.$getNodeByKey)(parentNodeKey);
                       foundNode?.selectStart();
                     }
                   });
@@ -18286,8 +18407,8 @@ function VariableSettingsPlugin() {
 
 // src/plugins/VariablesPlugin/VariableToolbarPlugin.tsx
 var import_LexicalComposerContext71 = require("@lexical/react/LexicalComposerContext");
-var import_utils36 = require("@lexical/utils");
-var import_lexical102 = require("lexical");
+var import_utils37 = require("@lexical/utils");
+var import_lexical104 = require("lexical");
 var import_debounce7 = __toESM(require("lodash-es/debounce"));
 var import_lucide_react28 = require("lucide-react");
 var import_react110 = require("react");
@@ -18304,7 +18425,7 @@ function VariableToolbarPlugin() {
   });
   function formatVariable(format) {
     activeEditorRef.current?.update(() => {
-      const foundNode = (0, import_lexical102.$getNodeByKey)(
+      const foundNode = (0, import_lexical104.$getNodeByKey)(
         selectedNodeRef.current?.getKey() || ""
       );
       if ($isVariableNode(foundNode)) {
@@ -18401,16 +18522,16 @@ function VariableToolbarPlugin() {
     [activeEditorRef.current]
   );
   (0, import_react110.useEffect)(() => {
-    return (0, import_utils36.mergeRegister)(
+    return (0, import_utils37.mergeRegister)(
       editor.registerCommand(
         VARIABLE_TOOLBAR_SELECTION_CHANGE_COMMAND,
         (_, activeEditor) => {
           activeEditorRef.current = activeEditor;
           selectedNodeRef.current = void 0;
           activeEditor.getEditorState().read(() => {
-            const selection = (0, import_lexical102.$getSelection)();
+            const selection = (0, import_lexical104.$getSelection)();
             if (selection) {
-              if ((0, import_lexical102.$isNodeSelection)(selection)) {
+              if ((0, import_lexical104.$isNodeSelection)(selection)) {
                 const nodes = selection.extract();
                 const focusedNode = nodes[0];
                 if ($isVariableNode(focusedNode)) {
@@ -18427,7 +18548,7 @@ function VariableToolbarPlugin() {
           });
           return false;
         },
-        import_lexical102.COMMAND_PRIORITY_NORMAL
+        import_lexical104.COMMAND_PRIORITY_NORMAL
       ),
       editor.registerRootListener(
         (rootElement, prevRootElement) => {
@@ -18487,84 +18608,29 @@ function VariableToolbarPlugin() {
   return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(PopupToolbar, { ref: popupToolbarRef, menu: menuItems });
 }
 
-// src/utils/replaceVariablesInEditorState.ts
-function replaceVariablesInEditorState(node, variablesMap) {
-  if (node.type === VariableNode.getType()) {
-    const foundPrevVariable = node.variableName ? variablesMap[node.variableName] : void 0;
-    if (foundPrevVariable) {
-      node.text = foundPrevVariable;
-      node.variableName = foundPrevVariable;
-    }
-  }
-  if (node.children && node.children.length > 0) {
-    node.children.forEach((child) => {
-      replaceVariablesInEditorState(child, variablesMap);
-    });
-  }
-}
-
 // src/modules/Variables.tsx
 var import_react111 = require("react");
 var import_jsx_runtime132 = require("react/jsx-runtime");
-var Variables = (0, import_react111.forwardRef)(
-  (props, ref) => {
-    const { variablesSettings } = props;
-    const {
-      getEditor,
-      onChange,
-      registerModule,
-      setEditingModeDataCallback
-    } = useBlockEditor();
-    const handleRenameVariable = (prevName, newName) => {
-      const editorRef = getEditor();
-      if (editorRef) {
-        const editorState = editorRef.getEditorState().toJSON();
-        if (editorState) {
-          replaceVariablesInEditorState(editorState.root, {
-            [prevName]: newName
-          });
-          const parsedEditorState = editorRef.parseEditorState(editorState);
-          if (parsedEditorState) {
-            editorRef.setEditorState(parsedEditorState, {
-              tag: "new_state"
-            });
-            if (onChange) {
-              onChange(editorState);
-            }
-          }
-        }
-      }
-    };
-    (0, import_react111.useImperativeHandle)(ref, () => {
+function Variables(props) {
+  const { variablesSettings } = props;
+  const { registerModule, setEditingModeDataCallback } = useBlockEditor();
+  (0, import_react111.useEffect)(() => {
+    registerModule("Variables");
+  }, []);
+  (0, import_react111.useEffect)(() => {
+    setEditingModeDataCallback(() => {
       return {
-        renameVariable: handleRenameVariable
+        variableValues: variablesSettings.getVariableValues()
       };
     });
-    (0, import_react111.useEffect)(() => {
-      registerModule("Variables");
-    }, []);
-    (0, import_react111.useEffect)(() => {
-      setEditingModeDataCallback(() => {
-        return {
-          variableValues: variablesSettings.getVariableValues()
-        };
-      });
-    }, [variablesSettings, setEditingModeDataCallback]);
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
-      VariablesProvider,
-      {
-        variablesSettings,
-        renameVariable: handleRenameVariable,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeaheadVariablesPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VariableSettingsPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VariableToolbarPlugin, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VariableToolbarAgentPlugin, {})
-        ]
-      }
-    );
-  }
-);
+  }, [variablesSettings, setEditingModeDataCallback]);
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(VariablesProvider, { variablesSettings, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeaheadVariablePlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VariableSettingsPlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VariableToolbarPlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(VariableToolbarAgentPlugin, {})
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BlockEditor,