moved custom search to components folder (#5750)

* moved custom search to components folder

* renamed custom search

---------

Co-authored-by: Sid <siddharth@usebruno.com>

packages/bruno-app/src/components/CodeEditor/CustomSearch/StyledWrapper.js

@@ -1,99 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .bruno-search-bar {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    z-index: 20;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    padding: 0 2px;
-    min-height: 36px;
-    background: ${(props) => props.theme.sidebar.search.bg} !important;
-    border-radius: 4px;
-    border: 1px solid ${(props) => props.theme.sidebar.search.bg} !important;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    width: auto;
-    min-width: 180px;
-    max-width: 320px;
-  }
-
-  .bruno-search-bar input {
-    min-width: 80px;
-    background: transparent;
-    color: inherit;
-    border: none;
-    outline: none;
-    padding: 1px 2px;
-    font-size: 13px;
-    margin: 0 1px;
-    height: 28px;
-  }
-
-  .searchbar-icon-btn {
-    background: none;
-    border: none;
-    padding: 0 1px;
-    margin: 0 1px;
-    cursor: pointer;
-    color: #aaa;
-    border-radius: 3px;
-    height: 18px;
-    width: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .searchbar-result-count {
-    min-width: 28px;
-    text-align: center;
-    font-size: 11px;
-    color: #aaa;
-    margin: 0 8px 0 1px; 
-    white-space: nowrap;
-  }
-
-  .bruno-search-bar.compact {
-    background: ${(props) => props.theme.codemirror.bg};
-    color: ${(props) => props.theme.codemirror.text || props.theme.text};
-    border: none;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-    border-radius: 4px;
-    padding: 1px 3px;
-    min-height: 22px;
-    display: flex;
-    align-items: center;
-    gap: 0;
-  }
-
-  .bruno-search-bar input {
-    background: transparent;
-    color: inherit;
-    border: none;
-    outline: none;
-    font-size: 13px;
-    padding: 1px 2px;
-    min-width: 80px;
-  }
-
-  .searchbar-icon-btn:focus {
-    outline: 1px solid ${(props) => props.theme.codemirror.border};
-  }
-
-  .bruno-search-bar, .bruno-search-bar input {
-    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
-  }
-
-  .cm-search-line-highlight {
-    background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
-  }
-
-  .searchbar-icon-btn.active {
-    color: #f39c12 !important;
-  }
-`;
-
-export default StyledWrapper;

packages/bruno-app/src/components/CodeEditor/CustomSearch/index.js

@@ -1,202 +0,0 @@
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
-import debounce from 'lodash/debounce';
-import { IconRegex, IconArrowUp, IconArrowDown, IconX, IconLetterCase, IconLetterW } from '@tabler/icons';
-import ToolHint from 'components/ToolHint';
-import StyledWrapper from './StyledWrapper';
-import useDebounce from 'hooks/useDebounce';
-
-function escapeRegExp(string) {
-  return string.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');
-}
-
-const CustomSearch = ({ visible, editor, onClose }) => {
-  const [searchText, setSearchText] = useState('');
-  const [regex, setRegex] = useState(false);
-  const [caseSensitive, setCaseSensitive] = useState(false);
-  const [wholeWord, setWholeWord] = useState(false);
-  const [matchIndex, setMatchIndex] = useState(0);
-  const [matchCount, setMatchCount] = useState(0);
-
-  const searchMarks = useRef([]);
-  const searchLineHighlight = useRef(null);
-  const searchMatches = useRef([]);
-
-  const debouncedSearchText = useDebounce(searchText, 150);
-
-  const memoizedMatches = useMemo(() => {
-    if (!editor || !visible) return [];
-    if (!debouncedSearchText) return [];
-
-    try {
-      let query, options = {};
-      if (regex) {
-        try {
-          query = new RegExp(debouncedSearchText, caseSensitive ? 'g' : 'gi');
-        } catch {
-          return [];
-        }
-      } else if (wholeWord) {
-        const escaped = escapeRegExp(debouncedSearchText);
-        query = new RegExp(`\\b${escaped}\\b`, caseSensitive ? 'g' : 'gi');
-      } else {
-        query = debouncedSearchText;
-        options = { caseFold: !caseSensitive };
-      }
-
-      const cursor = editor.getSearchCursor(query, { line: 0, ch: 0 }, options);
-      const out = [];
-      while (cursor.findNext()) {
-        out.push({ from: cursor.from(), to: cursor.to() });
-      }
-      return out;
-    } catch (e) {
-      console.error('Search error:', e);
-      return [];
-    }
-  }, [editor, visible, debouncedSearchText, regex, caseSensitive, wholeWord]);
-
-  const doSearch = useCallback((newIndex = 0) => {
-    if (!editor) return;
-
-    // Clear previous marks
-    searchMarks.current.forEach((mark) => mark.clear());
-    searchMarks.current = [];
-    // Clear previous line highlight
-    if (searchLineHighlight.current !== null) {
-      editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
-      searchLineHighlight.current = null;
-    }
-
-    if (!debouncedSearchText) {
-      setMatchCount(0);
-      setMatchIndex(0);
-      searchMatches.current = [];
-      return;
-    }
-
-    try {
-      const matches = memoizedMatches;
-      let matchIndex = matches.length ? Math.max(0, Math.min(newIndex, matches.length - 1)) : 0;
-      matches.forEach((m, i) => {
-        const mark = editor.markText(m.from, m.to, {
-          className: i === matchIndex ? 'cm-search-current' : 'cm-search-match',
-          clearOnEnter: true
-        });
-        searchMarks.current.push(mark);
-      });
-
-      if (matches.length) {
-        const currentLine = matches[matchIndex].from.line;
-        editor.addLineClass(currentLine, 'wrap', 'cm-search-line-highlight');
-        searchLineHighlight.current = currentLine;
-
-        editor.scrollIntoView(matches[matchIndex].from, 100);
-        editor.setSelection(matches[matchIndex].from, matches[matchIndex].to);
-      } else {
-        searchLineHighlight.current = null;
-      }
-
-      setMatchCount(matches.length);
-      setMatchIndex(matchIndex);
-      searchMatches.current = matches;
-    } catch (e) {
-      console.error('Search error:', e);
-      setMatchCount(0);
-      setMatchIndex(0);
-      searchMatches.current = [];
-    }
-  }, [debouncedSearchText, regex, caseSensitive, wholeWord, editor, memoizedMatches]);
-
-  useEffect(() => {
-    doSearch(0, debouncedSearchText);
-  }, [debouncedSearchText, doSearch]);
-
-  const handleSearchBarClose = useCallback(() => {
-    searchMarks.current.forEach((mark) => mark.clear());
-    searchMarks.current = [];
-    if (searchLineHighlight.current !== null && editor) {
-      editor.removeLineClass(searchLineHighlight.current, 'wrap', 'cm-search-line-highlight');
-      searchLineHighlight.current = null;
-    }
-    searchMatches.current = [];
-    if (onClose) onClose();
-    // Focus the editor after closing the search bar
-    if (editor) {
-      setTimeout(() => editor.focus(), 0);
-    }
-  }, [editor, onClose]);
-
-  const handleSearchTextChange = (text) => {
-    setSearchText(text);
-    setMatchIndex(0);
-  };
-
-  const handleToggleRegex = () => {
-    setRegex((prev) => !prev);
-    setMatchIndex(0);
-    doSearch(0);
-  };
-
-  const handleToggleCase = () => {
-    setCaseSensitive((prev) => !prev);
-    setMatchIndex(0);
-    doSearch(0);
-  };
-
-  const handleToggleWholeWord = () => {
-    setWholeWord((prev) => !prev);
-    setMatchIndex(0);
-    doSearch(0);
-  };
-
-  const handleNext = () => {
-    if (!searchMatches.current || !searchMatches.current.length) return;
-    let next = (matchIndex + 1) % searchMatches.current.length;
-    setMatchIndex(next);
-    doSearch(next);
-  };
-
-  const handlePrev = () => {
-    if (!searchMatches.current || !searchMatches.current.length) return;
-    let prev = (matchIndex - 1 + searchMatches.current.length) % searchMatches.current.length;
-    setMatchIndex(prev);
-    doSearch(prev);
-  };
-
-  if (!visible) return null;
-
-  return (
-    <StyledWrapper>
-      <div className="bruno-search-bar compact">
-        <input
-          autoFocus
-          type="text"
-          value={searchText}
-          onChange={(e) => handleSearchTextChange(e.target.value)}
-          placeholder="Search..."
-          spellCheck={false}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) handleNext();
-            if (e.key === 'Enter' && e.shiftKey) handlePrev();
-            if (e.key === 'Escape') handleSearchBarClose();
-          }}
-        />
-        <span className="searchbar-result-count">{matchCount > 0 ? `${matchIndex + 1} / ${matchCount}` : '0 results'}</span>
-        <ToolHint text="Regex search" toolhintId="searchbar-regex-toolhint" place="top">
-          <button className={`searchbar-icon-btn ${regex ? 'active' : ''}`} onClick={handleToggleRegex}><IconRegex size={16} /></button>
-        </ToolHint>
-        <ToolHint text="Case sensitive" toolhintId="searchbar-case-toolhint" place="top">
-          <button className={`searchbar-icon-btn ${caseSensitive ? 'active' : ''}`} onClick={handleToggleCase}><IconLetterCase size={14} /></button>
-        </ToolHint>
-        <ToolHint text="Whole word" toolhintId="searchbar-wholeword-toolhint" place="top">
-          <button className={`searchbar-icon-btn ${wholeWord ? 'active' : ''}`} onClick={handleToggleWholeWord}><IconLetterW size={14} /></button>
-        </ToolHint>
-        <button className="searchbar-icon-btn" title="Previous" onClick={handlePrev}><IconArrowUp size={14} /></button>
-        <button className="searchbar-icon-btn" title="Next" onClick={handleNext}><IconArrowDown size={14} /></button>
-        <button className="searchbar-icon-btn" title="Close" onClick={handleSearchBarClose}><IconX size={14} /></button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default CustomSearch;

packages/bruno-app/src/components/CodeEditor/index.js

@@ -14,7 +14,7 @@ import * as jsonlint from '@prantlf/jsonlint';
 import { JSHINT } from 'jshint';
 import stripJsonComments from 'strip-json-comments';
 import { getAllVariables } from 'utils/collections';
-import CustomSearch from './CustomSearch';
+import CodeMirrorSearch from 'components/CodeMirrorSearch';
 
 const CodeMirror = require('codemirror');
 window.jsonlint = jsonlint;
@@ -267,7 +267,7 @@ export default class CodeEditor extends React.Component {
         font={this.props.font}
         fontSize={this.props.fontSize}
       >
-        <CustomSearch
+        <CodeMirrorSearch
           visible={this.state.searchBarVisible}
           editor={this.editor}
           onClose={() => this.setState({ searchBarVisible: false })}