feat(wysiwyg): add search and replace functionality to wysiwyg mode

Author: d3m1d0v

package-lock.json

@@ -208,6 +208,7 @@
     "prosemirror-keymap": "^1.2.2",
     "prosemirror-model": "^1.24.1",
     "prosemirror-schema-list": "^1.5.0",
+    "prosemirror-search": "^1.1.0",
     "prosemirror-state": "^1.4.3",
     "prosemirror-test-builder": "^1.1.1",
     "prosemirror-transform": "^1.10.2",

package.json

@@ -420,7 +420,7 @@ MarkdownEditorView.displayName = 'MarkdownEditorView';
 interface MarkupSearchAnchorProps extends Pick<EditorSettingsProps, 'mode'> {}
 
 const MarkupSearchAnchor: React.FC<MarkupSearchAnchorProps> = ({mode}) => (
-    <>{mode === 'markup' && <div className="g-md-search-anchor"></div>}</>
+    <div className={`g-md-search-${mode}-anchor`}></div>
 );
 
 function Settings(props: EditorSettingsProps & {stickyToolbar: boolean}) {

src/bundle/MarkdownEditorView.tsx

@@ -73,6 +73,7 @@ export const BundlePreset: ExtensionAuto<BundlePresetOptions> = (builder, opts)
             },
         },
         cursor: {dropOptions: dropCursor},
+        search: {anchorSelector: '.g-md-search-wysiwyg-anchor'},
         clipboard: {pasteFileHandler: opts.fileUploadHandler, ...opts.clipboard},
         selectionContext: {config: wSelectionMenuConfigByPreset.zero, ...opts.selectionContext},
         commandMenu: {actions: wCommandMenuConfigByPreset.zero, ...opts.commandMenu},

src/bundle/wysiwyg-preset.ts

@@ -0,0 +1,11 @@
+import {search} from 'prosemirror-search';
+
+import type {ExtensionAuto} from '#core';
+
+import {type SearchViewPluginParams, searchViewPlugin} from './SearchViewPlugin';
+
+export type SearchOptions = Pick<SearchViewPluginParams, 'anchorSelector'>;
+
+export const Search: ExtensionAuto<SearchOptions> = (builder, opts) => {
+    builder.addPlugin(() => [search(), searchViewPlugin(opts)]);
+};

src/extensions/behavior/Search/Search.ts

