fix(markup): show initial search state in search popup (#570)

Author: d3m1d0v

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

@@ -3,6 +3,7 @@ import {
     closeSearchPanel,
     findNext,
     findPrevious,
+    getSearchQuery,
     search,
     searchKeymap,
     searchPanelOpen,
@@ -19,15 +20,7 @@ import {ReactRendererFacet} from '../react-facet';
 
 import {renderSearchPopup} from './view/SearchPopup';
 
-interface SearchQueryParams {
-    search: string;
-    caseSensitive?: boolean;
-    literal?: boolean;
-    regexp?: boolean;
-    replace?: string;
-    valid?: boolean;
-    wholeWord?: boolean;
-}
+type SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];
 
 const INPUT_DELAY = 200;
 
@@ -45,14 +38,14 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
 
             anchor: HTMLElement | null;
             renderer: RendererItem | null;
-            searchQuery: SearchQueryParams = {
+            searchConfig: SearchQueryConfig = {
                 search: '',
                 caseSensitive: false,
                 wholeWord: false,
             };
             receiver: Receiver<EventMap> | undefined;
 
-            setViewSearchWithDelay: (config: Partial<SearchQueryParams>) => void;
+            setViewSearchWithDelay: (config: Partial<SearchQueryConfig>) => void;
 
             constructor(view: EditorView) {
                 this.view = view;
@@ -79,11 +72,13 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                 const isPanelOpen = searchPanelOpen(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,
@@ -105,13 +100,13 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                 this.receiver?.off('change-editor-mode', this.handleEditorModeChange);
             }
 
-            setViewSearch(config: Partial<SearchQueryParams>) {
-                this.searchQuery = {
-                    ...this.searchQuery,
+            setViewSearch(config: Partial<SearchQueryConfig>) {
+                this.searchConfig = {
+                    ...this.searchConfig,
                     ...config,
                 };
                 const searchQuery = new SearchQuery({
-                    ...this.searchQuery,
+                    ...this.searchConfig,
                 });
 
                 this.view.dispatch({effects: setSearchQuery.of(searchQuery)});
@@ -140,17 +135,8 @@ export const SearchPanelPlugin = (params: SearchPanelPluginParams) =>
                 findPrevious(this.view);
             }
 
-            handleSearchConfigChange({
-                isCaseSensitive,
-                isWholeWord,
-            }: {
-                isCaseSensitive?: boolean;
-                isWholeWord?: boolean;
-            }) {
-                this.setViewSearch({
-                    caseSensitive: isCaseSensitive,
-                    wholeWord: isWholeWord,
-                });
+            handleSearchConfigChange(config: Partial<SearchQueryConfig>) {
+                this.setViewSearch(config);
             }
         },
         {

src/markup/codemirror/search-plugin/view/SearchPopup.tsx

@@ -1,15 +1,16 @@
-import React, {ChangeEvent, useRef, useState} from 'react';
+import React, {useRef, useState} from 'react';
 
+import type {SearchQuery} from '@codemirror/search';
 import {ChevronDown, ChevronUp, Xmark} from '@gravity-ui/icons';
 import {
     Button,
     Card,
     Checkbox,
     Icon,
-    PopoverAnchorRef,
+    type PopoverAnchorRef,
     Popup,
     TextInput,
-    TextInputProps,
+    type TextInputProps,
     sp,
 } from '@gravity-ui/uikit';
 
@@ -19,12 +20,11 @@ import {enterKeyHandler} from '../../../../utils/handlers';
 
 import './SearchPopup.scss';
 
-interface SearchConfig {
-    isCaseSensitive: boolean;
-    isWholeWord: boolean;
-}
+type SearchInitial = Pick<SearchQuery, 'search' | 'caseSensitive' | 'wholeWord'>;
+type SearchConfig = Pick<SearchInitial, 'caseSensitive' | 'wholeWord'>;
 
 interface SearchCardProps {
+    initial: SearchInitial;
     onSearchKeyDown?: (query: string) => void;
     onChange?: (query: string) => void;
     onClose?: (query: string) => void;
@@ -36,28 +36,26 @@ interface SearchCardProps {
 const b = cn('search-card');
 
 const noop = () => {};
+const inverse = (val: boolean) => !val;
 
 export const SearchCard: React.FC<SearchCardProps> = ({
+    initial,
     onChange = noop,
     onClose = noop,
     onSearchPrev = noop,
     onSearchNext = noop,
     onConfigChange = noop,
 }) => {
-    const [query, setQuery] = useState<string>('');
-    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
-    const [isWholeWord, setIsWholeWord] = useState<boolean>(false);
+    const [query, setQuery] = useState<string>(initial.search);
+    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(initial.caseSensitive);
+    const [isWholeWord, setIsWholeWord] = useState<boolean>(initial.wholeWord);
     const textInputRef = useRef<HTMLInputElement>(null);
 
     const setInputFocus = () => {
         textInputRef.current?.focus();
     };
 
-    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
-        const {
-            target: {value},
-        } = event;
-
+    const handleInputChange = (value: string) => {
         setQuery(value);
         onChange(value);
     };
@@ -80,19 +78,19 @@ export const SearchCard: React.FC<SearchCardProps> = ({
 
     const handleIsCaseSensitive = () => {
         onConfigChange({
-            isCaseSensitive: !isCaseSensitive,
-            isWholeWord,
+            caseSensitive: !isCaseSensitive,
+            wholeWord: isWholeWord,
         });
-        setIsCaseSensitive((isCaseSensitive) => !isCaseSensitive);
+        setIsCaseSensitive(inverse);
         setInputFocus();
     };
 
     const handleIsWholeWord = () => {
         onConfigChange({
-            isCaseSensitive,
-            isWholeWord: !isWholeWord,
+            caseSensitive: isCaseSensitive,
+            wholeWord: !isWholeWord,
         });
-        setIsWholeWord((isWholeWord) => !isWholeWord);
+        setIsWholeWord(inverse);
         setInputFocus();
     };
 
@@ -112,7 +110,7 @@ export const SearchCard: React.FC<SearchCardProps> = ({
                 size="s"
                 autoFocus
                 onKeyPress={handleSearchKeyPress}
-                onChange={handleInputChange}
+                onUpdate={handleInputChange}
                 value={query}
                 endContent={
                     <>
@@ -140,14 +138,10 @@ export const SearchCard: React.FC<SearchCardProps> = ({
     );
 };
 
-export interface SearchPopupProps {
+export interface SearchPopupProps extends SearchCardProps {
+    open: boolean;
     anchor: HTMLElement;
-    onChange: (query: string) => void;
     onClose: () => void;
-    onSearchNext: () => void;
-    onSearchPrev: () => void;
-    onConfigChange: (config: SearchConfig) => void;
-    open: boolean;
 }
 
 export const SearchPopup: React.FC<SearchPopupProps> = ({open, anchor, onClose, ...props}) => {