From 813f9b702e2b17cfb3c1e1577b921a599f6ad81c Mon Sep 17 00:00:00 2001 From: David Luzar <5153846+dwelle@users.noreply.github.com> Date: Wed, 11 Sep 2024 19:26:01 +0200 Subject: [PATCH] feat: merge search sidebar back to default sidebar (#8497) --- excalidraw-app/data/LocalData.ts | 10 ++++- .../actions/actionToggleSearchMenu.ts | 10 +++-- .../excalidraw/components/DefaultSidebar.tsx | 45 ++++++++++--------- packages/excalidraw/components/HintViewer.tsx | 5 ++- packages/excalidraw/components/LayerUI.tsx | 33 ++++++-------- .../excalidraw/components/SearchSidebar.tsx | 29 ------------ packages/excalidraw/constants.ts | 5 +-- packages/excalidraw/locales/en.json | 2 +- packages/excalidraw/tests/search.test.tsx | 11 +++-- 9 files changed, 65 insertions(+), 85 deletions(-) delete mode 100644 packages/excalidraw/components/SearchSidebar.tsx diff --git a/excalidraw-app/data/LocalData.ts b/excalidraw-app/data/LocalData.ts index df753c89b6..c8ac5b19a4 100644 --- a/excalidraw-app/data/LocalData.ts +++ b/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; } diff --git a/packages/excalidraw/actions/actionToggleSearchMenu.ts b/packages/excalidraw/actions/actionToggleSearchMenu.ts index 6072fd30c9..02a58cd2b4 100644 --- a/packages/excalidraw/actions/actionToggleSearchMenu.ts +++ b/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( `.${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, diff --git a/packages/excalidraw/components/DefaultSidebar.tsx b/packages/excalidraw/components/DefaultSidebar.tsx index 5cd588933a..5053a143eb 100644 --- a/packages/excalidraw/components/DefaultSidebar.tsx +++ b/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 ( { @@ -85,26 +94,22 @@ export const DefaultSidebar = Object.assign( > - {rest.__fallback && ( -
- {t("toolBar.library")} -
- )} - + + + {searchIcon} + + + {LibraryIcon} + + + {rest.__fallback && } + + + {children} diff --git a/packages/excalidraw/components/HintViewer.tsx b/packages/excalidraw/components/HintViewer.tsx index 7c3431c58a..934ff90050 100644 --- a/packages/excalidraw/components/HintViewer.tsx +++ b/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"); diff --git a/packages/excalidraw/components/LayerUI.tsx b/packages/excalidraw/components/LayerUI.tsx index 01d5fd8214..64c34dd1ca 100644 --- a/packages/excalidraw/components/LayerUI.tsx +++ b/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 ( - <> - {appState.openSidebar?.name === SEARCH_SIDEBAR.name && ( - - )} - { - trackEvent( - "sidebar", - `toggleDock (${docked ? "dock" : "undock"})`, - `(${device.editor.isMobile ? "mobile" : "desktop"})`, - ); - }} - /> - + { + trackEvent( + "sidebar", + `toggleDock (${docked ? "dock" : "undock"})`, + `(${device.editor.isMobile ? "mobile" : "desktop"})`, + ); + }} + /> ); }; diff --git a/packages/excalidraw/components/SearchSidebar.tsx b/packages/excalidraw/components/SearchSidebar.tsx deleted file mode 100644 index 7cb93ac5f0..0000000000 --- a/packages/excalidraw/components/SearchSidebar.tsx +++ /dev/null @@ -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 ( - - - -
- {t("search.title")} -
- - - - - ); -}; diff --git a/packages/excalidraw/constants.ts b/packages/excalidraw/constants.ts index 31982d4fbb..d43847b79c 100644 --- a/packages/excalidraw/constants.ts +++ b/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", diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json index ff1fa20263..e4c5eea449 100644 --- a/packages/excalidraw/locales/en.json +++ b/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", diff --git a/packages/excalidraw/tests/search.test.tsx b/packages/excalidraw/tests/search.test.tsx index ae729b2101..68ad658262 100644 --- a/packages/excalidraw/tests/search.test.tsx +++ b/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();