@@ -0,0 +1,215 @@
+import {SearchQuery, getSearchState, setSearchState} from 'prosemirror-search';
+
+import {type Command, Plugin, type PluginView} from '#pm/state';
+import type {EditorView} from '#pm/view';
+import {debounce} from 'src/lodash';
+import {type SearchCounter, type SearchPopupProps, renderSearchPopup} from 'src/search';
+
+import {getReactRendererFromState} from '../ReactRenderer';
+
+import {closeSearch, findNext, findPrev, replaceAll, replaceNext} from './commands';
+import {pluginKey} from './const';
+import {searchKeyHandler} from './key-handler';
+import type {SearchViewState} from './types';
+import {startTracking} from './utils/connect-tracker';
+import {FocusManager} from './utils/focus-manager';
+import {getCounter} from './utils/search-counter';
+
+import './search-plugin.scss';
+
+type SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];
+
+export interface SearchViewPluginParams {
+    anchorSelector: string;
+}
+
+export const searchViewPlugin = (params: SearchViewPluginParams) => {
+    return new Plugin<SearchViewState>({
+        key: pluginKey,
+        props: {
+            handleKeyDown: searchKeyHandler,
+        },
+        state: {
+            init: () => ({open: false}),
+            apply(tr, value, _oldState, _newState) {
+                const newValue = tr.getMeta(pluginKey) as SearchViewState | undefined;
+                if (typeof newValue === 'object') return newValue;
+                return value;
+            },
+        },
+        view(view) {
+            return new SeachPluginView(view, params);
+        },
+    });
+};
+
+class SeachPluginView implements PluginView {
+    private readonly _view: EditorView;
+    private readonly _renderer;
+    private readonly _focusManager: FocusManager;
+    private readonly _viewDomTrackerDispose;
+
+    private _counter: SearchCounter;
+    private _isDomConnected: boolean;
+    private _viewState: SearchViewState | undefined;
+    private _searchState: ReturnType<typeof getSearchState>;
+
+    private readonly _onSearchChangeDebounced;
+    private readonly _onReplacementChangeDebounced;
+
+    constructor(view: EditorView, params: SearchViewPluginParams) {
+        this._view = view;
+        this._viewState = pluginKey.getState(view.state);
+        this._searchState = getSearchState(view.state);
+        this._counter = getCounter(view.state);
+        this._isDomConnected = view.dom.ownerDocument.contains(view.dom);
+
+        this._renderer = this._createRenderer(params);
+        this._focusManager = new FocusManager(view.dom.ownerDocument);
+        this._viewDomTrackerDispose = startTracking(view.dom, {
+            onConnect: this._onEditorViewDomConnected,
+            onDisconnect: this._onEditorViewDomDisconnected,
+        });
+
+        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);
+        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);
+            this._renderer.rerender();
+        }
+    }
+
+    destroy() {
+        this._onSearchChangeDebounced.cancel();
+        this._onReplacementChangeDebounced.cancel();
+        this._renderer.remove();
+        this._viewDomTrackerDispose();
+    }
+
+    private _onEditorViewDomConnected = () => {
+        this._isDomConnected = true;
+        this._renderer.rerender();
+    };
+
+    private _onEditorViewDomDisconnected = () => {
+        this._isDomConnected = false;
+        this._onClose();
+    };
+
+    private _createRenderer(params: Pick<SearchViewPluginParams, 'anchorSelector'>) {
+        return getReactRendererFromState(this._view.state).createItem('search-view', () => {
+            const {
+                _viewState: viewState,
+                _searchState: searchState,
+                _isDomConnected: domConnected,
+            } = this;
+
+            if (!domConnected || !viewState?.open || !searchState) return null;
+
+            const anchor = this._view.dom.ownerDocument.querySelector(params.anchorSelector);
+
+            return renderSearchPopup({
+                anchor,
+                open: viewState.open,
+                counter: this._counter,
+                initial: searchState.query,
+                onClose: this._onClose,
+                onSearchPrev: this._onSearchPrev,
+                onSearchNext: this._onSearchNext,
+                onReplaceNext: this._onReplaceNext,
+                onReplaceAll: this._onReplaceAll,
+                onConfigChange: this._onConfigChange,
+                onQueryChange: this._onSearchChangeDebounced,
+                onReplacementChange: this._onReplacementChangeDebounced,
+            });
+        });
+    }
+
+    private _handleSearchChange(value: string) {
+        this._updateSearchState({search: value});
+    }
+
+    private _handleReplacementChange(value: string) {
+        this._updateSearchState({replace: value});
+    }
+
+    private _updateSearchState(config: Partial<SearchQueryConfig>) {
+        const {state, dispatch} = this._view;
+        let prevConfig: SearchQueryConfig = {search: ''};
+
+        const prevSearchState = getSearchState(state);
+        if (prevSearchState) {
+            prevConfig = {
+                search: prevSearchState.query.search,
+                caseSensitive: prevSearchState.query.caseSensitive,
+                wholeWord: prevSearchState.query.wholeWord,
+                regexp: prevSearchState.query.regexp,
+                replace: prevSearchState.query.replace,
+            };
+        }
+
+        dispatch(
+            setSearchState(
+                state.tr,
+                new SearchQuery({
+                    ...prevConfig,
+                    ...config,
+                }),
+            ),
+        );
+    }
+
+    private _onClose = () => {
+        this._onSearchChangeDebounced.cancel();
+        this._onReplacementChangeDebounced.cancel();
+        closeSearch(this._view.state, this._view.dispatch);
+        this._view.focus();
+    };
+
+    private _onSearchPrev = () => {
+        this._onSearchChangeDebounced.flush();
+        this._preserveFocus(findPrev);
+    };
+
+    private _onSearchNext = () => {
+        this._onSearchChangeDebounced.flush();
+        this._preserveFocus(findNext);
+    };
+
+    private _onReplaceNext = () => {
+        this._onSearchChangeDebounced.flush();
+        this._onReplacementChangeDebounced.flush();
+        this._preserveFocus(replaceNext);
+    };
+
+    private _onReplaceAll = () => {
+        this._onSearchChangeDebounced.flush();
+        this._onReplacementChangeDebounced.flush();
+        this._preserveFocus(replaceAll);
+    };
+
+    private _onConfigChange: SearchPopupProps['onConfigChange'] = (config) => {
+        this._updateSearchState({
+            wholeWord: config.wholeWord,
+            caseSensitive: config.caseSensitive,
+        });
+    };
+
+    private _preserveFocus(command: Command) {
+        this._focusManager.storeFocus();
+        this._view.focus();
+        command(this._view.state, this._view.dispatch, this._view);
+        this._focusManager.restoreFocus({preventScroll: true});
+    }
+}

