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
@@ -39,7 +39,11 @@ declare module "@tiptap/core" {
      /**
       * @description Set search term in extension.
       */
-      setSearchTerm: (searchTerm: string) => ReturnType;
+      setSearchTerms: (searchTerms: string[]) => ReturnType;
+      /**
+       * @description Set whole word search in extension.
+       */
+      setWholeWord: (wholeWord: boolean) => ReturnType;
      /**
       * @description Set replace term in extension.
       */
@@ -82,13 +86,26 @@ interface TextNodesWithPosition {
 }

 const getRegex = (
-  s: string,
+  searchTerms: string[],
  disableRegex: boolean,
  caseSensitive: boolean,
+  wholeWord: boolean,
 ): RegExp => {
-  return RegExp(
-    disableRegex ? s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") : s,
-    caseSensitive ? "gu" : "gui",
+  const terms = searchTerms.filter(Boolean).sort((a, b) => b.length - a.length);
+
+  const pattern = terms
+    .map((term) =>
+      disableRegex ? term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&") : term,
+    )
+    .join("|");
+
+  const finalPattern = wholeWord
+    ? `(?<![\\p{L}\\p{N}_])(?:${pattern})(?![\\p{L}\\p{N}_])`
+    : pattern;
+
+  return new RegExp(
+    finalPattern,
+    caseSensitive ? "gu" : "giu",
  );
 };

@@ -255,12 +272,14 @@ export interface SearchAndReplaceOptions {
 }

 export interface SearchAndReplaceStorage {
-  searchTerm: string;
+  searchTerms: string[];
  replaceTerm: string;
  results: Range[];
-  lastSearchTerm: string;
+  lastSearchTerms: string[];
  caseSensitive: boolean;
  lastCaseSensitive: boolean;
+  wholeWord: boolean;
+  lastWholeWord: boolean;
  resultIndex: number;
  lastResultIndex: number;
 }
@@ -280,11 +299,13 @@ export const SearchAndReplace = Extension.create<

  addStorage() {
    return {
-      searchTerm: "",
+      searchTerms: [],
      replaceTerm: "",
      results: [],
-      lastSearchTerm: "",
+      lastSearchTerms: [],
      caseSensitive: false,
+      wholeWord: false,
+      lastWholeWord: false,
      lastCaseSensitive: false,
      resultIndex: 0,
      lastResultIndex: 0,
@@ -293,10 +314,21 @@ export const SearchAndReplace = Extension.create<

  addCommands() {
    return {
-      setSearchTerm:
-        (searchTerm: string) =>
+      setSearchTerms:
+        (searchTerms: string[]) =>
        ({ editor }) => {
-          editor.storage.searchAndReplace.searchTerm = searchTerm;
+          editor.storage.searchAndReplace.searchTerms = searchTerms.filter(Boolean);
+
+          // clear whole word by default
+          // should remove if whole word toggle is added to search and replace dialog
+          editor.storage.searchAndReplace.wholeWord = false;
+
+          return false;
+        },
+      setWholeWord:
+        (wholeWord: boolean) =>
+        ({ editor }) => {
+          editor.storage.searchAndReplace.wholeWord = wholeWord;

          return false;
        },
@@ -409,8 +441,10 @@ export const SearchAndReplace = Extension.create<
    const editor = this.editor;
    const { searchResultClass, disableRegex } = this.options;

-    const setLastSearchTerm = (t: string) =>
-      (editor.storage.searchAndReplace.lastSearchTerm = t);
+    const setLastSearchTerms = (terms: string[]) =>
+      (editor.storage.searchAndReplace.lastSearchTerms = [...terms]);
+    const setLastWholeWord = (t: boolean) =>
+      (editor.storage.searchAndReplace.lastWholeWord = t);
    const setLastCaseSensitive = (t: boolean) =>
      (editor.storage.searchAndReplace.lastCaseSensitive = t);
    const setLastResultIndex = (t: number) =>
@@ -425,37 +459,47 @@ export const SearchAndReplace = Extension.create<
            const storage = editor.storage.searchAndReplace;
            if (!storage) return oldState;
            const {
-              searchTerm,
-              lastSearchTerm,
-              caseSensitive,
+              searchTerms,
              lastCaseSensitive,
+              lastSearchTerms,
+              caseSensitive,
+              wholeWord,
+              lastWholeWord,
              resultIndex,
              lastResultIndex,
            } = storage;

            if (
              !docChanged &&
-              lastSearchTerm === searchTerm &&
+              searchTerms.length === lastSearchTerms.length &&
+              searchTerms.every((term, index) => term === lastSearchTerms[index]) &&
              lastCaseSensitive === caseSensitive &&
+              lastWholeWord === wholeWord &&
              lastResultIndex === resultIndex
            )
              return oldState;

-            setLastSearchTerm(searchTerm);
+            setLastSearchTerms(searchTerms);
            setLastCaseSensitive(caseSensitive);
+            setLastWholeWord(wholeWord);
            setLastResultIndex(resultIndex);

-            if (!searchTerm) {
+            if (searchTerms.length === 0) {
              editor.storage.searchAndReplace.results = [];
              return DecorationSet.empty;
            }

            const { decorationsToReturn, results } = processSearches(
-              doc,
-              getRegex(searchTerm, disableRegex, caseSensitive),
-              searchResultClass,
-              resultIndex,
-            );
+            doc,
+              getRegex(
+                searchTerms,
+                disableRegex,
+                caseSensitive,
+                wholeWord,
+              ),
+            searchResultClass,
+            resultIndex,
+          );

            editor.storage.searchAndReplace.results = results;