From 460a07b1a3650408a06b9e9cbd5d7bd0b8d8eac5 Mon Sep 17 00:00:00 2001
From: Caleb John <calebjohn4@gmail.com>
Date: Tue, 22 Sep 2020 06:17:51 -0600
Subject: [PATCH] Desktop: Fix missed highlighting when using the global search
 (#3717)

---
 .../NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx  | 14 +++++++++++---
 .../gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx  |  6 ++++++
 ReactNativeClient/lib/BaseApplication.js           | 10 ++++------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
index f2f5b77d7e..d214e84425 100644
--- a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
+++ b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx
@@ -37,7 +37,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 	const [renderedBody, setRenderedBody] = useState<RenderedBody>(defaultRenderedBody()); // Viewer content
 	const [webviewReady, setWebviewReady] = useState(false);
 
-	const previousRenderedBody = usePrevious(renderedBody);
+	const previousContent = usePrevious(props.content);
 	const previousSearchMarkers = usePrevious(props.searchMarkers);
 	const previousContentKey = usePrevious(props.contentKey);
 
@@ -479,7 +479,14 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 	}, [renderedBody, webviewReady]);
 
 	useEffect(() => {
-		if (props.searchMarkers !== previousSearchMarkers || renderedBody !== previousRenderedBody) {
+		if (!props.searchMarkers) return;
+
+		// If there is a currently active search, it's important to re-search the text as the user
+		// types. However this is slow for performance so we ONLY want it to happen when there is
+		// a search
+		const textChanged = props.searchMarkers.keywords.length > 0 && props.content !== previousContent;
+
+		if (props.searchMarkers !== previousSearchMarkers || textChanged) {
 			webviewRef.current.wrappedInstance.send('setMarkers', props.searchMarkers.keywords, props.searchMarkers.options);
 
 			if (editorRef.current) {
@@ -488,7 +495,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 				props.setLocalSearchResultCount(matches);
 			}
 		}
-	}, [props.searchMarkers, props.setLocalSearchResultCount, renderedBody]);
+	}, [props.searchMarkers, previousSearchMarkers, props.setLocalSearchResultCount, props.content, previousContent]);
 
 	const cellEditorStyle = useMemo(() => {
 		const output = { ...styles.cellEditor };
@@ -548,6 +555,7 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) {
 			<div style={cellEditorStyle}>
 				<Editor
 					value={props.content}
+					searchMarkers={props.searchMarkers}
 					ref={editorRef}
 					mode={props.contentMarkupLanguage === Note.MARKUP_LANGUAGE_HTML ? 'xml' : 'joplin-markdown'}
 					codeMirrorTheme={styles.editor.codeMirrorTheme}
diff --git a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx
index de1e188f6a..d96cdd00f2 100644
--- a/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx
+++ b/ElectronClient/gui/NoteEditor/NoteBody/CodeMirror/Editor.tsx
@@ -74,6 +74,7 @@ for (let i = 0; i < topLanguages.length; i++) {
 
 export interface EditorProps {
 	value: string,
+	searchMarkers: any,
 	mode: string,
 	style: any,
 	codeMirrorTheme: any,
@@ -249,6 +250,11 @@ function Editor(props: EditorProps, ref: any) {
 		cm.on('drop', editor_drop);
 		cm.on('dragover', editor_drag);
 
+		// It's possible for searchMarkers to be available before the editor
+		// In these cases we set the markers asap so the user can see them as
+		// soon as the editor is ready
+		if (props.searchMarkers) { cm.setMarkers(props.searchMarkers.keywords, props.searchMarkers.options); }
+
 		return () => {
 			// Clean up codemirror
 			cm.off('change', editor_change);
diff --git a/ReactNativeClient/lib/BaseApplication.js b/ReactNativeClient/lib/BaseApplication.js
index 90c3af2a49..53b06ca4f7 100644
--- a/ReactNativeClient/lib/BaseApplication.js
+++ b/ReactNativeClient/lib/BaseApplication.js
@@ -300,12 +300,10 @@ class BaseApplication {
 			}
 		}
 
-		if (highlightedWords.length) {
-			this.store().dispatch({
-				type: 'SET_HIGHLIGHTED',
-				words: highlightedWords,
-			});
-		}
+		this.store().dispatch({
+			type: 'SET_HIGHLIGHTED',
+			words: highlightedWords,
+		});
 
 		this.store().dispatch({
 			type: 'NOTE_UPDATE_ALL',