fix: use jotai scope for editor-specific atoms (#6308)

src/components/ActiveConfirmDialog.tsx

@@ -1,6 +1,7 @@
 import { atom, useAtom } from "jotai";
 import { actionClearCanvas } from "../actions";
 import { t } from "../i18n";
+import { jotaiScope } from "../jotai";
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 
@@ -9,6 +10,7 @@ export const activeConfirmDialogAtom = atom<"clearCanvas" | null>(null);
 export const ActiveConfirmDialog = () => {
   const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(
     activeConfirmDialogAtom,
+    jotaiScope,
   );
   const actionManager = useExcalidrawActionManager();
 

src/components/LibraryMenuHeaderContent.tsx

@@ -48,6 +48,7 @@ export const LibraryMenuHeader: React.FC<{
   const [libraryItemsData] = useAtom(libraryItemsAtom, jotaiScope);
   const [isLibraryMenuOpen, setIsLibraryMenuOpen] = useAtom(
     isLibraryMenuOpenAtom,
+    jotaiScope,
   );
   const renderRemoveLibAlert = useCallback(() => {
     const content = selectedItems.length

src/tests/shortcuts.test.tsx

@@ -0,0 +1,30 @@
+import { KEYS } from "../keys";
+import { Excalidraw } from "../packages/excalidraw/entry";
+import { API } from "./helpers/api";
+import { Keyboard } from "./helpers/ui";
+import { fireEvent, render, waitFor } from "./test-utils";
+
+describe("shortcuts", () => {
+  it("Clear canvas shortcut should display confirm dialog", async () => {
+    await render(
+      <Excalidraw
+        initialData={{ elements: [API.createElement({ type: "rectangle" })] }}
+        handleKeyboardGlobally
+      />,
+    );
+
+    expect(window.h.elements.length).toBe(1);
+
+    Keyboard.withModifierKeys({ ctrl: true }, () => {
+      Keyboard.keyDown(KEYS.DELETE);
+    });
+    const confirmDialog = document.querySelector(".confirm-dialog")!;
+    expect(confirmDialog).not.toBe(null);
+
+    fireEvent.click(confirmDialog.querySelector('[aria-label="Confirm"]')!);
+
+    await waitFor(() => {
+      expect(window.h.elements[0].isDeleted).toBe(true);
+    });
+  });
+});