upd(wysiwyg): add search and replace functionality to wysiwyg mode [1]

d3m1d0v · d3m1d0v · commit 9b3fe5d2ec3c · 2025-11-24T18:18:10.000+03:00
diff --git a/src/extensions/behavior/Search/FocusManager.ts b/src/extensions/behavior/Search/FocusManager.ts
@@ -0,0 +1,16 @@
+export class FocusManager {
+    #doc: Document;
+    #previousFocused: HTMLElement | null = null;
+
+    constructor(doc: Document = document) {
+        this.#doc = doc;
+    }
+
+    storeFocus() {
+        this.#previousFocused = this.#doc.activeElement as HTMLElement | null;
+    }
+
+    restoreFocus(options?: FocusOptions) {
+        this.#previousFocused?.focus?.(options);
+    }
+}
diff --git a/src/extensions/behavior/Search/SearchViewPlugin.ts b/src/extensions/behavior/Search/SearchViewPlugin.ts
@@ -2,24 +2,40 @@ import {
     SearchQuery,
     findNext,
     findPrev,
+    getMatchHighlights,
     getSearchState,
     replaceAll,
     replaceNext,
     setSearchState,
 } from 'prosemirror-search';
 
 import {keydownHandler} from '#pm/keymap';
-import {type Command, Plugin, PluginKey, type PluginView} from '#pm/state';
+import {
+    type Command,
+    type EditorState,
+    Plugin,
+    PluginKey,
+    type PluginView,
+    type Transaction,
+} from '#pm/state';
 import type {EditorView} from '#pm/view';
 import {debounce} from 'src/lodash';
-import {type SearchPopupProps, renderSearchPopup} from 'src/search/SearchPopup';
+import {type SearchCounter, type SearchPopupProps, renderSearchPopup} from 'src/search';
 
 import {getReactRendererFromState} from '../ReactRenderer';
+import {hideSelectionMenu} from '../SelectionContext';
+
+import {FocusManager} from './FocusManager';
 
-import 'prosemirror-search/style/search.css';
+import './search-plugin.scss';
 
 const pluginKey = new PluginKey<SearchViewState>('search-view');
 
+const SearchClassName = {
+    Match: 'ProseMirror-search-match',
+    ActiveMatch: 'ProseMirror-active-search-match',
+};
+
 type TrMeta = {open: false} | {open: true; search: string};
 type SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];
 
@@ -28,7 +44,12 @@ const openSearch: Command = (state, dispatch) => {
     if (!pluginState?.open && dispatch) {
         const search = state.doc.textBetween(state.selection.from, state.selection.to, ' ');
         const meta: TrMeta = {open: true, search};
-        dispatch(setSearchState(state.tr.setMeta(pluginKey, meta), new SearchQuery({search})));
+        dispatch(
+            setSearchState(
+                hideSelectionMenu(state.tr.setMeta(pluginKey, meta)),
+                new SearchQuery({search}),
+            ),
+        );
     }
     return true;
 };
