feat: jump to search (#2453)

* jump to search init * support multiple text matching * search navigation dialog * remove search text * typesense support * typesense support * add search guard * use search key check * minor fix * minor fix * fix: clean up jump search state on close --------- Co-authored-by: Philipinho <16838612+Philipinho@users.noreply.github.com>
2026-09-11 07:56:54 +08:00 · 2026-09-05 16:06:52 +01:00
parent 6ff8c7cdfe
commit 84e1e56cf6
11 changed files with 401 additions and 36 deletions
@@ -66,7 +66,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo
    }
    // Clear search term in editor
    if (isEditorReady(editor)) {
-      editor.commands.setSearchTerm("");
+      editor.commands.setSearchTerms([""]);
    }
  };

@@ -117,7 +117,7 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo

  useEffect(() => {
    if (!isEditorReady(editor)) return;
-    editor.commands.setSearchTerm(searchText);
+    editor.commands.setSearchTerms([searchText]);
    editor.commands.resetIndex();
    editor.commands.selectCurrentItem();
  }, [searchText]);
@@ -181,8 +181,10 @@ function SearchAndReplaceDialog({ editor, editable = true }: PageFindDialogDialo

  const location = useLocation();
  useEffect(() => {
-    closeDialog();
-  }, [location]);
+    if (pageFindState.isOpen) {
+      closeDialog();
+    }
+  }, [location.pathname]);

  return (
    <Dialog
@@ -0,0 +1,205 @@
+import { ActionIcon, Dialog, Flex, Text, Tooltip } from "@mantine/core";
+import {
+  IconArrowNarrowDown,
+  IconArrowNarrowUp,
+  IconX,
+} from "@tabler/icons-react";
+import { useEditor } from "@tiptap/react";
+import { isEditorReady } from "@docmost/editor-ext";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import classes from "./search-replace.module.css";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
+
+interface SearchNavigationDialogProps {
+  editor: ReturnType<typeof useEditor>;
+}
+
+interface SearchNavigationEvent extends CustomEvent {
+  detail: {
+    searchTerms: string[];
+    wholeWord?: boolean;
+  };
+}
+
+function SearchNavigationDialog({ editor }: SearchNavigationDialogProps) {
+  const { t } = useTranslation();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const openRef = useRef(false);
+  const [resultState, setResultState] = useState({
+    resultIndex: 0,
+    resultsLength: 0,
+  });
+
+  const goToSelection = () => {
+    if (!isEditorReady(editor)) return;
+
+    const { results, resultIndex } = editor.storage.searchAndReplace;
+    const position = results[resultIndex];
+
+    setResultState({
+      resultsLength: results.length,
+      resultIndex,
+    });
+
+    if (!position) return;
+    requestAnimationFrame(() => {
+      document
+        .querySelector(".search-result-current")
+        ?.scrollIntoView({ behavior: "smooth", block: "center" });
+    });
+  };
+
+  const next = () => {
+    if (!isEditorReady(editor)) return;
+    editor.commands.nextSearchResult();
+    goToSelection();
+  };
+
+  const previous = () => {
+    if (!isEditorReady(editor)) return;
+    editor.commands.previousSearchResult();
+    goToSelection();
+  };
+
+  const close = useCallback(() => {
+    if (!openRef.current) return;
+
+    openRef.current = false;
+    setOpen(false);
+    if (isEditorReady(editor)) {
+      editor.commands.setSearchTerms([""]);
+    }
+    const nextParams = new URLSearchParams(location.search);
+    nextParams.delete("q");
+    nextParams.delete("m");
+    const nextSearch = nextParams.toString();
+    navigate(
+      {
+        pathname: location.pathname,
+        search: nextSearch ? `?${nextSearch}` : "",
+        hash: location.hash,
+      },
+      { replace: true },
+    );
+  }, [editor, location.hash, location.pathname, location.search, navigate]);
+
+  useEffect(() => {
+    const handleOpen = (event: Event) => {
+      const { searchTerms: terms, wholeWord = true } = (
+        event as SearchNavigationEvent
+      ).detail;
+
+      if (!terms?.length || !isEditorReady(editor)) return;
+
+      openRef.current = false;
+      editor.commands.setSearchTerms(terms);
+      editor.commands.setWholeWord(wholeWord);
+      editor.commands.resetIndex();
+
+      const { results, resultIndex } = editor.storage.searchAndReplace;
+      openRef.current = true;
+      if (results.length === 0) {
+        close();
+        return;
+      }
+
+      setOpen(true);
+      setResultState({
+        resultIndex,
+        resultsLength: results.length,
+      });
+
+      goToSelection();
+    };
+
+    const handleClose = () => {
+      if (openRef.current) {
+        close();
+      }
+    };
+
+    document.addEventListener("openSearchNavigationDialog", handleOpen);
+    document.addEventListener("openFindDialogFromEditor", handleClose);
+    document.addEventListener("closeFindDialogFromEditor", handleClose);
+
+    return () => {
+      document.removeEventListener("openSearchNavigationDialog", handleOpen);
+      document.removeEventListener("openFindDialogFromEditor", handleClose);
+      document.removeEventListener("closeFindDialogFromEditor", handleClose);
+    };
+  }, [close, editor]);
+
+  useEffect(() => {
+    const handleTransaction = () => {
+      if (!openRef.current || editor.isDestroyed) return;
+
+      const { results } = editor.storage.searchAndReplace;
+      if (results.length === 0) {
+        close();
+      }
+    };
+
+    editor.on("transaction", handleTransaction);
+    return () => {
+      editor.off("transaction", handleTransaction);
+    };
+  }, [close, editor]);
+
+  return (
+    <Dialog
+      className={classes.findDialog}
+      opened={open}
+      size="xs"
+      radius="md"
+      w="auto"
+      position={{ top: 90, right: 50 }}
+      withBorder
+      aria-label="Search navigation"
+    >
+      <Flex align="center" gap="xs">
+        <Text size="xs" style={{ flex: 1 }}>
+          {resultState.resultsLength > 0
+            ? `${resultState.resultIndex + 1}/${resultState.resultsLength}`
+            : t("Not found")}
+        </Text>
+        <Tooltip label="Previous match">
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            onClick={previous}
+            aria-label="Previous match"
+            disabled={resultState.resultsLength === 0}
+          >
+            <IconArrowNarrowUp size={16} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Next match">
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            onClick={next}
+            aria-label="Next match"
+            disabled={resultState.resultsLength === 0}
+          >
+            <IconArrowNarrowDown size={16} />
+          </ActionIcon>
+        </Tooltip>
+        <Tooltip label="Close">
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            onClick={close}
+            aria-label="Close"
+          >
+            <IconX size={16} />
+          </ActionIcon>
+        </Tooltip>
+      </Flex>
+    </Dialog>
+  );
+}
+
+export default SearchNavigationDialog;
@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import type { useEditor } from "@tiptap/react";
+
+interface UseSearchNavigationParamsProps {
+  editor: ReturnType<typeof useEditor>;
+  isSynced: boolean;
+  pageId: string;
+  searchParams: URLSearchParams;
+  showStatic: boolean;
+}
+
+export function useSearchNavigationParams({
+  editor,
+  isSynced,
+  pageId,
+  searchParams,
+  showStatic,
+}: UseSearchNavigationParamsProps) {
+  const appliedSearchKeyRef = useRef<string | null>(null);
+  const searchKey = `${pageId}:${searchParams.toString()}`;
+
+  useEffect(() => {
+    const searchQueries = searchParams.getAll("q");
+    if (!searchQueries.length) {
+      appliedSearchKeyRef.current = null;
+      return;
+    }
+
+    if (
+      !editor ||
+      editor.isDestroyed ||
+      !editor.view.dom.isConnected ||
+      appliedSearchKeyRef.current === searchKey
+    ) {
+      return;
+    }
+
+    const match = searchParams.get("m");
+    appliedSearchKeyRef.current = searchKey;
+
+    document.dispatchEvent(
+      new CustomEvent("openSearchNavigationDialog", {
+        detail: { searchTerms: searchQueries, wholeWord: match === "whole" },
+      }),
+    );
+  }, [editor, isSynced, searchKey, searchParams, showStatic]);
+}
@@ -65,11 +65,13 @@ import ExcalidrawMenu from "./components/excalidraw/excalidraw-menu-lazy";
 import DrawioMenu from "./components/drawio/drawio-menu";
 import { useCollabToken } from "@/features/auth/queries/auth-query.tsx";
 import SearchAndReplaceDialog from "@/features/editor/components/search-and-replace/search-and-replace-dialog.tsx";
+import SearchNavigationDialog from "@/features/editor/components/search-and-replace/search-navigation-dialog.tsx";
+import { useSearchNavigationParams } from "@/features/editor/components/search-and-replace/use-search-navigation-params.ts";
 import { useDebouncedCallback, useDocumentVisibility } from "@mantine/hooks";
 import { useIdle } from "@/hooks/use-idle.ts";
 import { queryClient } from "@/main.tsx";
 import { IPage } from "@/features/page/types/page.types.ts";
-import { useParams } from "react-router-dom";
+import { useParams, useSearchParams } from "react-router-dom";
 import { extractPageSlugId, platformModifierKey } from "@/lib";
 import { FIVE_MINUTES } from "@/lib/constants.ts";
 import { PageEditMode } from "@/features/user/types/user.types.ts";
@@ -199,6 +201,7 @@ function CollabPageEditor({
  const { isIdle, resetIdle } = useIdle(FIVE_MINUTES, { initialState: false });
  const documentState = useDocumentVisibility();
  const { pageSlug } = useParams();
+  const [searchParams] = useSearchParams();
  const slugId = extractPageSlugId(pageSlug);
  const currentPageEditMode = useAtomValue(currentPageEditModeAtom);
  const canScroll = useCallback(
@@ -437,6 +440,14 @@ function CollabPageEditor({
  const hasConnectedOnceRef = useRef(false);
  const [showStatic, setShowStatic] = useState(true);

+  useSearchNavigationParams({
+    editor,
+    isSynced,
+    pageId,
+    searchParams,
+    showStatic,
+  });
+
  useEffect(() => {
    if (
      !hasConnectedOnceRef.current &&
@@ -460,6 +471,7 @@ function CollabPageEditor({
        {editor && (
          <SearchAndReplaceDialog editor={editor} editable={editable} />
        )}
+        {editor && <SearchNavigationDialog editor={editor} />}

        {editor && editorIsEditable && (
          <div>
@@ -25,11 +25,37 @@ const buildPageSlug = (pageSlugId: string, pageTitle?: string): string => {
  return `${titleSlug}-${pageSlugId}`;
 };

+function appendSearchParams(
+  url: string,
+  search?: string[],
+  wholeWord?: boolean,
+): string {
+  if(search?.length === 0){
+    return url;
+  }
+
+  const params = new URLSearchParams();
+  search
+    ?.map((term) => term.trim())
+    .filter(Boolean)
+    .forEach((term) => params.append("q", term));
+
+  if (wholeWord) {
+    params.set("m", "whole");
+  }
+
+  const queryString = params.toString();
+
+  return queryString ? `${url}?${queryString}` : url;
+}
+
 export const buildPageUrl = (
  spaceName: string,
  pageSlugId: string,
  pageTitle?: string,
  anchorId?: string,
+  search?: string[],
+  wholeWord?: boolean,
 ): string => {
  let url: string;
  if (spaceName === undefined) {
@@ -37,6 +63,9 @@ export const buildPageUrl = (
  } else {
    url = `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  }
+
+  url = appendSearchParams(url, search, wholeWord);
+
  return anchorId ? `${url}#${anchorId}` : url;
 };

@@ -45,14 +74,19 @@ export const buildSharedPageUrl = (opts: {
  pageSlugId: string;
  pageTitle?: string;
  anchorId?: string;
+  search?: string[];
+  wholeWord?: boolean;
 }): string => {
-  const { shareId, pageSlugId, pageTitle, anchorId } = opts;
+  const { shareId, pageSlugId, pageTitle, anchorId, search, wholeWord } = opts;
  let url: string;
  if (!shareId) {
    url = `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  } else {
    url = `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
  }
+
+  url = appendSearchParams(url, search, wholeWord);
+
  return anchorId ? `${url}#${anchorId}` : url;
 };

@@ -117,6 +117,9 @@ export function SearchResultItem({
          pageResult.space.slug,
          pageResult.slugId,
          pageResult.title,
+          undefined,
+          pageResult.matchedText,
+          pageResult.wholeWord
        )}
        style={{ userSelect: "none" }}
      >
@@ -14,6 +14,8 @@ export interface IPageSearch {
  updatedAt: Date;
  rank: string;
  highlight: string;
+  matchedText: string[];
+  wholeWord: boolean;
  space: Partial<ISpace>;
 }