@examind/block-editor 0.1.1 → 0.1.5

package/dist/index.mjs

@@ -5329,14 +5329,14 @@ function DistractorButton(props) {
   ] });
 }
 
-// src/plugins/VariablesPlugin/TypeaheadVariablesAgentPlugin.tsx
+// src/plugins/VariablesPlugin/TypeaheadVariableAgentPlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext21 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister6 } from "@lexical/utils";
 import { createCommand as createCommand6 } from "lexical";
 import { useEffect as useEffect30 } from "react";
 import { Fragment as Fragment20, jsx as jsx49 } from "react/jsx-runtime";
-var TYPEAHEAD_VARIABLES_COMMAND = createCommand6("TYPEAHEAD_VARIABLES_COMMAND");
-function TypeaheadVariablesAgentPlugin() {
+var TYPEAHEAD_VARIABLE_COMMAND = createCommand6("TYPEAHEAD_VARIABLE_COMMAND");
+function TypeaheadVariableAgentPlugin() {
   const { hasModule, modulesNumber } = useBlockEditor();
   const [editor] = useLexicalComposerContext21();
   useEffect30(() => {
@@ -5345,7 +5345,7 @@ function TypeaheadVariablesAgentPlugin() {
         editor.registerUpdateListener(({ tags }) => {
           if (!tags.has("history-merge")) {
             editor.dispatchCommand(
-              TYPEAHEAD_VARIABLES_COMMAND,
+              TYPEAHEAD_VARIABLE_COMMAND,
               void 0
             );
           }
@@ -5892,7 +5892,7 @@ function JournalEntryQuestionItemComponent(props) {
                     decoratorNode: JournalEntryQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx54(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx54(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx54(VariableComponentPlugin, {})
               ] }) }) }),
               (!debit || !credit) && /* @__PURE__ */ jsxs17("div", { className: "controls", children: [
@@ -5951,7 +5951,7 @@ function JournalEntryQuestionItemComponent(props) {
                     decoratorNode: JournalEntryQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx54(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx54(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx54(VariableComponentPlugin, {})
               ] }) }) })
             ]
@@ -5988,7 +5988,7 @@ function JournalEntryQuestionItemComponent(props) {
                     decoratorNode: JournalEntryQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx54(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx54(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx54(VariableComponentPlugin, {}),
                 /* @__PURE__ */ jsx54(VariableToolbarAgentPlugin, {})
               ] }) }) }),
@@ -6560,7 +6560,7 @@ function QuestionItemComponent(props) {
                 ),
                 /* @__PURE__ */ jsx58(HistoryPlugin3, { externalHistoryState: historyState }),
                 /* @__PURE__ */ jsx58(TextToolbarAgentPlugin, {}),
-                /* @__PURE__ */ jsx58(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx58(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx58(VariableComponentPlugin, {})
               ] }) }) })
             ]
@@ -6594,7 +6594,7 @@ function QuestionItemComponent(props) {
                     decoratorNode: MatchingQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx58(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx58(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx58(VariableComponentPlugin, {}),
                 /* @__PURE__ */ jsx58(VariableToolbarAgentPlugin, {})
               ] }) }) }),
@@ -6982,7 +6982,7 @@ function MultipleOptionQuestionItemComponent(props) {
               decoratorNode: MultipleOptionQuestionNode
             }
           ),
-          /* @__PURE__ */ jsx61(TypeaheadVariablesAgentPlugin, {}),
+          /* @__PURE__ */ jsx61(TypeaheadVariableAgentPlugin, {}),
           /* @__PURE__ */ jsx61(VariableComponentPlugin, {}),
           /* @__PURE__ */ jsx61(VariableToolbarAgentPlugin, {})
         ] }) }) }),
@@ -7435,7 +7435,7 @@ function ShortAnswerQuestionComponent(props) {
                     decoratorNode: ShortAnswerQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx64(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx64(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx64(VariableComponentPlugin, {}),
                 /* @__PURE__ */ jsx64(VariableToolbarAgentPlugin, {})
               ] }) }) })
@@ -7854,7 +7854,7 @@ function FillInTheBlankQuestionComponent(props) {
                     decoratorNode: FillInTheBlankQuestionNode
                   }
                 ),
