feat: update appearance of search panel in markup mode

Author: d3m1d0v

src/bundle/MarkdownEditorView.tsx

@@ -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/i18n/search/en.json

@@ -1,8 +1,15 @@
 {
   "label_case-sensitive": "Case sensitive",
   "label_whole-word": "Whole word",
-  "title": "Search in code",
+  "title": "Search and replace",
+  "action_close": "Close",
   "action_replace": "Replace",
   "action_replace_all": "Replace all",
-  "replace_placeholder": "Replacement text"
+  "action_next": "Find next",
+  "action_prev": "Find previous",
+  "action_expand": "Expand the replacement form",
+  "title_search": "Find",
+  "title_replace": "Replace with",
+  "search_counter": "{{current}} of {{total}}",
+  "search_placeholder": "Text search"
 }

src/i18n/search/ru.json

@@ -1,8 +1,15 @@
 {
   "label_case-sensitive": "С учетом регистра",
-  "label_whole-word": "Слово целиком",
-  "title": "Найти в коде",
+  "label_whole-word": "Точное совпадение",
+  "title": "Поиск и замена",
+  "action_close": "Закрыть",
   "action_replace": "Заменить",
   "action_replace_all": "Заменить всё",
-  "replace_placeholder": "Текст замены"
+  "action_next": "Следующий",
+  "action_prev": "Предыдущий",
+  "action_expand": "Раскрыть окно замены",
+  "title_search": "Найти",
+  "title_replace": "Заменить на",
+  "search_counter": "{{current}} из {{total}}",
+  "search_placeholder": "Поиск по тексту"
 }

src/markup/codemirror/create.ts

