diff --git a/packages/client/src/tiptap/core/extensions/search.ts b/packages/client/src/tiptap/core/extensions/search.ts index 37cb63d8..4f3b1cf7 100644 --- a/packages/client/src/tiptap/core/extensions/search.ts +++ b/packages/client/src/tiptap/core/extensions/search.ts @@ -3,6 +3,7 @@ import { Node as ProsemirrorNode } from 'prosemirror-model'; import { EditorState, Plugin, PluginKey } from 'prosemirror-state'; import { Decoration, DecorationSet } from 'prosemirror-view'; import scrollIntoView from 'scroll-into-view-if-needed'; +import { Editor } from 'tiptap/core'; declare module '@tiptap/core' { interface Commands { @@ -203,6 +204,8 @@ const gotoSearchResult = ({ view, tr, searchResults, searchResultCurrentClass, g return false; }; +export const ON_SEARCH_RESULTS = 'ON_SEARCH_RESULTS'; + // eslint-disable-next-line @typescript-eslint/ban-types export const SearchNReplace = Extension.create({ name: 'search', @@ -225,11 +228,13 @@ export const SearchNReplace = Extension.create({ return { setSearchTerm: (searchTerm: string) => - ({ state, dispatch }) => { + ({ state, dispatch, editor }) => { this.options.searchTerm = searchTerm; this.options.results = []; this.options.currentIndex = 0; + (editor as Editor).eventEmitter.emit(ON_SEARCH_RESULTS); + updateView(state, dispatch); return false; @@ -332,11 +337,7 @@ export const SearchNReplace = Extension.create({ searchResultClass ); extensionThis.options.results = results; - - if (results.length && searchTerm) { - extensionThis.options.onChange && extensionThis.options.onChange(); - } - + (extensionThis.editor as Editor).eventEmitter.emit(ON_SEARCH_RESULTS); if (ctx.getMeta('directDecoration')) { const { fromPos, toPos, attrs } = ctx.getMeta('directDecoration'); decorationsToReturn.push(Decoration.inline(fromPos, toPos, attrs)); diff --git a/packages/client/src/tiptap/core/menus/search/index.tsx b/packages/client/src/tiptap/core/menus/search/index.tsx index 8ec1edaa..61f1c05d 100644 --- a/packages/client/src/tiptap/core/menus/search/index.tsx +++ b/packages/client/src/tiptap/core/menus/search/index.tsx @@ -5,7 +5,7 @@ import { IsOnMobile } from 'hooks/use-on-mobile'; import { useToggle } from 'hooks/use-toggle'; import React, { useCallback, useEffect, useState } from 'react'; import { Editor } from 'tiptap/core'; -import { SearchNReplace } from 'tiptap/core/extensions/search'; +import { ON_SEARCH_RESULTS, SearchNReplace } from 'tiptap/core/extensions/search'; const { Text } = Typography; @@ -55,11 +55,11 @@ export const Search: React.FC<{ editor: Editor }> = ({ editor }) => { setResults(results); }; - searchExtension.options.onChange = listener; + editor.eventEmitter.on(ON_SEARCH_RESULTS, listener); return () => { if (!searchExtension) return; - delete searchExtension.options.onChange; + editor.eventEmitter.off(ON_SEARCH_RESULTS, listener); }; }, [editor]);