Notebook Text Cell Highlight Improvements (#12197)

* 1st iteration * works but multiple highlights * remove comment * Works but multiple selects * wip * cleanup * cleanup * Update TPN * Add mark.js to remote + web * PR feedback * Tweak workbench html files
2026-01-13 17:22:15 -05:00 · 2020-09-10 21:40:29 -07:00
parent baa12d725f
commit 1f0cdf82e4
13 changed files with 77 additions and 15 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -5,6 +5,7 @@
 **/vs/loader.js
 **/insane/**
 **/marked/**
+**/markjs/**
 **/test/**/*.js
 **/node_modules/**
 **/vscode-api-tests/testWorkspace/**
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -731,7 +731,8 @@
 					"chart.js",
 					"plotly.js-dist-min",
 					"angular2-grid",
-					"html-query-plan"
+					"html-query-plan",
+					"mark.js"
                ]
            },
            {
--- a/ThirdPartyNotices.txt
+++ b/ThirdPartyNotices.txt
@@ -41,6 +41,7 @@ expressly granted herein, whether by implication, estoppel or otherwise.
    JupyterLab: https://github.com/jupyterlab/jupyterlab
 		keytar: https://github.com/atom/node-keytar
    make-error: https://github.com/JsCommunity/make-error
+    mark.js: https://github.com/julmot/mark.js
    minimist: https://github.com/substack/minimist
    moment: https://github.com/moment/moment
    native-keymap: https://github.com/Microsoft/node-native-keymap
@@ -1254,6 +1255,32 @@ ISC © Julien Fontanet
 =========================================
 END OF make-error NOTICES AND INFORMATION

+%% mark.js NOTICES AND INFORMATION BEGIN HERE
+=========================================
+The MIT License (MIT)
+
+Copyright (c) 2014–2019 Julian Kühnel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+=========================================
+END OF mark.js NOTICES AND INFORMATION
+
 %% minimist NOTICES AND INFORMATION BEGIN HERE
 =========================================
 This software is released under the MIT license:
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
    "jquery": "3.5.0",
    "jschardet": "2.2.1",
    "keytar": "^5.5.0",
+    "mark.js": "^8.11.1",
    "minimist": "^1.2.5",
    "native-is-elevated": "0.4.1",
    "native-keymap": "2.2.0",
@@ -193,8 +194,8 @@
    "style-loader": "^1.0.0",
    "temp-write": "^3.4.0",
    "ts-loader": "^4.4.2",
-    "typemoq": "^0.3.2",
    "tsec": "googleinterns/tsec",
+    "typemoq": "^0.3.2",
    "typescript": "^4.1.0-dev.20200824",
    "typescript-formatter": "7.1.0",
    "underscore": "^1.8.2",
--- a/remote/package.json
+++ b/remote/package.json
@@ -23,6 +23,7 @@
    "iconv-lite-umd": "0.6.8",
    "jquery": "3.5.0",
    "jschardet": "2.2.1",
+    "mark.js": "^8.11.1",
    "minimist": "^1.2.5",
    "native-watchdog": "1.3.0",
    "ng2-charts": "^1.6.0",
--- a/remote/web/package.json
+++ b/remote/web/package.json
@@ -17,6 +17,7 @@
 		"iconv-lite-umd": "0.6.8",
 		"jschardet": "2.2.1",
 		"jquery": "3.5.0",
+		"mark.js": "^8.11.1",
 		"ng2-charts": "^1.6.0",
 		"reflect-metadata": "^0.1.8",
 		"rxjs": "5.4.0",
--- a/remote/web/yarn.lock
+++ b/remote/web/yarn.lock
@@ -227,6 +227,11 @@ lodash.mergewith@^4.6.1:
  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==

+mark.js@^8.11.1:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
+  integrity sha1-GA8fnr74sOY45BZq1S24eb6y/8U=
+
 moment@^2.10.2:
  version "2.24.0"
  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
--- a/remote/yarn.lock
+++ b/remote/yarn.lock
@@ -467,6 +467,11 @@ lodash.mergewith@^4.6.1:
  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==

+mark.js@^8.11.1:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
+  integrity sha1-GA8fnr74sOY45BZq1S24eb6y/8U=
+
 minimist@0.0.8:
  version "0.0.8"
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
@@ -24,9 +24,11 @@ import { ICellModel } from 'sql/workbench/services/notebook/browser/models/model
 import { NotebookModel } from 'sql/workbench/services/notebook/browser/models/notebookModel';
 import { ISanitizer, defaultSanitizer } from 'sql/workbench/services/notebook/browser/outputs/sanitizer';
 import { CodeComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/code.component';
-import { NotebookRange, ICellEditorProvider } from 'sql/workbench/services/notebook/browser/notebookService';
+import { NotebookRange, ICellEditorProvider, INotebookService } from 'sql/workbench/services/notebook/browser/notebookService';
 import { IColorTheme } from 'vs/platform/theme/common/themeService';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import * as Mark from 'mark.js';
+import { NotebookInput } from 'sql/workbench/contrib/notebook/browser/models/notebookInput';

 export const TEXT_SELECTOR: string = 'text-cell-component';
 const USER_SELECT_CLASS = 'actionselect';
@@ -89,7 +91,9 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
 		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
 		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
-		@Inject(IConfigurationService) private _configurationService: IConfigurationService
+		@Inject(IConfigurationService) private _configurationService: IConfigurationService,
+		@Inject(INotebookService) private _notebookService: INotebookService,
+
 	) {
 		super();
 		this.isEditMode = true;
@@ -297,22 +301,31 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {

 	private addDecoration(range: NotebookRange): void {
 		if (range && this.output && this.output.nativeElement) {
-			let children = this.getHtmlElements();
-			let ele = children[range.startLineNumber - 1];
-			if (ele) {
-				DOM.addClass(ele, 'rangeHighlight');
-				ele.scrollIntoView({ behavior: 'smooth' });
+			let elements = this.getHtmlElements();
+			if (elements?.length >= range.startLineNumber) {
+				let elementContainingText = elements[range.startLineNumber - 1];
+				let mark = new Mark(elementContainingText);
+				let editor = this._notebookService.findNotebookEditor(this.model.notebookUri);
+				if (editor) {
+					let findModel = (editor.notebookParams.input as NotebookInput).notebookFindModel;
+					if (findModel?.findMatches?.length > 0) {
+						let searchString = findModel.findExpression;
+						mark.mark(searchString, {
+							className: 'rangeHighlight'
+						});
+						elementContainingText.scrollIntoView({ behavior: 'smooth' });
+					}
+				}
 			}
 		}
 	}

 	private removeDecoration(range: NotebookRange): void {
 		if (range && this.output && this.output.nativeElement) {
-			let children = this.getHtmlElements();
-			let ele = children[range.startLineNumber - 1];
-			if (ele) {
-				DOM.removeClass(ele, 'rangeHighlight');
-			}
+			let elements = this.getHtmlElements();
+			let elementContainingText = elements[range.startLineNumber - 1];
+			let mark = new Mark(elementContainingText);
+			mark.unmark({ acrossElements: true, className: 'rangeHighlight' });
 		}
 	}

--- a/src/vs/code/browser/workbench/workbench-dev.html
+++ b/src/vs/code/browser/workbench/workbench-dev.html
@@ -85,6 +85,7 @@
 				'ansi_up': `${window.location.origin}/static/remote/web/node_modules/ansi_up/ansi_up.js`,
 				'iconv-lite-umd': `${window.location.origin}/static/remote/web/node_modules/iconv-lite-umd/lib/iconv-lite-umd.js`,
 				'jschardet': `${window.location.origin}/static/remote/web/node_modules/jschardet/dist/jschardet.min.js`,
+				'mark.js': `${window.location.origin}/static/remote/web/node_modules/mark.js/dist/mark.min.js`
 			}
 		};
 	</script>
--- a/src/vs/code/browser/workbench/workbench.html
+++ b/src/vs/code/browser/workbench/workbench.html
@@ -69,6 +69,7 @@
 				'ansi_up': `${window.location.origin}/static/node_modules/ansi_up/ansi_up.js`,
 				'iconv-lite-umd': `${window.location.origin}/static/node_modules/iconv-lite-umd/lib/iconv-lite-umd.js`,
 				'jschardet': `${window.location.origin}/static/node_modules/jschardet/dist/jschardet.min.js`,
+				'mark.js': `${window.location.origin}/static/node_modules/mark.js/dist/mark.min.js`
 			}
 		};
 	</script>
--- a/src/vs/loader.js
+++ b/src/vs/loader.js
@@ -477,7 +477,7 @@ var AMDLoader;
            }
            var result = moduleId;
            var results;
-            if ((!AMDLoader.Utilities.endsWith(result, '.js') || result === 'chart.js') && !AMDLoader.Utilities.isAbsolutePath(result)) {
+            if ((!AMDLoader.Utilities.endsWith(result, '.js') || result === 'chart.js' || result === 'mark.js') && !AMDLoader.Utilities.isAbsolutePath(result)) {
                results = this._applyPaths(result);
                for (var i = 0, len = results.length; i < len; i++) {
                    if (this.isBuild() && results[i] === 'empty:') {
--- a/yarn.lock
+++ b/yarn.lock
@@ -5891,6 +5891,11 @@ map-visit@^1.0.0:
  dependencies:
    object-visit "^1.0.0"

+mark.js@^8.11.1:
+  version "8.11.1"
+  resolved "https://registry.yarnpkg.com/mark.js/-/mark.js-8.11.1.tgz#180f1f9ebef8b0e638e4166ad52db879beb2ffc5"
+  integrity sha1-GA8fnr74sOY45BZq1S24eb6y/8U=
+
 markdown-it@^8.3.1:
  version "8.4.0"
  resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.4.0.tgz#e2400881bf171f7018ed1bd9da441dac8af6306d"