@@ -84,7 +105,9 @@ export const searchViewPlugin = (params: SearchViewPluginParams) => {
 class SeachPluginView implements PluginView {
     private readonly _view: EditorView;
     private readonly _renderer;
+    private readonly _focusManager: FocusManager;
 
+    private _counter: SearchCounter;
     private _viewState: SearchViewState | undefined;
     private _searchState: ReturnType<typeof getSearchState>;
 
@@ -95,18 +118,26 @@ class SeachPluginView implements PluginView {
         this._view = view;
         this._viewState = pluginKey.getState(view.state);
         this._searchState = getSearchState(view.state);
+        this._counter = getCounter(view.state);
 
         this._renderer = this._createRenderer(params);
+        this._focusManager = new FocusManager(view.dom.ownerDocument);
 
         this._onSearchChangeDebounced = debounce(this._handleSearchChange.bind(this));
         this._onReplacementChangeDebounced = debounce(this._handleReplacementChange.bind(this));
     }
 
     update() {
+        const counter = getCounter(this._view.state);
         const newViewState = pluginKey.getState(this._view.state);
         console.log('searchViewPlugin view update', {newViewState});
         // const newSearchState = getSearchState(view.state);
-        if (newViewState !== this._viewState) {
+        if (
+            newViewState !== this._viewState ||
+            counter.total !== this._counter.total ||
+            counter.current !== this._counter.current
+        ) {
+            this._counter = counter;
             this._viewState = newViewState;
             this._searchState = getSearchState(this._view.state);
             console.log('searchViewPlugin view update rerender', {
@@ -139,6 +170,7 @@ class SeachPluginView implements PluginView {
             return renderSearchPopup({
                 anchor,
                 open: viewState.open,
+                counter: this._counter,
                 initial: searchState.query,
                 onClose: this._onClose,
                 onSearchPrev: this._onSearchPrev,
@@ -196,29 +228,25 @@ class SeachPluginView implements PluginView {
     };
 
     private _onSearchPrev = () => {
-        // this._view.focus();
         this._onSearchChangeDebounced.flush();
-        findPrev(this._view.state, this._view.dispatch);
-        // this._scrollToSelection();
+        this._preserveFocus(wrapCommand(findPrev, hideSelectionMenu));
     };
 
     private _onSearchNext = () => {
-        // this._view.focus();
         this._onSearchChangeDebounced.flush();
-        findNext(this._view.state, this._view.dispatch);
-        // this._scrollToSelection();
+        this._preserveFocus(wrapCommand(findNext, hideSelectionMenu));
     };
 
     private _onReplaceNext = () => {
         this._onSearchChangeDebounced.flush();
         this._onReplacementChangeDebounced.flush();
-        replaceNext(this._view.state, this._view.dispatch);
+        this._preserveFocus(wrapCommand(replaceNext, hideSelectionMenu));
     };
 
     private _onReplaceAll = () => {
         this._onSearchChangeDebounced.flush();
         this._onReplacementChangeDebounced.flush();
-        replaceAll(this._view.state, this._view.dispatch);
+        this._preserveFocus(wrapCommand(replaceAll, hideSelectionMenu));
     };
 
     private _onConfigChange: SearchPopupProps['onConfigChange'] = (config) => {
@@ -229,7 +257,38 @@ class SeachPluginView implements PluginView {
         });
     };
 
-    // private _scrollToSelection() {
-    //     this._view.dispatch(this._view.state.tr.scrollIntoView());
-    // }
+    private _preserveFocus(command: Command) {
+        this._focusManager.storeFocus();
+        this._view.focus();
+        command(this._view.state, this._view.dispatch, this._view);
+        this._focusManager.restoreFocus({preventScroll: true});
+    }
+}
+
+function wrapCommand(command: Command, wrapper: (tr: Transaction) => void): Command {
+    return (state, dispatch, view) => {
+        return command(
+            state,
+            dispatch
+                ? (tr) => {
+                      wrapper(tr);
+                      return dispatch(tr);
+                  }
+                : undefined,
+            view,
+        );
+    };
+}
+
+function getCounter(state: EditorState): SearchCounter {
+    const decoSet = getMatchHighlights(state);
+    const searchDecos = decoSet.find(undefined, undefined, () => true);
+    const activeIndex = searchDecos.findIndex((deco) => {
+        const d = deco as {type?: {attrs?: Record<string, any>}};
+        return d.type?.attrs?.class === SearchClassName.ActiveMatch;
+    });
+    return {
+        total: searchDecos.length,
+        current: activeIndex + 1,
+    };
 }
diff --git a/src/extensions/behavior/Search/search-plugin.scss b/src/extensions/behavior/Search/search-plugin.scss
@@ -0,0 +1,7 @@
+.ProseMirror-search-match {
+    background-color: var(--g-color-base-info-light);
+}
+
+.ProseMirror-active-search-match {
+    background-color: var(--g-color-base-info-heavy);
+}
diff --git a/src/extensions/behavior/SelectionContext/index.ts b/src/extensions/behavior/SelectionContext/index.ts
@@ -8,6 +8,7 @@ import {
     type PluginSpec,
     type StateField,
     TextSelection,
+    type Transaction,
 } from 'prosemirror-state';
 // @ts-ignore // TODO: fix cjs build
 import {hasParentNode} from 'prosemirror-utils';
@@ -49,6 +50,12 @@ export const SelectionContext: ExtensionAuto<SelectionContextOptions> = (builder
     }
 };
 
+const HideMetaKey = 'hide-selection-menu';
+
+export const hideSelectionMenu = (tr: Transaction) => {
+    return tr.setMeta(HideMetaKey, true);
+};
+
 const pluginKey = new PluginKey<PluginState>('selection-context');
 
 type PluginState = {
@@ -117,7 +124,7 @@ class SelectionTooltip implements PluginSpec<PluginState> {
         return {
             init: () => ({disabled: false}),
             apply(tr) {
-                return {disabled: Boolean(tr.getMeta('hide-selection-menu'))};
+                return {disabled: Boolean(tr.getMeta(HideMetaKey))};
             },
         };
     }
diff --git a/src/markup/codemirror/search-plugin/plugin.ts b/src/markup/codemirror/search-plugin/plugin.ts
@@ -11,6 +11,7 @@ import {
     searchPanelOpen,
     setSearchQuery,
 } from '@codemirror/search';
+// import type {EditorState} from '@codemirror/state';
 import {
     type EditorView,
     type PluginValue,
@@ -19,15 +20,17 @@ import {
     keymap,
 } from '@codemirror/view';
 
+import type {MarkdownEditorMode} from 'src/bundle';
+import type {EventMap} from 'src/bundle/Editor';
+import type {RendererItem} from 'src/extensions';
+import {debounce} from 'src/lodash';
 import {renderSearchPopup} from 'src/search';
+import type {Receiver} from 'src/utils';
 
-import type {MarkdownEditorMode} from '../../../bundle';
-import type {EventMap} from '../../../bundle/Editor';
-import type {RendererItem} from '../../../extensions';
-import {debounce} from '../../../lodash';
-import type {Receiver} from '../../../utils';
 import {ReactRendererFacet} from '../react-facet';
 
+import {searchTheme} from './theme';
+
 type SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];
 
 const INPUT_DELAY = 200;
@@ -46,6 +49,7 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
 
             anchor: HTMLElement | null;
             renderer: RendererItem | null;
+            // counter: SearchCounter;
             searchConfig: SearchQueryConfig = {
                 search: '',
                 caseSensitive: false,
@@ -62,6 +66,7 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                 this.renderer = null;
                 this.params = params;
                 this.receiver = params.receiver;
+                // this.counter = getCounter(view.state);
 
                 this.handleClose = this.handleClose.bind(this);
                 this.handleChange = this.handleChange.bind(this);
@@ -84,13 +89,15 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
 
                 if (isPanelOpen && !this.renderer) {
                     const initial = getSearchQuery(update.state);
+                    // this.counter = getCounter(update.state);
                     this.anchor = document.querySelector(this.params.anchorSelector);
                     this.renderer = this.view.state
                         .facet(ReactRendererFacet)
                         .createItem('cm-search', () =>
                             renderSearchPopup({
                                 initial,
                                 open: true,
+                                // counter: this.counter,
                                 anchor: this.anchor,
                                 onQueryChange: this.handleChange,
                                 onClose: this.handleClose,
@@ -102,6 +109,7 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                             }),
                         );
                 } else if (!isPanelOpen && this.renderer) {
+                    // this.counter = getCounter(update.state);
                     this.renderer?.remove();
                     this.renderer = null;
                 }
@@ -165,6 +173,7 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
         {
             provide: () => [
                 keymap.of(searchKeymap),
+                searchTheme,
                 search({
                     createPanel: () => ({
                         // Create an empty search panel
@@ -174,3 +183,28 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
             ],
         },
     );
+
+// function getCounter(state: EditorState): SearchCounter {
+//     const query = getSearchQuery(state);
+//     const cursor = query.getCursor(state);
+
+//     let current = -1;
+//     const matches: {from: number; to: number}[] = [];
+//     (() => {
+//         let res = cursor.next();
+//         let idx = 0;
+//         while (!res.done) {
+//             matches.push(res.value);
+
+//             const a = state.doc.slice(res.value.from, res.value.to).iter()
+
+//             idx++;
+//             res = cursor.next();
+//         }
+//     })();
+
+//     return {
+//         current: 0,
+//         total: matches.length,
+//     };
+// }
diff --git a/src/markup/codemirror/search-plugin/theme.ts b/src/markup/codemirror/search-plugin/theme.ts
@@ -0,0 +1,12 @@
+import {EditorView} from '#cm/view';
+
+export const searchTheme = EditorView.baseTheme({
+    '&light, &dark': {
+        '& .cm-searchMatch': {
+            backgroundColor: 'var(--g-color-base-info-light)',
+        },
+        '& .cm-searchMatch-selected': {
+            backgroundColor: 'var(--g-color-base-info-heavy)',
+        },
+    },
+});
diff --git a/src/search/SearchCard.tsx b/src/search/SearchCard.tsx
