fix: command palette tweaks and fixes (#7876)

packages/excalidraw/components/CommandPalette/CommandPalette.tsx

@@ -49,6 +49,8 @@ import { jotaiStore } from "../../jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import { CommandPaletteItem } from "./types";
 import * as defaultItems from "./defaultCommandPaletteItems";
+import { trackEvent } from "../../analytics";
+import { useStable } from "../../hooks/useStable";
 
 import "./CommandPalette.scss";
 
@@ -130,12 +132,20 @@ export const CommandPalette = Object.assign(
         if (isCommandPaletteToggleShortcut(event)) {
           event.preventDefault();
           event.stopPropagation();
-          setAppState((appState) => ({
-            openDialog:
+          setAppState((appState) => {
+            const nextState =
               appState.openDialog?.name === "commandPalette"
                 ? null
-                : { name: "commandPalette" },
-          }));
+                : ({ name: "commandPalette" } as const);
+
+            if (nextState) {
+              trackEvent("command_palette", "open", "shortcut");
+            }
+
+            return {
+              openDialog: nextState,
+            };
+          });
         }
       };
       window.addEventListener(EVENT.KEYDOWN, commandPaletteShortcut, {
@@ -174,10 +184,20 @@ function CommandPaletteInner({
 
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const stableDeps = useStable({
+    uiAppState,
+    customCommandPaletteItems,
+    appProps,
+  });
+
   useEffect(() => {
-    if (!uiAppState || !app.scene || !actionManager) {
-      return;
-    }
+    // these props change often and we don't want them to re-run the effect
+    // which would renew `allCommands`, cascading down and resetting state.
+    //
+    // This means that the commands won't update on appState/appProps changes
+    // while the command palette is open
+    const { uiAppState, customCommandPaletteItems, appProps } = stableDeps;
+
     const getActionLabel = (action: Action) => {
       let label = "";
       if (action.label) {
@@ -533,15 +553,13 @@ function CommandPaletteInner({
       );
     }
   }, [
+    stableDeps,
     app,
-    appProps,
-    uiAppState,
     actionManager,
     setAllCommands,
     lastUsed?.label,
     setLastUsed,
     setAppState,
-    customCommandPaletteItems,
   ]);
 
   const [commandSearch, setCommandSearch] = useState("");