@examind/block-editor 0.1.1 → 0.1.4

package/dist/index.mjs

@@ -15438,7 +15438,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 +15462,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 +15496,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
     }
@@ -15801,7 +15842,7 @@ function TypeaheadVariablesPlugin() {
         COMMAND_PRIORITY_HIGH4
       )
     );
-  }, [editor]);
+  }, [editor, variableList]);
   const menu = useMemo12(() => {
     return renderVariablesMenu(
       variableList || [],
@@ -15933,7 +15974,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 +16055,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);
@@ -16341,7 +16382,7 @@ function TextToolbarPlugin() {
                 "background-color",
                 ""
               );
-              if ($isElementNode4(element)) {
+              if ($isElementNode5(element)) {
                 newToolbarState.textAlign = element.getFormatType();
               } else {
                 newToolbarState.textAlign = "left";
@@ -17053,7 +17094,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 +17125,7 @@ function FinancialStatementQuestionPlugin() {
                 if (targetNode) {
                   const headerEditor = createEditor9();
                   headerEditor.update(() => {
-                    const root = $getRoot22();
+                    const root = $getRoot23();
                     const paragraph = $createParagraphNode23();
                     root.append(paragraph);
                   });
@@ -17392,7 +17433,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,
@@ -17702,7 +17743,7 @@ function TypeaheadMenuPlugin() {
                 );
               });
             }
-            const rootNode = $getRoot23();
+            const rootNode = $getRoot24();
             if (rootNode) {
               const childrenKeys = rootNode.getChildrenKeys();
               if (childrenKeys.length > 0) {
@@ -18033,6 +18074,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];
         },
@@ -18553,7 +18603,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 +18735,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 +19204,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(TypeaheadVariablesPlugin, {}),
+    /* @__PURE__ */ jsx132(VariableSettingsPlugin, {}),
+    /* @__PURE__ */ jsx132(VariableToolbarPlugin, {}),
+    /* @__PURE__ */ jsx132(VariableToolbarAgentPlugin, {})
+  ] });
+}
 export {
   BlockEditor,
   Callout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@examind/block-editor",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "@comment version": [
     "Don't specify package version here. It will be injected by publish workflow."
   ],