src/extensions/behavior/Search/SearchViewPlugin.ts

@@ -0,0 +1,57 @@
+import {
+    SearchQuery,
+    findNext as findNextSearch,
+    findPrev as findPrevSearch,
+    getSearchState,
+    replaceAll as replaceAllSearch,
+    replaceNext as replaceNextSearch,
+    setSearchState,
+} from 'prosemirror-search';
+
+import type {Command} from '#pm/state';
+
+import {hideSelectionMenu} from '../SelectionContext';
+
+import {pluginKey} from './const';
+import type {SearchViewState} from './types';
+import {wrapCommand} from './utils/wrap-command';
+
+export const findNext = wrapCommand(findNextSearch, hideSelectionMenu);
+export const findPrev = wrapCommand(findPrevSearch, hideSelectionMenu);
+export const replaceNext = wrapCommand(replaceNextSearch, hideSelectionMenu);
+export const replaceAll = wrapCommand(replaceAllSearch, hideSelectionMenu);
+
+export const openSearch: Command = (state, dispatch) => {
+    if (dispatch) {
+        const searchState = getSearchState(state);
+        const search = state.doc.textBetween(state.selection.from, state.selection.to, ' ');
+        const meta: SearchViewState = {open: true};
+        dispatch(
+            setSearchState(
+                hideSelectionMenu(state.tr.setMeta(pluginKey, meta)),
+                new SearchQuery({
+                    ...(searchState
+                        ? {
+                              regexp: searchState.query.regexp,
+                              replace: searchState.query.replace,
+                              literal: searchState.query.literal,
+                              wholeWord: searchState.query.wholeWord,
+                              caseSensitive: searchState.query.caseSensitive,
+                              filter: searchState.query.filter || undefined,
+                          }
+                        : undefined),
+                    search,
+                }),
+            ),
+        );
+    }
+    return true;
+};
+
+export const closeSearch: Command = (state, dispatch) => {
+    if (dispatch) {
+        const meta: SearchViewState = {open: false};
+        dispatch(setSearchState(state.tr.setMeta(pluginKey, meta), new SearchQuery({search: ''})));
+    }
+    return true;
+};

src/extensions/behavior/Search/commands.ts

@@ -0,0 +1,10 @@
+import {PluginKey} from '#pm/state';
+
+import type {SearchViewState} from './types';
+
+export const SearchClassName = {
+    Match: 'ProseMirror-search-match',
+    ActiveMatch: 'ProseMirror-active-search-match',
+} as const;
+
+export const pluginKey = new PluginKey<SearchViewState>('search-view');

src/extensions/behavior/Search/const.ts

@@ -0,0 +1 @@
+export * from './Search';

src/extensions/behavior/Search/index.ts

@@ -0,0 +1,12 @@
+import {keydownHandler} from '#pm/keymap';
+
+import {closeSearch, findNext, findPrev, openSearch} from './commands';
+
+export const searchKeyHandler = keydownHandler({
+    'Mod-f': openSearch,
+    Escape: closeSearch,
+    F3: findNext,
+    'Shift-F3': findPrev,
+    'Mod-g': findNext,
+    'Shift-Mod-g': findPrev,
+});