From 131842233b5127d8d54c97e8b90f9a3383ec9b44 Mon Sep 17 00:00:00 2001
From: Dustin Runnells <dustin@runnells.name>
Date: Fri, 6 Sep 2024 22:06:19 -0400
Subject: [PATCH 1/3] feat(console-search): add search field with navigation
 and highlighting in console log

This commit introduces a search functionality to the console log screen.

re #81
---
 lib/ui/console.jsx | 96 +++++++++++++++++++++++++++++++++++++++++++++-
 styles/appc.less   | 12 ++++++
 2 files changed, 107 insertions(+), 1 deletion(-)

diff --git a/lib/ui/console.jsx b/lib/ui/console.jsx
index c2535e38..fa4fa8af 100644
--- a/lib/ui/console.jsx
+++ b/lib/ui/console.jsx
@@ -21,6 +21,7 @@ class ConsoleLog {
 	constructor(opts) {
 		this.children = [];
 		this.autoScroll = opts.autoScroll;
+		this.HighlightText = '';
 		etch.initialize(this);
 	}
 
@@ -44,6 +45,59 @@ class ConsoleLog {
 		);
 	}
 
+	/**
+	 * Set highlighted text string
+	 *
+	 * @param {String} text		Text that will be highlighted
+	 */
+	setHighlightText(text) {
+		this.highlightText = text;
+	}
+
+	/**
+	 * Highlight text in console from highlightText string
+	 */
+	highlightTextInLog() {
+		let origInnerHtml = this.refs.log.innerHTML;
+		let cleanInnerHtml = origInnerHtml.replace(/<span class="highlight">(.*?)<\/span>/gi, '$1');
+		if (this.highlightText) {
+			this.refs.log.innerHTML = cleanInnerHtml.replaceAll(this.highlightText, '<span class="highlight">' + this.highlightText + '</span>');
+		} else {
+			this.refs.log.innerHTML = cleanInnerHtml;
+		}
+	}
+
+	/**
+	 * Jump to next highlighted text string
+	 *
+	 * @param {String} direction	Direction to jump (up/down)
+	 */
+	jumpToHighlightedText(direction) {
+		let textElements = this.refs.log.querySelectorAll('.highlight');
+		let consoleHeight = this.refs.log.offsetHeight;
+		let curScrollPosition = this.refs.log.scrollTop;
+		let nextAbovePosition = 0;
+		let nextBelowPosition = this.refs.log.scrollHeight;
+
+		for (let nextElement = 0; nextElement < textElements.length; nextElement++) {
+			let elementOffset = textElements[nextElement].offsetTop;
+			let centeredOffset = elementOffset - (consoleHeight / 2);
+
+			if (elementOffset < curScrollPosition + (consoleHeight / 2)) {
+				nextAbovePosition = Math.max(centeredOffset, 0);
+			}
+			if (elementOffset > curScrollPosition + (consoleHeight / 2) && centeredOffset < nextBelowPosition) {
+				nextBelowPosition = Math.min(centeredOffset, this.refs.log.scrollHeight - consoleHeight);
+			}
+		}
+
+		if (direction === 'down') {
+			this.refs.log.scrollTop = nextBelowPosition;
+		} else {
+			this.refs.log.scrollTop = nextAbovePosition;
+		}
+	}
+
 	/**
 	 * Update component
 	 *
@@ -82,6 +136,7 @@ class ConsoleLog {
 	 */
 	clear() {
 		this.children = [];
+		this.childrenClean = [];
 		this.update();
 	}
 }
@@ -105,7 +160,8 @@ export default class Console {
 			isHidden: true,
 			logLevel: 'info',
 			autoScroll: true,
-			showOnBuild: true
+			showOnBuild: true,
+			consoleHighlightText: ''
 		};
 		opts && Object.assign(this.state, opts);
 
