@uniformdev/mesh-sdk-react 20.71.2-alpha.10 → 20.71.2-alpha.14

package/dist/index.esm.js

@@ -685,7 +685,8 @@ import {
   $isNodeSelection,
   $setSelection,
   COMMAND_PRIORITY_NORMAL,
-  createCommand
+  createCommand,
+  SKIP_DOM_SELECTION_TAG
 } from "lexical";
 import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
@@ -1147,6 +1148,11 @@ var DISCONNECT_VARIABLE_COMMAND = createCommand(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
+function isEditorFocused(editor) {
+  var _a;
+  const rootElement = editor.getRootElement();
+  return (_a = rootElement == null ? void 0 : rootElement.contains(rootElement.ownerDocument.activeElement)) != null ? _a : false;
+}
 var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
@@ -1441,7 +1447,7 @@ function VariablesPlugin({
     replaceValueOnVariableInsert,
     disableVariableDisplayNames
   ]);
-  const updateExistingNodeIfChanged = useCallback2(
+  const computeUpdatedVariableNodeState = useCallback2(
     (variableNode) => {
       var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -1449,7 +1455,7 @@ function VariablesPlugin({
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
       if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
-        return;
+        return void 0;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
@@ -1462,26 +1468,50 @@ function VariablesPlugin({
         tooltip,
         isFresh: false
       };
-      if (!dequal(currentState, newState)) {
+      return dequal(currentState, newState) ? void 0 : newState;
+    },
+    [canEditVariable, disableVariableDisplayNames]
+  );
+  const updateExistingNodeIfChanged = useCallback2(
+    (variableNode) => {
+      const newState = computeUpdatedVariableNodeState(variableNode);
+      if (newState) {
         variableNode.setState(newState);
       }
     },
-    [canEditVariable, disableVariableDisplayNames]
+    [computeUpdatedVariableNodeState]
   );
   useEffect4(() => {
-    let selection;
+    const pendingUpdates = [];
     editor.read(() => {
-      selection = $getSelection();
+      $dfs().forEach(({ node }) => {
+        if ($isVariableNode(node)) {
+          const newState = computeUpdatedVariableNodeState(node);
+          if (newState) {
+            pendingUpdates.push({ key: node.getKey(), newState });
+          }
+        }
+      });
     });
+    if (pendingUpdates.length === 0) {
+      return;
+    }
+    const shouldSyncDomSelection = isEditorFocused(editor);
     editor.update(() => {
       var _a;
-      $addUpdateTag("skip-dom-selection");
-      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
-      $dfs().filter(({ node }) => $isVariableNode(node)).forEach(({ node: variableNode }) => {
-        updateExistingNodeIfChanged(variableNode);
+      const selection = $getSelection();
+      pendingUpdates.forEach(({ key, newState }) => {
+        const node = $getNodeByKey(key);
+        if ($isVariableNode(node)) {
+          node.setState(newState);
+        }
       });
+      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
+      if (!shouldSyncDomSelection) {
+        $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+      }
     });
-  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, computeUpdatedVariableNodeState]);
   useEffect4(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -6560,7 +6590,9 @@ var FilterControls = ({
   const [localSearchTerm, setLocalSearchTerm] = useState21(searchTerm);
   useDebounce7(
     () => {
-      setSearchTerm(localSearchTerm);
+      if (localSearchTerm !== searchTerm) {
+        setSearchTerm(localSearchTerm);
+      }
     },
     300,
     [localSearchTerm]

package/dist/index.js

@@ -1293,6 +1293,11 @@ var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = (0, import_lexical4.createCommand)("uniform:insert-variable");
+function isEditorFocused(editor) {
+  var _a;
+  const rootElement = editor.getRootElement();
+  return (_a = rootElement == null ? void 0 : rootElement.contains(rootElement.ownerDocument.activeElement)) != null ? _a : false;
+}
 var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
@@ -1587,7 +1592,7 @@ function VariablesPlugin({
     replaceValueOnVariableInsert,
     disableVariableDisplayNames
   ]);
-  const updateExistingNodeIfChanged = (0, import_react15.useCallback)(
+  const computeUpdatedVariableNodeState = (0, import_react15.useCallback)(
     (variableNode) => {
       var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -1595,7 +1600,7 @@ function VariablesPlugin({
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
       if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
-        return;
+        return void 0;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
@@ -1608,26 +1613,50 @@ function VariablesPlugin({
         tooltip,
         isFresh: false
       };
-      if (!(0, import_lite.dequal)(currentState, newState)) {
+      return (0, import_lite.dequal)(currentState, newState) ? void 0 : newState;
+    },
+    [canEditVariable, disableVariableDisplayNames]
+  );
+  const updateExistingNodeIfChanged = (0, import_react15.useCallback)(
+    (variableNode) => {
+      const newState = computeUpdatedVariableNodeState(variableNode);
+      if (newState) {
         variableNode.setState(newState);
       }
     },
-    [canEditVariable, disableVariableDisplayNames]
+    [computeUpdatedVariableNodeState]
   );
   (0, import_react15.useEffect)(() => {
-    let selection;
+    const pendingUpdates = [];
     editor.read(() => {
-      selection = (0, import_lexical4.$getSelection)();
+      (0, import_utils.$dfs)().forEach(({ node }) => {
+        if ($isVariableNode(node)) {
+          const newState = computeUpdatedVariableNodeState(node);
+          if (newState) {
+            pendingUpdates.push({ key: node.getKey(), newState });
+          }
+        }
+      });
     });
+    if (pendingUpdates.length === 0) {
+      return;
+    }
+    const shouldSyncDomSelection = isEditorFocused(editor);
     editor.update(() => {
       var _a;
-      (0, import_lexical4.$addUpdateTag)("skip-dom-selection");
-      (0, import_lexical4.$setSelection)((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
-      (0, import_utils.$dfs)().filter(({ node }) => $isVariableNode(node)).forEach(({ node: variableNode }) => {
-        updateExistingNodeIfChanged(variableNode);
+      const selection = (0, import_lexical4.$getSelection)();
+      pendingUpdates.forEach(({ key, newState }) => {
+        const node = (0, import_lexical4.$getNodeByKey)(key);
+        if ($isVariableNode(node)) {
+          node.setState(newState);
+        }
       });
+      (0, import_lexical4.$setSelection)((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
+      if (!shouldSyncDomSelection) {
+        (0, import_lexical4.$addUpdateTag)(import_lexical4.SKIP_DOM_SELECTION_TAG);
+      }
     });
-  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, computeUpdatedVariableNodeState]);
   (0, import_react15.useEffect)(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -6622,7 +6651,9 @@ var FilterControls = ({
   const [localSearchTerm, setLocalSearchTerm] = (0, import_react65.useState)(searchTerm);
   (0, import_react_use7.useDebounce)(
     () => {
-      setSearchTerm(localSearchTerm);
+      if (localSearchTerm !== searchTerm) {
+        setSearchTerm(localSearchTerm);
+      }
     },
     300,
     [localSearchTerm]

package/dist/index.mjs

@@ -685,7 +685,8 @@ import {
   $isNodeSelection,
   $setSelection,
   COMMAND_PRIORITY_NORMAL,
-  createCommand
+  createCommand,
+  SKIP_DOM_SELECTION_TAG
 } from "lexical";
 import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
@@ -1147,6 +1148,11 @@ var DISCONNECT_VARIABLE_COMMAND = createCommand(
   "uniform:disconnect-variable"
 );
 var INSERT_VARIABLE_COMMAND = createCommand("uniform:insert-variable");
+function isEditorFocused(editor) {
+  var _a;
+  const rootElement = editor.getRootElement();
+  return (_a = rootElement == null ? void 0 : rootElement.contains(rootElement.ownerDocument.activeElement)) != null ? _a : false;
+}
 var DollarSignVariablesRegex = /(^.*)(\$\$(.{0,20}))$/;
 function getPossibleQueryMatch(text) {
   const match = DollarSignVariablesRegex.exec(text);
@@ -1441,7 +1447,7 @@ function VariablesPlugin({
     replaceValueOnVariableInsert,
     disableVariableDisplayNames
   ]);
-  const updateExistingNodeIfChanged = useCallback2(
+  const computeUpdatedVariableNodeState = useCallback2(
     (variableNode) => {
       var _a, _b, _c, _d;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -1449,7 +1455,7 @@ function VariablesPlugin({
       const isLoadingVariables = variablesRef.current.isLoading;
       const currentState = variableNode.getState();
       if (currentState.isFresh && !targetVar && !targetUndefinedVar) {
-        return;
+        return void 0;
       }
       const tooltip = (_d = (_c = (_b = (_a = targetVar == null ? void 0 : targetVar.tooltip) != null ? _a : targetVar == null ? void 0 : targetVar.helpText) != null ? _b : targetUndefinedVar == null ? void 0 : targetUndefinedVar.error) != null ? _c : targetUndefinedVar == null ? void 0 : targetUndefinedVar.warning) != null ? _d : targetUndefinedVar == null ? void 0 : targetUndefinedVar.info;
       const displayName = disableVariableDisplayNames ? prettifyBindExpression(variableNode.reference) : (targetVar == null ? void 0 : targetVar.displayName) || (targetUndefinedVar == null ? void 0 : targetUndefinedVar.displayName) || prettifyBindExpression(variableNode.reference);
@@ -1462,26 +1468,50 @@ function VariablesPlugin({
         tooltip,
         isFresh: false
       };
-      if (!dequal(currentState, newState)) {
+      return dequal(currentState, newState) ? void 0 : newState;
+    },
+    [canEditVariable, disableVariableDisplayNames]
+  );
+  const updateExistingNodeIfChanged = useCallback2(
+    (variableNode) => {
+      const newState = computeUpdatedVariableNodeState(variableNode);
+      if (newState) {
         variableNode.setState(newState);
       }
     },
-    [canEditVariable, disableVariableDisplayNames]
+    [computeUpdatedVariableNodeState]
   );
   useEffect4(() => {
-    let selection;
+    const pendingUpdates = [];
     editor.read(() => {
-      selection = $getSelection();
+      $dfs().forEach(({ node }) => {
+        if ($isVariableNode(node)) {
+          const newState = computeUpdatedVariableNodeState(node);
+          if (newState) {
+            pendingUpdates.push({ key: node.getKey(), newState });
+          }
+        }
+      });
     });
+    if (pendingUpdates.length === 0) {
+      return;
+    }
+    const shouldSyncDomSelection = isEditorFocused(editor);
     editor.update(() => {
       var _a;
-      $addUpdateTag("skip-dom-selection");
-      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
-      $dfs().filter(({ node }) => $isVariableNode(node)).forEach(({ node: variableNode }) => {
-        updateExistingNodeIfChanged(variableNode);
+      const selection = $getSelection();
+      pendingUpdates.forEach(({ key, newState }) => {
+        const node = $getNodeByKey(key);
+        if ($isVariableNode(node)) {
+          node.setState(newState);
+        }
       });
+      $setSelection((_a = selection == null ? void 0 : selection.clone()) != null ? _a : null);
+      if (!shouldSyncDomSelection) {
+        $addUpdateTag(SKIP_DOM_SELECTION_TAG);
+      }
     });
-  }, [editor, variables, knownUndefinedValues, canEditVariable, updateExistingNodeIfChanged]);
+  }, [editor, variables, knownUndefinedValues, computeUpdatedVariableNodeState]);
   useEffect4(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
@@ -6560,7 +6590,9 @@ var FilterControls = ({
   const [localSearchTerm, setLocalSearchTerm] = useState21(searchTerm);
   useDebounce7(
     () => {
-      setSearchTerm(localSearchTerm);
+      if (localSearchTerm !== searchTerm) {
+        setSearchTerm(localSearchTerm);
+      }
     },
     300,
     [localSearchTerm]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/mesh-sdk-react",
-  "version": "20.71.2-alpha.10+f05c79f825",
+  "version": "20.71.2-alpha.14+e527b409ae",
   "description": "Uniform Mesh Framework SDK for React",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -50,10 +50,10 @@
     "@lexical/selection": "0.45.0",
     "@lexical/utils": "0.45.0",
     "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.5.0/react-icons-all-files-5.5.0.tgz",
-    "@uniformdev/canvas": "20.71.2-alpha.10+f05c79f825",
-    "@uniformdev/design-system": "20.71.2-alpha.10+f05c79f825",
-    "@uniformdev/mesh-sdk": "20.71.2-alpha.10+f05c79f825",
-    "@uniformdev/richtext": "20.71.2-alpha.10+f05c79f825",
+    "@uniformdev/canvas": "20.71.2-alpha.14+e527b409ae",
+    "@uniformdev/design-system": "20.71.2-alpha.14+e527b409ae",
+    "@uniformdev/mesh-sdk": "20.71.2-alpha.14+e527b409ae",
+    "@uniformdev/richtext": "20.71.2-alpha.14+e527b409ae",
     "dequal": "^2.0.3",
     "lexical": "0.45.0",
     "mitt": "3.0.1",
@@ -85,5 +85,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f05c79f825aea4df577b9ac100ff186a5a582a37"
+  "gitHead": "e527b409ae4d2b190d4f9195e6787f5c8b89fc85"
 }