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
This commit is contained in:
Chris LaFreniere
2020-09-10 21:40:29 -07:00
committed by GitHub
parent baa12d725f
commit 1f0cdf82e4
13 changed files with 77 additions and 15 deletions

View File

@@ -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' });
}
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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:') {