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