@@ -161,6 +217,21 @@ export default class Console {
 							<div className="toolbar-item-title">
 								<label className="input-label"><input className="input-checkbox" type="checkbox" attributes={this.state.showOnBuild ? { checked: 'true' } : {}} on={{ change: this.showOnBuildCheckboxDidChange }} />Show on build</label>
 							</div>
+							<div className="toolbar-item-title">
+								<label className="input-label">Find:</label>
+							</div>
+							<div>
+								<input
+									type="text"
+									className="input-text native-key-bindings input"
+									value={this.state.consoleHighlightText}
+									on={{ input: this.consoleHighlightTextDidChange }}
+								/>
+							</div>
+							<div>
+								<Button icon="arrow-up" title="Find Previous" className="button-right console-search-button" flat="true" click={this.findText.bind(this, 'up')} />
+								<Button icon="arrow-down" title="Find Next" className="button-right console-search-button" flat="true" click={this.findText.bind(this, 'down')} />
+							</div>
 						</div>
 						<div className="toolbar-right">
 							<Button flat="true" icon="trashcan" className="button-right" click={this.clear.bind(this)} />
@@ -235,6 +306,7 @@ export default class Console {
 			if (line.length === 0) {
 				continue;
 			}
+
 			if (line.indexOf('[TRACE]') === 0 || line.indexOf('TRACE') !== -1) {
 				this.trace(line);
 			} else if (line.indexOf('[DEBUG]') === 0 || line.indexOf('DEBUG') !== -1) {
@@ -341,6 +413,28 @@ export default class Console {
 		this.refs.log.clear();
 	}
 
+	/**
+	 * Jump to text
+	 *
+	 * @param {String} direction	Direction to look for text
+	 */
+	findText(direction) {
+		if (this.state.consoleHighlightText) {
+			this.refs.log.setHighlightText(this.state.consoleHighlightText);
+			this.refs.log.highlightTextInLog();
+			this.refs.log.jumpToHighlightedText(direction);
+		}
+	}
+
+	/**
+	 * Console filter value changed
+	 *
+	 * @param {Object} event 	change event object
+	 */
+	consoleHighlightTextDidChange(event) {
+		this.state.consoleHighlightText = event.target.value;
+	}
+
 	/**
 	 * Log level value changed
 	 *
diff --git a/styles/appc.less b/styles/appc.less
index 1e56bdb3..77c8f66d 100644
--- a/styles/appc.less
+++ b/styles/appc.less
@@ -282,6 +282,18 @@
     p.error {
         color: #ff0000;
     }
+
+    span.highlight {
+        background-color: #ffff00;
+	color: #000;
+	padding-left: 0;
+	padding-right: 0;
+    }
+
+    .console-search-button {
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+    }
 }
 
 .appc-new-project-dialog {

From 6e73507abe510ed85220383f10740135bf3488d7 Mon Sep 17 00:00:00 2001
From: Dustin Runnells <dustin@runnells.name>
Date: Tue, 10 Sep 2024 03:22:51 -0400
Subject: [PATCH 2/3] fix(console): correct behavior when clearing console log
 after a search

This fix resolves an issue where the console log was not clearing properly after performing a
search. Previously, the "clear" functionality did not behave as expected when search results were
highlighted.
---
 lib/ui/console.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/ui/console.jsx b/lib/ui/console.jsx
index fa4fa8af..6be5a97a 100644
--- a/lib/ui/console.jsx
+++ b/lib/ui/console.jsx
@@ -136,7 +136,7 @@ class ConsoleLog {
 	 */
 	clear() {
 		this.children = [];
-		this.childrenClean = [];
+		this.refs.log.innerHTML = '';
 		this.update();
 	}
 }

From d8e98add0ebc4634ee53e6f5e41a43d4686f61a1 Mon Sep 17 00:00:00 2001
From: Dustin Runnells <dustin@runnells.name>
Date: Sun, 8 Jun 2025 20:57:54 -0400
Subject: [PATCH 3/3] fix(console): search is now case insensitive and ends at
 first/last find

---
 lib/ui/console.jsx | 46 ++++++++++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/lib/ui/console.jsx b/lib/ui/console.jsx
index 6be5a97a..6767a7b0 100644
--- a/lib/ui/console.jsx
+++ b/lib/ui/console.jsx
@@ -61,7 +61,9 @@ class ConsoleLog {
 		let origInnerHtml = this.refs.log.innerHTML;
 		let cleanInnerHtml = origInnerHtml.replace(/<span class="highlight">(.*?)<\/span>/gi, '$1');
 		if (this.highlightText) {
-			this.refs.log.innerHTML = cleanInnerHtml.replaceAll(this.highlightText, '<span class="highlight">' + this.highlightText + '</span>');
+			const escapedText = this.highlightText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+			const regex = new RegExp(escapedText, 'gi');
+			this.refs.log.innerHTML = cleanInnerHtml.replace(regex, match => `<span class="highlight">${match}</span>`);
 		} else {
 			this.refs.log.innerHTML = cleanInnerHtml;
 		}
@@ -73,28 +75,36 @@ class ConsoleLog {
 	 * @param {String} direction	Direction to jump (up/down)
 	 */
 	jumpToHighlightedText(direction) {
-		let textElements = this.refs.log.querySelectorAll('.highlight');
-		let consoleHeight = this.refs.log.offsetHeight;
-		let curScrollPosition = this.refs.log.scrollTop;
-		let nextAbovePosition = 0;
-		let nextBelowPosition = this.refs.log.scrollHeight;
-
-		for (let nextElement = 0; nextElement < textElements.length; nextElement++) {
-			let elementOffset = textElements[nextElement].offsetTop;
-			let centeredOffset = elementOffset - (consoleHeight / 2);
-
-			if (elementOffset < curScrollPosition + (consoleHeight / 2)) {
-				nextAbovePosition = Math.max(centeredOffset, 0);
-			}
-			if (elementOffset > curScrollPosition + (consoleHeight / 2) && centeredOffset < nextBelowPosition) {
-				nextBelowPosition = Math.min(centeredOffset, this.refs.log.scrollHeight - consoleHeight);
+		const log = this.refs.log;
+		const textElements = log.querySelectorAll('.highlight');
+		const scrollTop = log.scrollTop;
+		const containerHeight = log.offsetHeight;
+		const centerLine = scrollTop + containerHeight / 2;
+
+		let bestAbove = null;
+		let bestBelow = null;
+
+		for (const el of textElements) {
+			const elTop = el.offsetTop;
+			const centeredOffset = elTop - containerHeight / 2;
+
+			if (elTop < centerLine) {
+				bestAbove = centeredOffset;
+			} else if (elTop > centerLine && bestBelow === null) {
+				bestBelow = centeredOffset;
 			}
 		}
 
 		if (direction === 'down') {
-			this.refs.log.scrollTop = nextBelowPosition;
+			if (bestBelow === null) {
+				return;
+			}
+			log.scrollTop = Math.min(bestBelow, log.scrollHeight - containerHeight);
 		} else {
-			this.refs.log.scrollTop = nextAbovePosition;
+			if (bestAbove === null) {
+				return;
+			}
+			log.scrollTop = Math.max(bestAbove, 0);
 		}
 	}