editor: fix search scroll not working on switching editors or opening new editor (#8061)

* editor: fix search scroll not working on switching editors or opening new editor
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

* editor: initialize search right after editor is created
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

packages/editor/src/extensions/search-replace/search-replace.ts

@@ -294,7 +294,9 @@ export const SearchReplace = Extension.create<SearchOptions, SearchStorage>({
               tr.mapping.map(to)
             )
           );
-          scrollIntoView();
+
+          const domNode = this.editor.view.domAtPos(from).node;
+          scrollIntoView(domNode);
 
           this.storage.selectedIndex = nextIndex;
           tr.setMeta("selectedIndex", nextIndex);
@@ -319,7 +321,9 @@ export const SearchReplace = Extension.create<SearchOptions, SearchStorage>({
               tr.mapping.map(to)
             )
           );
-          scrollIntoView();
+
+          const domNode = this.editor.view.domAtPos(from).node;
+          scrollIntoView(domNode);
 
           this.storage.selectedIndex = prevIndex;
           tr.setMeta("selectedIndex", prevIndex);
@@ -472,14 +476,13 @@ export const SearchReplace = Extension.create<SearchOptions, SearchStorage>({
   }
 });
 
-function scrollIntoView() {
+function scrollIntoView(domNode: Node) {
   setTimeout(() => {
-    const domNode = document.querySelector(".search-result.selected");
-    if (!(domNode instanceof HTMLElement)) return;
-
-    domNode.scrollIntoView({
-      behavior: "instant",
-      block: "center"
-    });
+    if ("scrollIntoView" in domNode) {
+      (domNode as Element).scrollIntoView({
+        behavior: "instant",
+        block: "center"
+      });
+    }
   });
 }

packages/editor/src/hooks/use-editor.ts

@@ -22,6 +22,7 @@ import { DependencyList, useEffect, useMemo, useRef, useState } from "react";
 import { Editor } from "../types.js";
 import { useToolbarStore } from "../toolbar/stores/toolbar-store.js";
 import { EditorView } from "@tiptap/pm/view";
+import { useEditorSearchStore } from "../toolbar/stores/search-store.js";
 
 function useForceUpdate() {
   const [, setValue] = useState(0);
@@ -57,6 +58,13 @@ export const useEditor = (
       if (oldIsFocused && !editor.isFocused) editor.commands.focus();
       options.onCreate?.({ editor: editor });
 
+      const { searchTerm, ...searchOptions } = useEditorSearchStore.getState();
+      if (!searchOptions.isSearching) {
+        editor.commands.endSearch();
+      } else {
+        editor.commands.search(searchTerm, searchOptions);
+      }
+
       function onTransaction({ editor }: { editor: TiptapEditor }) {
         editorRef.current = editor;
         clearTimeout(updateTimeout);

packages/editor/src/toolbar/floating-menus/search-replace.tsx

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { useLayoutEffect } from "react";
 import { FloatingMenuProps } from "./types.js";
 import { SearchReplacePopup } from "../popups/search-replace.js";
 import { ResponsivePresenter } from "../../components/responsive/index.js";
@@ -28,12 +27,6 @@ export function SearchReplaceFloatingMenu(props: FloatingMenuProps) {
   const { editor } = props;
   const isSearching = useEditorSearchStore((store) => store.isSearching);
 
-  useLayoutEffect(() => {
-    const { searchTerm, ...options } = useEditorSearchStore.getState();
-    if (!options.isSearching) editor.commands.endSearch();
-    else editor.commands.search(searchTerm, options);
-  }, []);
-
   return (
     <ResponsivePresenter
       mobile="sheet"