@@ -293,7 +293,7 @@ export function createCodemirror(params: CreateCodemirrorParams) {
     if (searchPanel) {
         extensions.push(
             SearchPanelPlugin({
-                anchorSelector: '.g-md-search-anchor',
+                anchorSelector: '.g-md-search-markup-anchor',
                 receiver,
             }),
         );

src/markup/codemirror/search-plugin/plugin.ts

@@ -22,18 +22,15 @@ import {
 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/modules/search';
 import type {Receiver} from 'src/utils';
 
 import {ReactRendererFacet} from '../react-facet';
 
 import {searchTheme} from './theme';
-import {renderSearchPopup} from './view/SearchPopup';
 
 type SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];
 
-const INPUT_DELAY = 200;
-
 export interface SearchPanelPluginParams {
     anchorSelector: string;
     inputDelay?: number;
@@ -46,85 +43,70 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
             readonly view: EditorView;
             readonly params: SearchPanelPluginParams;
 
-            anchor: HTMLElement | null;
-            renderer: RendererItem | null;
-            searchConfig: SearchQueryConfig = {
-                search: '',
-                caseSensitive: false,
-                wholeWord: false,
-                replace: '',
-            };
+            renderer: RendererItem;
             receiver: Receiver<EventMap> | undefined;
 
-            setViewSearchWithDelay: (config: Partial<SearchQueryConfig>) => void;
+            panelOpened: boolean;
+            searchState: SearchQuery | null;
 
             constructor(view: EditorView) {
                 this.view = view;
-                this.anchor = null;
-                this.renderer = null;
                 this.params = params;
                 this.receiver = params.receiver;
 
+                this.panelOpened = searchPanelOpen(view.state);
+                this.searchState = getSearchQuery(view.state);
+                this.renderer = this.createRenderer();
+
                 this.handleClose = this.handleClose.bind(this);
                 this.handleChange = this.handleChange.bind(this);
                 this.handleSearchNext = this.handleSearchNext.bind(this);
                 this.handleSearchPrev = this.handleSearchPrev.bind(this);
                 this.handleReplaceNext = this.handleReplaceNext.bind(this);
                 this.handleReplaceAll = this.handleReplaceAll.bind(this);
-                this.handleSearchConfigChange = this.handleSearchConfigChange.bind(this);
                 this.handleEditorModeChange = this.handleEditorModeChange.bind(this);
 
-                this.setViewSearchWithDelay = debounce(
-                    this.setViewSearch,
-                    this.params.inputDelay ?? INPUT_DELAY,
-                );
                 this.receiver?.on('change-editor-mode', this.handleEditorModeChange);
             }
 
             update(update: ViewUpdate): void {
                 const isPanelOpen = searchPanelOpen(update.state);
+                const searchQuery = getSearchQuery(update.state);
 
-                if (isPanelOpen && !this.renderer) {
-                    const initial = getSearchQuery(update.state);
-                    this.anchor = document.querySelector(this.params.anchorSelector);
-                    this.renderer = this.view.state
-                        .facet(ReactRendererFacet)
-                        .createItem('cm-search', () =>
-                            renderSearchPopup({
-                                initial,
-                                open: true,
-                                anchor: this.anchor,
-                                onChange: this.handleChange,
-                                onClose: this.handleClose,
-                                onSearchNext: this.handleSearchNext,
-                                onSearchPrev: this.handleSearchPrev,
-                                onReplaceNext: this.handleReplaceNext,
-                                onReplaceAll: this.handleReplaceAll,
-                                onConfigChange: this.handleSearchConfigChange,
-                            }),
-                        );
-                } else if (!isPanelOpen && this.renderer) {
-                    this.renderer?.remove();
-                    this.renderer = null;
+                if (isPanelOpen !== this.panelOpened || searchQuery !== this.searchState) {
+                    this.panelOpened = isPanelOpen;
+                    this.searchState = searchQuery;
+                    this.renderer.rerender();
                 }
             }
 
             destroy() {
-                this.renderer?.remove();
-                this.renderer = null;
+                this.renderer.remove();
                 this.receiver?.off('change-editor-mode', this.handleEditorModeChange);
             }
 
-            setViewSearch(config: Partial<SearchQueryConfig>) {
-                this.searchConfig = {
-                    ...this.searchConfig,
-                    ...config,
-                };
-                const searchQuery = new SearchQuery({
-                    ...this.searchConfig,
+            createRenderer() {
+                return this.view.state.facet(ReactRendererFacet).createItem('cm-search', () => {
+                    if (!this.panelOpened || !this.searchState) return null;
+
+                    const anchor = this.view.dom.ownerDocument.querySelector(
+                        this.params.anchorSelector,
+                    );
+
+                    if (!anchor) return null;
+
+                    return renderSearchPopup({
+                        open: true,
+                        anchor: anchor,
+                        state: this.searchState,
+                        onClose: this.handleClose,
+                        onChange: this.handleChange,
+                        onSearchNext: this.handleSearchNext,
+                        onSearchPrev: this.handleSearchPrev,
+                        onReplaceNext: this.handleReplaceNext,
+                        onReplaceAll: this.handleReplaceAll,
+                    });
                 });
-
-                this.view.dispatch({effects: setSearchQuery.of(searchQuery)});
             }
 
             handleEditorModeChange({mode}: {mode: MarkdownEditorMode}) {
@@ -133,13 +115,23 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                 }
             }
 
-            handleChange(search: string) {
-                this.setViewSearchWithDelay({search});
+            handleChange(config: SearchQueryConfig) {
+                this.view.dispatch({
+                    effects: setSearchQuery.of(
+                        new SearchQuery({
+                            search: config.search,
+                            replace: config.replace,
+                            caseSensitive: config.caseSensitive,
+                            wholeWord: config.wholeWord,
+                        }),
+                    ),
+                });
             }
 
             handleClose() {
-                this.setViewSearch({search: ''});
+                this.handleChange({search: ''});
                 closeSearchPanel(this.view);
+                this.view.focus();
             }
 
             handleSearchNext() {
@@ -150,17 +142,11 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                 findPrevious(this.view);
             }
 
-            handleSearchConfigChange(config: Partial<SearchQueryConfig>) {
-                this.setViewSearch(config);
-            }
-
-            handleReplaceNext(query: string, replacement: string) {
-                this.setViewSearch({search: query, replace: replacement});
+            handleReplaceNext() {
                 replaceNext(this.view);
             }
 
-            handleReplaceAll(query: string, replacement: string) {
-                this.setViewSearch({search: query, replace: replacement});
+            handleReplaceAll() {
                 replaceAll(this.view);
             }
         },