Started highlighting the searched terms when clicking on a ProjectSearch result (#5854)

* Started highlighting the searched terms when clicking on a ProjectSearch result.

* Update jest

Author: Alexis Deschamps

src/actions/file-search.js

@@ -4,7 +4,13 @@
 
 // @flow
 
-import { find, findNext, findPrev, removeOverlay } from "../utils/editor";
+import {
+  find,
+  findNext,
+  findPrev,
+  removeOverlay,
+  searchSourceForHighlight
+} from "../utils/editor";
 import { getMatches } from "../workers/search";
 import type { ThunkArgs } from "./types";
 
@@ -35,6 +41,21 @@ export function doSearch(query: string, editor: Editor) {
   };
 }
 
+export function doSearchForHighlight(
+  query: string,
+  editor: Editor,
+  line: number,
+  ch: number
+) {
+  return async ({ getState, dispatch }: ThunkArgs) => {
+    const selectedSource = getSelectedSource(getState());
+    if (!selectedSource || !selectedSource.text) {
+      return;
+    }
+    dispatch(searchContentsForHighlight(query, editor, line, ch));
+  };
+}
+
 export function setFileSearchQuery(query: string) {
   return {
     type: "UPDATE_FILE_SEARCH_QUERY",
@@ -96,6 +117,33 @@ export function searchContents(query: string, editor: Object) {
   };
 }
 
+export function searchContentsForHighlight(
+  query: string,
+  editor: Object,
+  line: number,
+  ch: number
+) {
+  return async ({ getState, dispatch }: ThunkArgs) => {
+    const modifiers = getFileSearchModifiers(getState());
+    const selectedSource = getSelectedSource(getState());
+
+    if (
+      !query ||
+      !editor ||
+      !selectedSource ||
+      !selectedSource.text ||
+      !modifiers
+    ) {
+      return;
+    }
+
+    const ctx = { ed: editor, cm: editor.codeMirror };
+    const _modifiers = modifiers.toJS();
+
+    searchSourceForHighlight(ctx, false, query, true, _modifiers, line, ch);
+  };
+}
+
 export function traverseResults(rev: boolean, editor: Editor) {
   return async ({ getState, dispatch }: ThunkArgs) => {
     if (!editor) {

src/actions/navigation.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import { clearDocuments } from "../utils/editor";
+import { clearDocuments, removeEditor } from "../utils/editor";
 import sourceQueue from "../utils/source-queue";
 import { getSources } from "../reducers/sources";
 import { waitForMs } from "../utils/utils";
@@ -37,6 +37,7 @@ export function willNavigate(event: Object) {
     await sourceMaps.clearSourceMaps();
     clearWasmStates();
     clearDocuments();
+    removeEditor();
     clearSymbols();
     clearASTs();
     clearScopes();

src/components/Editor/index.js

@@ -53,6 +53,7 @@ import {
   getCursorLine,
   toSourceLine,
   getDocument,
+  setEditor,
   scrollToColumn,
   toEditorPosition,
   getSourceLocationFromMouseEvent,
@@ -177,6 +178,7 @@ class Editor extends PureComponent<Props, State> {
     }
 
     this.setState({ editor });
+    setEditor(editor);
     return editor;
   }
 

src/components/ProjectSearch.js

@@ -11,6 +11,7 @@ import classnames from "classnames";
 import { bindActionCreators } from "redux";
 import actions from "../actions";
 
+import { getEditor } from "../utils/editor";
 import { highlightMatches } from "../utils/project-search";
 
 import { statusType } from "../reducers/project-text-search";
@@ -31,6 +32,7 @@ import type { List } from "immutable";
 import type { Location } from "../types";
 import type { ActiveSearchType } from "../reducers/types";
 import type { StatusType } from "../reducers/project-text-search";
+type Editor = ?Object;
 
 import "./ProjectSearch.css";
 
@@ -68,7 +70,13 @@ type Props = {
   closeProjectSearch: () => void,
   searchSources: (query: string) => void,
   clearSearch: () => void,
-  selectLocation: (location: Location, tabIndex?: string) => void
+  selectLocation: (location: Location, tabIndex?: string) => void,
+  doSearchForHighlight: (
+    query: string,
+    editor: Editor,
+    line: number,
+    column: number
+  ) => void
 };
 
 function getFilePath(item: Item, index?: number) {
@@ -133,6 +141,12 @@ export class ProjectSearch extends Component<Props, State> {
 
   selectMatchItem = (matchItem: Match) => {
     this.props.selectLocation({ ...matchItem });
+    this.props.doSearchForHighlight(
+      this.state.inputValue,
+      getEditor(),
+      matchItem.line,
+      matchItem.column
+    );
   };
 
   getResults = (): Result[] => {

src/components/tests/ProjectSearch.spec.js

@@ -56,6 +56,7 @@ function render(overrides = {}, mounted = false) {
     clearSearch: jest.fn(),
     updateSearchStatus: jest.fn(),
     selectLocation: jest.fn(),
+    doSearchForHighlight: jest.fn(),
     ...overrides
   };
 

src/components/tests/__snapshots__/ProjectSearch.spec.js.snap

@@ -41,6 +41,7 @@ exports[`ProjectSearch found search results 1`] = `
   activeSearch="project"
   clearSearch={[Function]}
   closeProjectSearch={[Function]}
+  doSearchForHighlight={[Function]}
   query="match"
   results={
     Immutable.List [

src/utils/editor/index.js

@@ -19,6 +19,21 @@ import { isOriginalId } from "devtools-source-map";
 import type { AstLocation } from "../../workers/parser";
 import type { EditorPosition, EditorRange } from "../editor/types";
 import type { Location } from "../../types";
+type Editor = Object;
+
+let editor: ?Editor;
+
+export function setEditor(_editor: Editor) {
+  editor = _editor;
+}
+
+export function getEditor() {
+  return editor;
+}
+
+export function removeEditor() {
+  editor = null;
+}
 
 export function shouldShowPrettyPrint(selectedSource) {
   if (!selectedSource) {
@@ -122,21 +137,21 @@ function isVisible(codeMirror: any, top: number, left: number) {
   return inXView && inYView;
 }
 
-export function markText(editor: any, className, { start, end }: EditorRange) {
-  return editor.codeMirror.markText(
+export function markText(_editor: any, className, { start, end }: EditorRange) {
+  return _editor.codeMirror.markText(
     { ch: start.column, line: start.line },
     { ch: end.column, line: end.line },
     { className }
   );
 }
 
-export function lineAtHeight(editor, sourceId, event) {
-  const editorLine = editor.codeMirror.lineAtHeight(event.clientY);
-  return toSourceLine(sourceId, editorLine);
+export function lineAtHeight(_editor, sourceId, event) {
+  const _editorLine = _editor.codeMirror.lineAtHeight(event.clientY);
+  return toSourceLine(sourceId, _editorLine);
 }
 
-export function getSourceLocationFromMouseEvent(editor, selectedLocation, e) {
-  const { line, ch } = editor.codeMirror.coordsChar({
+export function getSourceLocationFromMouseEvent(_editor, selectedLocation, e) {
+  const { line, ch } = _editor.codeMirror.coordsChar({
     left: e.clientX,
     top: e.clientY
   });

src/utils/editor/source-search.js

@@ -157,6 +157,31 @@ function doSearch(ctx, rev, query, keepSelection, modifiers: SearchModifiers) {
   });
 }
 
+export function searchSourceForHighlight(
+  ctx: Object,
+  rev: boolean,
+  query: string,
+  keepSelection: boolean,
+  modifiers: SearchModifiers,
+  line: number,
+  ch: number
+) {
+  const { cm } = ctx;
+  if (!cm) {
+    return;
+  }
+
+  return cm.operation(function() {
+    const state = getSearchState(cm, query);
+    const isNewQuery = state.query !== query;
+    state.query = query;
+
+    updateOverlay(cm, state, query, modifiers);
+    updateCursor(cm, state, keepSelection);
+    findNextOnLine(ctx, rev, query, isNewQuery, modifiers, line, ch);
+  });
+}
+
 function getCursorPos(newQuery, rev, state) {
   if (newQuery) {
     return rev ? state.posFrom : state.posTo;
@@ -208,6 +233,28 @@ function searchNext(ctx, rev, query, newQuery, modifiers) {
   return nextMatch;
 }
 
+function findNextOnLine(ctx, rev, query, newQuery, modifiers, line, ch) {
+  const { cm, ed } = ctx;
+  cm.operation(function() {
+    const pos = { line: line - 1, ch };
+    let cursor = getSearchCursor(cm, query, pos, modifiers);
+
+    if (!cursor.find(rev) && query) {
+      cursor = getSearchCursor(cm, query, pos, modifiers);
+      if (!cursor.find(rev)) {
+        return;
+      }
+    }
+
+    // We don't want to jump the editor
+    // when we're selecting text
+    if (!cm.state.selectingText) {
+      ed.alignLine(cursor.from().line, "center");
+      cm.setSelection(cursor.from(), cursor.to());
+    }
+  });
+}
+
 /**
  * Remove overlay.
  *