-                /* @__PURE__ */ jsx69(TypeaheadVariablesAgentPlugin, {}),
+                /* @__PURE__ */ jsx69(TypeaheadVariableAgentPlugin, {}),
                 /* @__PURE__ */ jsx69(VariableComponentPlugin, {}),
                 /* @__PURE__ */ jsx69(VariableToolbarAgentPlugin, {}),
                 /* @__PURE__ */ jsx69(
@@ -8043,26 +8043,34 @@ function FinancialStatementQuestionComponent(props) {
         ),
         /* @__PURE__ */ jsx71("div", { "data-selectable": "true", children: /* @__PURE__ */ jsxs26("table", { "data-selectable": "true", style: { width: "100%" }, children: [
           /* @__PURE__ */ jsxs26("thead", { "data-selectable": "true", children: [
-            /* @__PURE__ */ jsx71("tr", { "data-selectable": "true", children: /* @__PURE__ */ jsx71("th", { colSpan: 2, "data-selectable": "true", children: /* @__PURE__ */ jsx71(LexicalNestedComposer7, { initialEditor: header, children: /* @__PURE__ */ jsxs26(NestedEditor, { nodeKey, children: [
-              /* @__PURE__ */ jsx71(SettingsPanelNestedAgentPlugin, {}),
-              /* @__PURE__ */ jsx71(
-                RichTextPlugin7,
-                {
-                  contentEditable: /* @__PURE__ */ jsx71(NestedContentEditable, {}),
-                  ErrorBoundary: LexicalErrorBoundary7,
-                  placeholder: null
-                },
-                nodeKey
-              ),
-              /* @__PURE__ */ jsx71(
-                HistoryPlugin7,
-                {
-                  externalHistoryState: historyState
-                }
-              ),
-              /* @__PURE__ */ jsx71(TypeaheadVariablesAgentPlugin, {}),
-              /* @__PURE__ */ jsx71(VariableComponentPlugin, {})
-            ] }) }) }) }),
+            /* @__PURE__ */ jsx71("tr", { "data-selectable": "true", children: /* @__PURE__ */ jsx71(
+              "td",
+              {
+                className: "financial-statement-question-header",
+                colSpan: 2,
+                "data-selectable": "true",
+                children: /* @__PURE__ */ jsx71(LexicalNestedComposer7, { initialEditor: header, children: /* @__PURE__ */ jsxs26(NestedEditor, { nodeKey, children: [
+                  /* @__PURE__ */ jsx71(SettingsPanelNestedAgentPlugin, {}),
+                  /* @__PURE__ */ jsx71(
+                    RichTextPlugin7,
+                    {
+                      contentEditable: /* @__PURE__ */ jsx71(NestedContentEditable, {}),
+                      ErrorBoundary: LexicalErrorBoundary7,
+                      placeholder: null
+                    },
+                    nodeKey
+                  ),
+                  /* @__PURE__ */ jsx71(
+                    HistoryPlugin7,
+                    {
+                      externalHistoryState: historyState
+                    }
+                  ),
+                  /* @__PURE__ */ jsx71(TypeaheadVariableAgentPlugin, {}),
+                  /* @__PURE__ */ jsx71(VariableComponentPlugin, {})
+                ] }) })
+              }
+            ) }),
             columnHeaders.length >= 2 && /* @__PURE__ */ jsxs26("tr", { "data-selectable": "true", children: [
               /* @__PURE__ */ jsx71(
                 "th",
@@ -8150,7 +8158,7 @@ function FinancialStatementQuestionComponent(props) {
                                     externalHistoryState: historyState
                                   }
                                 ),
-                                /* @__PURE__ */ jsx71(TypeaheadVariablesAgentPlugin, {}),
+                                /* @__PURE__ */ jsx71(TypeaheadVariableAgentPlugin, {}),
                                 /* @__PURE__ */ jsx71(VariableComponentPlugin, {})
                               ] })
                             }
@@ -14589,16 +14597,48 @@ var PopupToolbar = forwardRef12((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
@@ -15386,8 +15426,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,
@@ -15438,7 +15478,22 @@ function useTypeaheadTriggerMatch(trigger, {
   );
 }
 
+// src/utils/visitVariableNodes.ts
+import { $isElementNode as $isElementNode4 } from "lexical";
+function visitVariableNodes(rootNode, cb) {
+  if ($isVariableNode(rootNode)) {
+    cb(rootNode);
+  }
+  if ($isElementNode4(rootNode)) {
+    const children = rootNode.getChildren();
+    for (const childNode of children) {
+      visitVariableNodes(childNode, cb);
+    }
+  }
+}
+
 // src/plugins/VariablesPlugin/VariablesContext.tsx
+import { $getRoot as $getRoot22 } from "lexical";
 import React20, {
   useContext as useContext4,
   useEffect as useEffect75,
@@ -15447,10 +15502,32 @@ import React20, {
 import { jsx as jsx113 } from "react/jsx-runtime";
 var VariablesContext = React20.createContext(null);
 function VariablesProvider(props) {
-  const { children, variablesSettings, renameVariable } = props;
+  const { getEditor, getAllNestedEditors } = useBlockEditor();
+  const { children, variablesSettings } = props;
   const [variableList, setVariableList] = useState15(
     variablesSettings.list
   );
+  const updateVariablesInEditor = (newName, oldName, editor) => {
+    editor.update(() => {
+      visitVariableNodes($getRoot22(), (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);
+    }
+  };
   useEffect75(() => {
     setVariableList(variablesSettings.list);
   }, [variablesSettings]);
@@ -15459,13 +15536,17 @@ function VariablesProvider(props) {
     const newVariableList = [...variableList, name];
     setVariableList(newVariableList);
   };
+  const handleOnRenamed = (newName, oldName) => {
+    renameVariable(newName, oldName);
+    variablesSettings.onUpdated(newName, oldName);
+  };
   return /* @__PURE__ */ jsx113(
     VariablesContext.Provider,
     {
       value: {
         variableList,
         onCreated: handleOnCreated,
-        onRenameVariable: renameVariable
+        onRenamed: handleOnRenamed
       },
       children
     }
@@ -15564,7 +15645,7 @@ function removeTextInDomSelection(editor, leadOffset, onUpdate) {
   );
 }
 
-// src/plugins/VariablesPlugin/TypeaheadVariablesPlugin.tsx
+// src/plugins/VariablesPlugin/TypeaheadVariablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext63 } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister as mergeRegister25 } from "@lexical/utils";
 import {
@@ -15582,7 +15663,7 @@ import {
 import { useEffect as useEffect76, useMemo as useMemo12, useRef as useRef52 } from "react";
 import { Fragment as Fragment46, jsx as jsx114, jsxs as jsxs42 } from "react/jsx-runtime";
 var CREATE_VARIABLE_FROM_SELECTION_COMMAND = createCommand20("CREATE_VARIABLE_FROM_SELECTION_COMMAND");
-function TypeaheadVariablesPlugin() {
+function TypeaheadVariablePlugin() {
   const { variableList, onCreated } = useVariables();
   const [editor] = useLexicalComposerContext63();
   const triggerVariableFn = useTypeaheadTriggerMatch("@", {
@@ -15736,7 +15817,7 @@ function TypeaheadVariablesPlugin() {
   useEffect76(() => {
     return mergeRegister25(
       editor.registerCommand(
-        TYPEAHEAD_VARIABLES_COMMAND,
+        TYPEAHEAD_VARIABLE_COMMAND,
         (_payload, activeEditor) => {
           activeEditorRef.current = activeEditor;
           handleUpdate();
@@ -15801,9 +15882,9 @@ function TypeaheadVariablesPlugin() {
         COMMAND_PRIORITY_HIGH4
       )
     );
-  }, [editor]);
+  }, [editor, variableList]);
   const menu = useMemo12(() => {
-    return renderVariablesMenu(
+    return renderVariableMenu(
       variableList || [],
       popupRef,
       highlighterRef,
@@ -15933,7 +16014,7 @@ import { $findMatchingParent as $findMatchingParent2, mergeRegister as mergeRegi
 import {
   $getSelection as $getSelection14,
   $isDecoratorNode as $isDecoratorNode2,
-  $isElementNode as $isElementNode4,
+  $isElementNode as $isElementNode5,
   $isNodeSelection as $isNodeSelection5,
   $isParagraphNode as $isParagraphNode6,
   $isRangeSelection as $isRangeSelection9,
@@ -16014,7 +16095,7 @@ function TextToolbarPlugin() {
       for (const node of nodes) {
         const element = $findMatchingParent2(
           node,
-          (parentNode) => $isElementNode4(parentNode) && !parentNode.isInline()
+          (parentNode) => $isElementNode5(parentNode) && !parentNode.isInline()
         );
         if (element !== null) {
           element.setFormat(format);
@@ -16045,19 +16126,19 @@ function TextToolbarPlugin() {
       }
     );
   };
-  const formatBackgroundColor = (newColor) => {
+  const formatBackgroundColor = (color, bgColor) => {
     activeEditorRef.current?.update(
       () => {
         const selection = $getSelection14();
         if (selection !== null) {
           $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
           });
         }
       },
@@ -16341,7 +16422,7 @@ function TextToolbarPlugin() {
                 "background-color",
                 ""
               );
-              if ($isElementNode4(element)) {
+              if ($isElementNode5(element)) {
                 newToolbarState.textAlign = element.getFormatType();
               } else {
                 newToolbarState.textAlign = "left";
@@ -16527,7 +16608,7 @@ function TextToolbarPlugin() {
                   label: "Default",
                   Icon: Circle,
                   onClick: () => {
-                    formatBackgroundColor("default");
+                    formatBackgroundColor("default", "default");
                   }
                 },
                 ...bgColorList.map((simpleColor, index) => {
@@ -16538,7 +16619,10 @@ function TextToolbarPlugin() {
                     color: bgColorList[index].color,
                     bgColor: simpleColor.color,
                     onClick: () => {
-                      formatBackgroundColor(simpleColor.color);
+                      formatBackgroundColor(
+                        simpleColor.color,
+                        simpleColor.bgColor
+                      );
                     }
                   };
                 })
@@ -17053,7 +17137,7 @@ import {
   $createNodeSelection as $createNodeSelection20,
   $createParagraphNode as $createParagraphNode23,
   $getNodeByKey as $getNodeByKey55,
-  $getRoot as $getRoot22,
+  $getRoot as $getRoot23,
   $setSelection as $setSelection23,
   COMMAND_PRIORITY_EDITOR as COMMAND_PRIORITY_EDITOR16,
   createCommand as createCommand21,
@@ -17084,7 +17168,7 @@ function FinancialStatementQuestionPlugin() {
                 if (targetNode) {
                   const headerEditor = createEditor9();
                   headerEditor.update(() => {
-                    const root = $getRoot22();
+                    const root = $getRoot23();
                     const paragraph = $createParagraphNode23();
                     root.append(paragraph);
                   });
@@ -17392,7 +17476,7 @@ import { mergeRegister as mergeRegister28 } from "@lexical/utils";
 import {
   $createParagraphNode as $createParagraphNode25,
   $getNodeByKey as $getNodeByKey57,
-  $getRoot as $getRoot23,
+  $getRoot as $getRoot24,
   $getSelection as $getSelection15,
   $isParagraphNode as $isParagraphNode7,
   $isRangeSelection as $isRangeSelection10,
@@ -17558,10 +17642,17 @@ function TypeaheadMenuPlugin() {
                 );
               } else if ($isParagraphNode7(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();
@@ -17702,7 +17793,7 @@ function TypeaheadMenuPlugin() {
                 );
               });
             }
-            const rootNode = $getRoot23();
+            const rootNode = $getRoot24();
             if (rootNode) {
               const childrenKeys = rootNode.getChildrenKeys();
               if (childrenKeys.length > 0) {
@@ -18033,6 +18124,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];
         },
@@ -18102,7 +18202,7 @@ function BlockEditor(props) {
                       /* @__PURE__ */ jsx120(NodeMousePlugin, {}),
                       /* @__PURE__ */ jsx120(TextToolbarPlugin, {}),
                       /* @__PURE__ */ jsx120(TextToolbarAgentPlugin, {}),
-                      /* @__PURE__ */ jsx120(TypeaheadVariablesAgentPlugin, {}),
+                      /* @__PURE__ */ jsx120(TypeaheadVariableAgentPlugin, {}),
                       /* @__PURE__ */ jsx120(VariableComponentPlugin, {}),
                       /* @__PURE__ */ jsx120(MarkdownPlugin, {})
                     ]
@@ -18553,7 +18653,7 @@ function VariableSettings(props) {
     setEditingMode,
     getEditingModeDataCallback
   } = useBlockEditor();
-  const { variableList, onCreated } = useVariables();
+  const { variableList, onRenamed } = useVariables();
   const [editor] = useLexicalComposerContext70();
   const activeEditorRef = useRef60();
   const [currentVariableNode, setCurrentVariableNode] = useState22();
@@ -18685,35 +18785,56 @@ function VariableSettings(props) {
       const foundVariable = variableList.find(
         (v) => v === variableNameInputRef.current?.getValue()
       );
+      let prevVariableName = void 0;
       activeEditorRef.current?.update(
         () => {
           const foundVariableNode = $getNodeByKey58(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 = $getNodeByKey58(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 = $getNodeByKey58(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 = $getNodeByKey58(nodeKey);
-              if ($isVariableNode(foundVariableNode)) {
-                const rootEditor = getEditor();
-                const variableName = foundVariableNode.getVariable();
-                clearVariableSelection(
-                  rootEditor || editor,
-                  variableName
-                );
-                setVariableSelection(
-                  rootEditor || editor,
-                  variableName
-                );
-                setCurrentVariableNode(foundVariableNode);
-              }
-            });
             setSettingsEditingMode(false);
           }
         }
@@ -19133,88 +19254,29 @@ function VariableToolbarPlugin() {
   return /* @__PURE__ */ jsx131(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
-import {
-  forwardRef as forwardRef16,
-  useEffect as useEffect93,
-  useImperativeHandle as useImperativeHandle16
-} from "react";
+import { useEffect as useEffect93 } from "react";
 import { jsx as jsx132, jsxs as jsxs49 } from "react/jsx-runtime";
-var Variables = forwardRef16(
-  (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);
-            }
-          }
-        }
-      }
-    };
-    useImperativeHandle16(ref, () => {
+function Variables(props) {
+  const { variablesSettings } = props;
+  const { registerModule, setEditingModeDataCallback } = useBlockEditor();
+  useEffect93(() => {
+    registerModule("Variables");
+  }, []);
+  useEffect93(() => {
+    setEditingModeDataCallback(() => {
       return {
-        renameVariable: handleRenameVariable
+        variableValues: variablesSettings.getVariableValues()
       };
     });
-    useEffect93(() => {
-      registerModule("Variables");
-    }, []);
-    useEffect93(() => {
-      setEditingModeDataCallback(() => {
-        return {
-          variableValues: variablesSettings.getVariableValues()
-        };
-      });
-    }, [variablesSettings, setEditingModeDataCallback]);
-    return /* @__PURE__ */ jsxs49(
-      VariablesProvider,
-      {
-        variablesSettings,
-        renameVariable: handleRenameVariable,
-        children: [
-          /* @__PURE__ */ jsx132(TypeaheadVariablesPlugin, {}),
-          /* @__PURE__ */ jsx132(VariableSettingsPlugin, {}),
-          /* @__PURE__ */ jsx132(VariableToolbarPlugin, {}),
-          /* @__PURE__ */ jsx132(VariableToolbarAgentPlugin, {})
-        ]
-      }
-    );
-  }
-);
+  }, [variablesSettings, setEditingModeDataCallback]);
+  return /* @__PURE__ */ jsxs49(VariablesProvider, { variablesSettings, children: [
+    /* @__PURE__ */ jsx132(TypeaheadVariablePlugin, {}),
+    /* @__PURE__ */ jsx132(VariableSettingsPlugin, {}),
+    /* @__PURE__ */ jsx132(VariableToolbarPlugin, {}),
+    /* @__PURE__ */ jsx132(VariableToolbarAgentPlugin, {})
+  ] });
+}
 export {
   BlockEditor,
   Callout,