diff --git a/packages/editor/src/extensions/search-replace/search-replace.ts b/packages/editor/src/extensions/search-replace/search-replace.ts index 41ed33a71..6acf330ef 100644 --- a/packages/editor/src/extensions/search-replace/search-replace.ts +++ b/packages/editor/src/extensions/search-replace/search-replace.ts @@ -294,7 +294,9 @@ export const SearchReplace = Extension.create({ 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({ 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({ } }); -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" + }); + } }); } diff --git a/packages/editor/src/hooks/use-editor.ts b/packages/editor/src/hooks/use-editor.ts index fadceb68c..1e4022b1a 100644 --- a/packages/editor/src/hooks/use-editor.ts +++ b/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); diff --git a/packages/editor/src/toolbar/floating-menus/search-replace.tsx b/packages/editor/src/toolbar/floating-menus/search-replace.tsx index 94d2641e3..2d05f4bc9 100644 --- a/packages/editor/src/toolbar/floating-menus/search-replace.tsx +++ b/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 . */ -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 (