feat: merge search sidebar back to default sidebar (#8497)

excalidraw-app/data/LocalData.ts

@@ -20,7 +20,10 @@ import {
   get,
 } from "idb-keyval";
 import { clearAppStateForLocalStorage } from "../../packages/excalidraw/appState";
-import { SEARCH_SIDEBAR } from "../../packages/excalidraw/constants";
+import {
+  CANVAS_SEARCH_TAB,
+  DEFAULT_SIDEBAR,
+} from "../../packages/excalidraw/constants";
 import type { LibraryPersistedData } from "../../packages/excalidraw/data/library";
 import type { ImportedDataState } from "../../packages/excalidraw/data/types";
 import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
@@ -69,7 +72,10 @@ const saveDataStateToLocalStorage = (
   try {
     const _appState = clearAppStateForLocalStorage(appState);
 
-    if (_appState.openSidebar?.name === SEARCH_SIDEBAR.name) {
+    if (
+      _appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
+      _appState.openSidebar.tab === CANVAS_SEARCH_TAB
+    ) {
       _appState.openSidebar = null;
     }
 

packages/excalidraw/actions/actionToggleSearchMenu.ts

@@ -3,7 +3,7 @@ import { register } from "./register";
 import type { AppState } from "../types";
 import { searchIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { CLASSES, SEARCH_SIDEBAR } from "../constants";
+import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
 
 export const actionToggleSearchMenu = register({
   name: "searchMenu",
@@ -17,7 +17,10 @@ export const actionToggleSearchMenu = register({
     predicate: (appState) => appState.gridModeEnabled,
   },
   perform(elements, appState, _, app) {
-    if (appState.openSidebar?.name === SEARCH_SIDEBAR.name) {
+    if (
+      appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
+      appState.openSidebar.tab === CANVAS_SEARCH_TAB
+    ) {
       const searchInput =
         app.excalidrawContainerValue.container?.querySelector<HTMLInputElement>(
           `.${CLASSES.SEARCH_MENU_INPUT_WRAPPER} input`,
@@ -31,13 +34,14 @@ export const actionToggleSearchMenu = register({
       }
 
       searchInput?.focus();
+      searchInput?.select();
       return false;
     }
 
     return {
       appState: {
         ...appState,
-        openSidebar: { name: SEARCH_SIDEBAR.name },
+        openSidebar: { name: DEFAULT_SIDEBAR.name, tab: CANVAS_SEARCH_TAB },
         openDialog: null,
       },
       storeAction: StoreAction.NONE,

packages/excalidraw/components/DefaultSidebar.tsx

@@ -1,5 +1,9 @@
 import clsx from "clsx";
-import { DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_TAB } from "../constants";
+import {
+  CANVAS_SEARCH_TAB,
+  DEFAULT_SIDEBAR,
+  LIBRARY_SIDEBAR_TAB,
+} from "../constants";
 import { useTunnels } from "../context/tunnels";
 import { useUIAppState } from "../context/ui-appState";
 import type { MarkOptional, Merge } from "../utility-types";
@@ -10,7 +14,8 @@ import { LibraryMenu } from "./LibraryMenu";
 import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
 import { Sidebar } from "./Sidebar/Sidebar";
 import "../components/dropdownMenu/DropdownMenu.scss";
-import { t } from "../i18n";
+import { SearchMenu } from "./SearchMenu";
+import { LibraryIcon, searchIcon } from "./icons";
 
 const DefaultSidebarTrigger = withInternalFallback(
   "DefaultSidebarTrigger",
@@ -66,16 +71,20 @@ export const DefaultSidebar = Object.assign(
 
       const { DefaultSidebarTabTriggersTunnel } = useTunnels();
 
+      const isForceDocked = appState.openSidebar?.tab === CANVAS_SEARCH_TAB;
+
       return (
         <Sidebar
           {...rest}
           name={"default"}
           className={clsx("default-sidebar", className)}
-          docked={docked ?? appState.defaultSidebarDockedPreference}
+          docked={
+            isForceDocked || (docked ?? appState.defaultSidebarDockedPreference)
+          }
           onDock={
             // `onDock=false` disables docking.
             // if `docked` passed, but no onDock passed, disable manual docking.
-            onDock === false || (!onDock && docked != null)
+            isForceDocked || onDock === false || (!onDock && docked != null)
               ? undefined
               : // compose to allow the host app to listen on default behavior
                 composeEventHandlers(onDock, (docked) => {
@@ -85,26 +94,22 @@ export const DefaultSidebar = Object.assign(
         >
           <Sidebar.Tabs>
             <Sidebar.Header>
-              {rest.__fallback && (
+              <DefaultSidebar.TabTriggers>
-                <div
+                <Sidebar.TabTrigger tab={CANVAS_SEARCH_TAB}>
-                  style={{
+                  {searchIcon}
-                    color: "var(--color-primary)",
+                </Sidebar.TabTrigger>
-                    fontSize: "1.2em",
+                <Sidebar.TabTrigger tab={LIBRARY_SIDEBAR_TAB}>
-                    fontWeight: "bold",
+                  {LibraryIcon}
-                    textOverflow: "ellipsis",
+                </Sidebar.TabTrigger>
-                    overflow: "hidden",
+              </DefaultSidebar.TabTriggers>
-                    whiteSpace: "nowrap",
+              {rest.__fallback && <DefaultSidebarTabTriggersTunnel.Out />}
-                    paddingRight: "1em",
-                  }}
-                >
-                  {t("toolBar.library")}
-                </div>
-              )}
-              <DefaultSidebarTabTriggersTunnel.Out />
             </Sidebar.Header>
             <Sidebar.Tab tab={LIBRARY_SIDEBAR_TAB}>
               <LibraryMenu />
             </Sidebar.Tab>
+            <Sidebar.Tab tab={CANVAS_SEARCH_TAB}>
+              <SearchMenu />
+            </Sidebar.Tab>
             {children}
           </Sidebar.Tabs>
         </Sidebar>

packages/excalidraw/components/HintViewer.tsx

@@ -13,7 +13,7 @@ import { isEraserActive } from "../appState";
 import "./HintViewer.scss";
 import { isNodeInFlowchart } from "../element/flowchart";
 import { isGridModeEnabled } from "../snapping";
-import { SEARCH_SIDEBAR } from "../constants";
+import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "../constants";
 
 interface HintViewerProps {
   appState: UIAppState;
@@ -32,7 +32,8 @@ const getHints = ({
   const multiMode = appState.multiElement !== null;
 
   if (
-    appState.openSidebar?.name === SEARCH_SIDEBAR.name &&
+    appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
+    appState.openSidebar.tab === CANVAS_SEARCH_TAB &&
     appState.searchMatches?.length
   ) {
     return t("hints.dismissSearch");

packages/excalidraw/components/LayerUI.tsx

@@ -5,7 +5,6 @@ import {
   CLASSES,
   DEFAULT_SIDEBAR,
   LIBRARY_SIDEBAR_WIDTH,
-  SEARCH_SIDEBAR,
   TOOL_TYPE,
 } from "../constants";
 import { showSelectedShapeActions } from "../element";
@@ -54,9 +53,6 @@ import { LibraryIcon } from "./icons";
 import { UIAppStateContext } from "../context/ui-appState";
 import { DefaultSidebar } from "./DefaultSidebar";
 import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
-
-import "./LayerUI.scss";
-import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
@@ -64,7 +60,9 @@ import { LaserPointerButton } from "./LaserPointerButton";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
-import { SearchSidebar } from "./SearchSidebar";
+
+import "./LayerUI.scss";
+import "./Toolbar.scss";
 
 interface LayerUIProps {
   actionManager: ActionManager;
@@ -365,21 +363,16 @@ const LayerUI = ({
 
   const renderSidebars = () => {
     return (
-      <>
+      <DefaultSidebar
-        {appState.openSidebar?.name === SEARCH_SIDEBAR.name && (
+        __fallback
-          <SearchSidebar />
+        onDock={(docked) => {
-        )}
+          trackEvent(
-        <DefaultSidebar
+            "sidebar",
-          __fallback
+            `toggleDock (${docked ? "dock" : "undock"})`,
-          onDock={(docked) => {
+            `(${device.editor.isMobile ? "mobile" : "desktop"})`,
-            trackEvent(
+          );
-              "sidebar",
+        }}
-              `toggleDock (${docked ? "dock" : "undock"})`,
+      />
-              `(${device.editor.isMobile ? "mobile" : "desktop"})`,
-            );
-          }}
-        />
-      </>
     );
   };
 

packages/excalidraw/components/SearchSidebar.tsx

@@ -1,29 +0,0 @@
-import { SEARCH_SIDEBAR } from "../constants";
-import { t } from "../i18n";
-import { SearchMenu } from "./SearchMenu";
-import { Sidebar } from "./Sidebar/Sidebar";
-
-export const SearchSidebar = () => {
-  return (
-    <Sidebar name={SEARCH_SIDEBAR.name} docked>
-      <Sidebar.Tabs>
-        <Sidebar.Header>
-          <div
-            style={{
-              color: "var(--color-primary)",
-              fontSize: "1.2em",
-              fontWeight: "bold",
-              textOverflow: "ellipsis",
-              overflow: "hidden",
-              whiteSpace: "nowrap",
-              paddingRight: "1em",
-            }}
-          >
-            {t("search.title")}
-          </div>
-        </Sidebar.Header>
-        <SearchMenu />
-      </Sidebar.Tabs>
-    </Sidebar>
-  );
-};

packages/excalidraw/constants.ts

@@ -377,16 +377,13 @@ export const DEFAULT_ELEMENT_PROPS: {
 };
 
 export const LIBRARY_SIDEBAR_TAB = "library";
+export const CANVAS_SEARCH_TAB = "search";
 
 export const DEFAULT_SIDEBAR = {
   name: "default",
   defaultTab: LIBRARY_SIDEBAR_TAB,
 } as const;
 
-export const SEARCH_SIDEBAR = {
-  name: "search",
-};
-
 export const LIBRARY_DISABLED_TYPES = new Set([
   "iframe",
   "embeddable",

packages/excalidraw/locales/en.json

@@ -167,7 +167,7 @@
     "noMatch": "No matches found...",
     "singleResult": "result",
     "multipleResults": "results",
-    "placeholder": "Find text..."
+    "placeholder": "Find text on canvas..."
   },
   "buttons": {
     "clearReset": "Reset the canvas",

packages/excalidraw/tests/search.test.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { act, render, waitFor } from "./test-utils";
 import { Excalidraw } from "../index";
-import { CLASSES, SEARCH_SIDEBAR } from "../constants";
+import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
 import { Keyboard } from "./helpers/ui";
 import { KEYS } from "../keys";
 import { updateTextEditor } from "./queries/dom";
@@ -34,7 +34,8 @@ describe("search", () => {
       Keyboard.keyPress(KEYS.F);
     });
     expect(h.app.state.openSidebar).not.toBeNull();
-    expect(h.app.state.openSidebar?.name).toBe(SEARCH_SIDEBAR.name);
+    expect(h.app.state.openSidebar?.name).toBe(DEFAULT_SIDEBAR.name);
+    expect(h.app.state.openSidebar?.tab).toBe(CANVAS_SEARCH_TAB);
 
     const searchInput = await querySearchInput();
     expect(searchInput.matches(":focus")).toBe(true);
@@ -78,7 +79,8 @@ describe("search", () => {
       Keyboard.keyPress(KEYS.F);
     });
     expect(h.app.state.openSidebar).not.toBeNull();
-    expect(h.app.state.openSidebar?.name).toBe(SEARCH_SIDEBAR.name);
+    expect(h.app.state.openSidebar?.name).toBe(DEFAULT_SIDEBAR.name);
+    expect(h.app.state.openSidebar?.tab).toBe(CANVAS_SEARCH_TAB);
 
     const searchInput = await querySearchInput();
 
@@ -122,7 +124,8 @@ describe("search", () => {
       Keyboard.keyPress(KEYS.F);
     });
     expect(h.app.state.openSidebar).not.toBeNull();
-    expect(h.app.state.openSidebar?.name).toBe(SEARCH_SIDEBAR.name);
+    expect(h.app.state.openSidebar?.name).toBe(DEFAULT_SIDEBAR.name);
+    expect(h.app.state.openSidebar?.tab).toBe(CANVAS_SEARCH_TAB);
 
     const searchInput = await querySearchInput();