Books/search within notebook (#8426)

* initial commit

* get notebook content

* skeleton for find in notebookModel

* add search function and keyboard shortcut

* add command for hiding find widget

* started on search logic

* continue search logic

* continue search logic

* add findcountchange listener

* notebook find position

* added css class

* hide find widget

* focus find input

* search for multiple occurrences in one line

* start notebook find decorations

* start adding decorations to notebook model

* added editor_model_defaults

* added cursor position

* merged master and resolved husky erros

* initial changes added to Lucyls base implementation

* pass NotebbokRange instead of Range to decorations

* changes after merging master

* temp changes for testing

* style updates from vscode merge

* implemented the empty methods and added supporting functionality from textModel

* just a little error checking

* It gets more and more yellow

* making highlight work between code cells

* highlight only word

* remove highlight on close and maintain the position

* cleanup of unused references

* clean up

* find between code cells refactored

* highlight markdown line and scroll to it

* find index fix

* find index fix

* code clean up

* remove commented code

* tslint fix for: Cannot use global 'NodeJS'

* linting rule fixes

* deltaDecoration base implementation on the base class

* moced class defnitions from interface fikle

* updated action names

* DOM.addClass instead of overwriting

* resooved conflicts

* moved 'find' code away from notebookmodel to sep class

* moved find realted code to seperate folder

* created notebookFindModel

* clean up

* highlight color changes

* spacing and typo fixes

* highlight correct element for nested elements

* do not iterate through paragraphs and li

* find accross notebooks

* keep track of index

* clear decorations on close

* floating promises

* maintain search context

Co-authored-by: Lucy Zhang <lucyzhang929@gmail.com>
Co-authored-by: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com>

src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts

@@ -6,7 +6,6 @@ import 'vs/css!./code';
 
 import { OnInit, Component, Input, Inject, ElementRef, ViewChild, Output, EventEmitter, OnChanges, SimpleChange, forwardRef, ChangeDetectorRef } from '@angular/core';
 
-import { AngularDisposable } from 'sql/base/browser/lifecycle';
 import { QueryTextEditor } from 'sql/workbench/browser/modelComponents/queryTextEditor';
 import { CellToggleMoreActions } from 'sql/workbench/contrib/notebook/browser/cellToggleMoreActions';
 import { ICellModel, notebookConstants, CellExecutionState } from 'sql/workbench/contrib/notebook/browser/models/modelInterfaces';
@@ -33,6 +32,7 @@ import { IConnectionManagementService } from 'sql/platform/connection/common/con
 import { ILogService } from 'vs/platform/log/common/log';
 import { CollapseComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/collapse.component';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
+import { CellView } from 'sql/workbench/contrib/notebook/browser/cellViews/interfaces';
 import { UntitledTextEditorInput } from 'vs/workbench/common/editor/untitledTextEditorInput';
 import { UntitledTextEditorModel } from 'vs/workbench/common/editor/untitledTextEditorModel';
 
@@ -44,7 +44,7 @@ const DEFAULT_OR_LOCAL_CONTEXT_ID = '-1';
 	selector: CODE_SELECTOR,
 	templateUrl: decodeURI(require.toUrl('./code.component.html'))
 })
-export class CodeComponent extends AngularDisposable implements OnInit, OnChanges {
+export class CodeComponent extends CellView implements OnInit, OnChanges {
 	@ViewChild('toolbar', { read: ElementRef }) private toolbarElement: ElementRef;
 	@ViewChild('moreactions', { read: ElementRef }) private moreActionsElementRef: ElementRef;
 	@ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef;
@@ -141,6 +141,18 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 		}
 	}
 
+	public getEditor(): QueryTextEditor {
+		return this._editor;
+	}
+
+	public hasEditor(): boolean {
+		return true;
+	}
+
+	public cellGuid(): string {
+		return this.cellModel.cellGuid;
+	}
+
 	private updateConnectionState(shouldConnect: boolean) {
 		if (this.isSqlCodeCell()) {
 			let cellUri = this.cellModel.cellUri.toString();
@@ -173,7 +185,7 @@ export class CodeComponent extends AngularDisposable implements OnInit, OnChange
 		if (this.destroyed) {
 			return;
 		}
-		this.createEditor();
+		this.createEditor().catch(e => this.logService.error(e));
 		this._register(DOM.addDisposableListener(window, DOM.EventType.RESIZE, e => {
 			this._layoutEmitter.fire();
 		}));

src/sql/workbench/contrib/notebook/browser/cellViews/code.css

@@ -66,6 +66,14 @@ code-component .monaco-editor .decorationsOverviewRuler {
 	visibility: hidden;
 }
 
+.vs code-component .monaco-editor .rangeHighlight {
+	background-color: rgba(255, 255, 0, 0.2)
+}
+
+.vs-dark code-component .monaco-editor .rangeHighlight {
+	background-color: rgba(255, 255, 0, 0.2)
+}
+
 code-component .carbon-taskbar .codicon {
 	background-size: 20px;
 	width: 40px;

src/sql/workbench/contrib/notebook/browser/cellViews/codeCell.component.ts

@@ -4,11 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { nb } from 'azdata';
-import { OnInit, Component, Input, Inject, forwardRef, ChangeDetectorRef, SimpleChange, OnChanges, HostListener } from '@angular/core';
+import { OnInit, Component, Input, Inject, forwardRef, ChangeDetectorRef, SimpleChange, OnChanges, HostListener, ViewChildren, QueryList } from '@angular/core';
 import { CellView } from 'sql/workbench/contrib/notebook/browser/cellViews/interfaces';
 import { ICellModel } from 'sql/workbench/contrib/notebook/browser/models/modelInterfaces';
 import { NotebookModel } from 'sql/workbench/contrib/notebook/browser/models/notebookModel';
 import { Deferred } from 'sql/base/common/promise';
+import { ICellEditorProvider } from 'sql/workbench/services/notebook/browser/notebookService';
+import { CodeComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/code.component';
+import { OutputComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/output.component';
 
 
 export const CODE_SELECTOR: string = 'code-cell-component';
@@ -19,6 +22,8 @@ export const CODE_SELECTOR: string = 'code-cell-component';
 })
 
 export class CodeCellComponent extends CellView implements OnInit, OnChanges {
+	@ViewChildren(CodeComponent) private codeCells: QueryList<ICellEditorProvider>;
+	@ViewChildren(OutputComponent) private outputCells: QueryList<ICellEditorProvider>;
 	@Input() cellModel: ICellModel;
 	@Input() set model(value: NotebookModel) {
 		this._model = value;
@@ -69,6 +74,17 @@ export class CodeCellComponent extends CellView implements OnInit, OnChanges {
 		}
 	}
 
+	public get cellEditors(): ICellEditorProvider[] {
+		let editors: ICellEditorProvider[] = [];
+		if (this.codeCells) {
+			editors.push(...this.codeCells.toArray());
+		}
+		if (this.outputCells) {
+			editors.push(...this.outputCells.toArray());
+		}
+		return editors;
+	}
+
 	get model(): NotebookModel {
 		return this._model;
 	}
@@ -110,4 +126,8 @@ export class CodeCellComponent extends CellView implements OnInit, OnChanges {
 	get isStdInVisible(): boolean {
 		return this.cellModel.stdInVisible;
 	}
+
+	public cellGuid(): string {
+		return this.cellModel.cellGuid;
+	}
 }

src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.ts

@@ -64,6 +64,10 @@ export class CollapseComponent extends CellView implements OnInit, OnChanges {
 		this.cellModel.isCollapsed = !this.cellModel.isCollapsed;
 	}
 
+	public cellGuid(): string {
+		return this.cellModel.cellGuid;
+	}
+
 	public layout() {
 
 	}

src/sql/workbench/contrib/notebook/browser/cellViews/interfaces.ts

@@ -5,11 +5,28 @@
 
 import { OnDestroy } from '@angular/core';
 import { AngularDisposable } from 'sql/base/browser/lifecycle';
+import { ICellEditorProvider } from 'sql/workbench/services/notebook/browser/notebookService';
+import { BaseTextEditor } from 'vs/workbench/browser/parts/editor/textEditor';
+import { NotebookRange } from 'sql/workbench/contrib/notebook/find/notebookFindDecorations';
 
-export abstract class CellView extends AngularDisposable implements OnDestroy {
+export abstract class CellView extends AngularDisposable implements OnDestroy, ICellEditorProvider {
 	constructor() {
 		super();
 	}
 
 	public abstract layout(): void;
+
+	public getEditor(): BaseTextEditor | undefined {
+		return undefined;
+	}
+
+	public hasEditor(): boolean {
+		return false;
+	}
+
+	public abstract cellGuid(): string;
+
+	public deltaDecorations(newDecorationRange: NotebookRange, oldDecorationRange: NotebookRange): void {
+
+	}
 }

src/sql/workbench/contrib/notebook/browser/cellViews/output.component.ts

@@ -6,7 +6,6 @@ import 'vs/css!./code';
 import 'vs/css!./media/output';
 
 import { OnInit, Component, Input, Inject, ElementRef, ViewChild, SimpleChange, AfterViewInit, forwardRef, ChangeDetectorRef, ComponentRef, ComponentFactoryResolver } from '@angular/core';
-import { AngularDisposable } from 'sql/base/browser/lifecycle';
 import { Event } from 'vs/base/common/event';
 import { nb } from 'azdata';
 import { ICellModel } from 'sql/workbench/contrib/notebook/browser/models/modelInterfaces';
@@ -21,6 +20,7 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { localize } from 'vs/nls';
 import * as types from 'vs/base/common/types';
 import { getErrorMessage } from 'vs/base/common/errors';
+import { CellView } from 'sql/workbench/contrib/notebook/browser/cellViews/interfaces';
 
 export const OUTPUT_SELECTOR: string = 'output-component';
 const USER_SELECT_CLASS = 'actionselect';
@@ -31,7 +31,7 @@ const componentRegistry = <IMimeComponentRegistry>Registry.as(Extensions.MimeCom
 	selector: OUTPUT_SELECTOR,
 	templateUrl: decodeURI(require.toUrl('./output.component.html'))
 })
-export class OutputComponent extends AngularDisposable implements OnInit, AfterViewInit {
+export class OutputComponent extends CellView implements OnInit, AfterViewInit {
 	@ViewChild('output', { read: ElementRef }) private outputElement: ElementRef;
 	@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
 	@Input() cellOutput: nb.ICellOutput;
@@ -184,4 +184,8 @@ export class OutputComponent extends AngularDisposable implements OnInit, AfterV
 			return;
 		}
 	}
+
+	public cellGuid(): string {
+		return this.cellModel.cellGuid;
+	}
 }

src/sql/workbench/contrib/notebook/browser/cellViews/placeholderCell.component.ts

@@ -82,4 +82,8 @@ export class PlaceholderCellComponent extends CellView implements OnInit, OnChan
 	public layout() {
 
 	}
+
+	public cellGuid(): string {
+		return this.cellModel.cellGuid;
+	}
 }

src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts

@@ -24,6 +24,7 @@ import { ICellModel } from 'sql/workbench/contrib/notebook/browser/models/modelI
 import { NotebookModel } from 'sql/workbench/contrib/notebook/browser/models/notebookModel';
 import { ISanitizer, defaultSanitizer } from 'sql/workbench/contrib/notebook/browser/outputs/sanitizer';
 import { CellToggleMoreActions } from 'sql/workbench/contrib/notebook/browser/cellToggleMoreActions';
+import { NotebookRange } from 'sql/workbench/contrib/notebook/find/notebookFindDecorations';
 
 export const TEXT_SELECTOR: string = 'text-cell-component';
 const USER_SELECT_CLASS = 'actionselect';
@@ -139,6 +140,10 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 		}
 	}
 
+	public cellGuid(): string {
+		return this.cellModel.cellGuid;
+	}
+
 	public get isTrusted(): boolean {
 		return this.model.trustedMode;
 	}
@@ -243,4 +248,66 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	protected toggleMoreActionsButton(isActiveOrHovered: boolean) {
 		this._cellToggleMoreActions.toggleVisible(!isActiveOrHovered);
 	}
+
+	public deltaDecorations(newDecorationRange: NotebookRange, oldDecorationRange: NotebookRange): void {
+		if (oldDecorationRange) {
+			this.removeDecoration(oldDecorationRange);
+		}
+
+		if (newDecorationRange) {
+			this.addDecoration(newDecorationRange);
+		}
+	}
+
+	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' });
+			}
+		}
+	}
+
+	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');
+			}
+		}
+	}
+
+	private getHtmlElements(): any[] {
+		let hostElem = this.output.nativeElement;
+		let children = [];
+		for (let element of hostElem.children) {
+			if (element.nodeName.toLowerCase() === 'table') {
+				// add table header and table rows.
+				children.push(element.children[0]);
+				for (let trow of element.children[1].children) {
+					children.push(trow);
+				}
+			} else if (element.children.length > 1) {
+				children = children.concat(this.getChildren(element));
+			} else {
+				children.push(element);
+			}
+		}
+		return children;
+	}
+
+	private getChildren(parent: any): any[] {
+		let children: any = [];
+		if (parent.children.length > 1 && parent.nodeName.toLowerCase() !== 'li' && parent.nodeName.toLowerCase() !== 'p') {
+			for (let child of parent.children) {
+				children = children.concat(this.getChildren(child));
+			}
+		} else {
+			return parent;
+		}
+		return children;
+	}
 }

src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css

@@ -17,6 +17,14 @@ text-cell-component .notebook-preview {
 	user-select: text;
 }
 
+.vs .notebook-preview .rangeHighlight {
+	background-color: rgba(255, 255, 0, 0.2)
+}
+
+.vs-dark .notebook-preview .rangeHighlight {
+	background-color: rgba(255, 255, 0, 0.2)
+}
+
 text-cell-component table {
 	border-collapse: collapse;
 	border-spacing: 0;
@@ -47,4 +55,4 @@ text-cell-component tr {
 
 text-cell-component th {
 	font-weight: bold;
-}
+}

src/sql/workbench/contrib/notebook/browser/models/modelInterfaces.ts

@@ -22,7 +22,9 @@ import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilit
 import { localize } from 'vs/nls';
 import { NotebookModel } from 'sql/workbench/contrib/notebook/browser/models/notebookModel';
 import { mssqlProviderName } from 'sql/platform/connection/common/constants';
+import { IModelDecorationsChangeAccessor } from 'vs/editor/common/model';
 import { IModelContentChangedEvent } from 'vs/editor/common/model/textModelEvents';
+import { NotebookRange, NotebookFindMatch } from 'sql/workbench/contrib/notebook/find/notebookFindDecorations';
 
 export interface IClientSessionOptions {
 	notebookUri: URI;
@@ -258,7 +260,7 @@ export interface INotebookModel {
 	/**
 	 * The active cell for this model. May be undefined
 	 */
-	readonly activeCell: ICellModel;
+	activeCell: ICellModel | undefined;
 
 	/**
 	 * Client Session in the notebook, used for sending requests to the notebook service
@@ -395,6 +397,8 @@ export interface INotebookModel {
 
 	getApplicableConnectionProviderIds(kernelName: string): string[];
 
+	updateActiveCell(cell: ICellModel): void;
+
 	/**
 	 * Get the standardKernelWithProvider by name
 	 * @param name The kernel name
@@ -408,13 +412,63 @@ export interface INotebookModel {
 
 	standardKernels: IStandardKernelWithProvider[];
 
-	/**
-	 * Updates the model's view of an active cell to the new active cell
-	 * @param cell New active cell
-	 */
-	updateActiveCell(cell: ICellModel);
-
 	requestConnection(): Promise<boolean>;
+
+}
+
+export interface INotebookFindModel {
+	/** Get the find count */
+	getFindCount(): number;
+
+	/** Get the find index */
+	getFindIndex(): number;
+
+	/** find the next match */
+	findNext(): Promise<NotebookRange>;
+
+	/** find the previous match */
+	findPrevious(): Promise<NotebookRange>;
+
+	/** search the notebook model for the given exp up to maxMatch occurances */
+	find(exp: string, maxMatches?: number): Promise<NotebookRange>;
+
+	/** clear the results of the find */
+	clearFind(): void;
+
+	/** return the find results with their ranges */
+	findArray: NotebookRange[];
+
+	/**
+	 * Get the range associated with a decoration.
+	 * @param id The decoration id.
+	 * @return The decoration range or null if the decoration was not found.
+	 */
+	getDecorationRange(id: string): NotebookRange | null;
+
+	/**
+	 * Get the range associated with a decoration.
+	 * @param callback that accepts changeAccessor which applies the decorations
+	 * @param ownerId the owner id
+	 * @return The decoration range or null if the decoration was not found.
+	 */
+	changeDecorations<T>(callback: (changeAccessor: IModelDecorationsChangeAccessor) => T, ownerId: number): T | null;
+
+	/**
+	 * Get the maximum legal column for line at `lineNumber`
+	 */
+	getLineMaxColumn(lineNumber: number): number;
+
+	/**
+	 * Get the number of lines in the model.
+	 */
+	getLineCount(): number;
+
+	findMatches: NotebookFindMatch[];
+
+	findExpression: string;
+
+	/** Emit event when the find count changes */
+	onFindCountChange: Event<number>;
 }
 
 export interface NotebookContentChange {

src/sql/workbench/contrib/notebook/browser/models/notebookInput.ts

@@ -31,6 +31,7 @@ import { UntitledTextEditorInput } from 'vs/workbench/common/editor/untitledText
 import { ResourceEditorInput } from 'vs/workbench/common/editor/resourceEditorInput';
 import { FileEditorInput } from 'vs/workbench/contrib/files/common/editors/fileEditorInput';
 import { BinaryEditorModel } from 'vs/workbench/common/editor/binaryEditorModel';
+import { NotebookFindModel } from 'sql/workbench/contrib/notebook/find/notebookFindModel';
 
 export type ModeViewSaveHandler = (handle: number) => Thenable<boolean>;
 
@@ -165,7 +166,7 @@ export class NotebookEditorModel extends EditorModel {
 		return this.getNotebookModel() !== undefined;
 	}
 
-	private getNotebookModel(): INotebookModel {
+	public getNotebookModel(): INotebookModel {
 		let editor = this.notebookService.findNotebookEditor(this.notebookUri);
 		if (editor) {
 			return editor.model;
@@ -203,6 +204,8 @@ export abstract class NotebookInput extends EditorInput {
 	private _modelResolveInProgress: boolean = false;
 	private _modelResolved: Deferred<void> = new Deferred<void>();
 
+	private _notebookFindModel: NotebookFindModel;
+
 	constructor(private _title: string,
 		private resource: URI,
 		private _textInput: TextInput,
@@ -233,6 +236,13 @@ export abstract class NotebookInput extends EditorInput {
 		return this.resource;
 	}
 
+	public get notebookFindModel(): NotebookFindModel {
+		if (!this._notebookFindModel) {
+			this._notebookFindModel = new NotebookFindModel(this._model.getNotebookModel());
+		}
+		return this._notebookFindModel;
+	}
+
 	public get contentManager(): IContentManager {
 		if (!this._contentManager) {
 			this._contentManager = this.instantiationService.createInstance(NotebookEditorContentManager, this);

src/sql/workbench/contrib/notebook/browser/models/notebookModel.ts

@@ -360,7 +360,7 @@ export class NotebookModel extends Disposable implements INotebookModel {
 		return cell;
 	}
 
-	public updateActiveCell(cell: ICellModel) {
+	public updateActiveCell(cell: ICellModel): void {
 		if (this._activeCell) {
 			this._activeCell.active = false;
 		}
@@ -426,8 +426,8 @@ export class NotebookModel extends Disposable implements INotebookModel {
 		return this._activeCell;
 	}
 
-	public set activeCell(value: ICellModel) {
-		this._activeCell = value;
+	public set activeCell(cell: ICellModel) {
+		this._activeCell = cell;
 	}
 
 	private notifyError(error: string): void {
@@ -597,7 +597,7 @@ export class NotebookModel extends Disposable implements INotebookModel {
 
 	public changeKernel(displayName: string): void {
 		this._contextsLoadingEmitter.fire();
-		this.doChangeKernel(displayName, true);
+		this.doChangeKernel(displayName, true).catch(e => this.logService.error(e));
 	}
 
 	private async doChangeKernel(displayName: string, mustSetProvider: boolean = true, restoreOnFail: boolean = true): Promise<void> {
@@ -776,8 +776,8 @@ export class NotebookModel extends Disposable implements INotebookModel {
 
 	public dispose(): void {
 		super.dispose();
-		this.disconnectAttachToConnections();
-		this.handleClosed();
+		this.disconnectAttachToConnections().catch(e => this.logService.error(e));
+		this.handleClosed().catch(e => this.logService.error(e));
 	}
 
 	public async handleClosed(): Promise<void> {
@@ -998,5 +998,4 @@ export class NotebookModel extends Disposable implements INotebookModel {
 
 		this._contentChangedEmitter.fire(changeInfo);
 	}
-
 }

src/sql/workbench/contrib/notebook/browser/notebook.component.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { nb } from 'azdata';
-import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnDestroy } from '@angular/core';
+import { OnInit, Component, Inject, forwardRef, ElementRef, ChangeDetectorRef, ViewChild, OnDestroy, ViewChildren, QueryList } from '@angular/core';
 
 import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import * as themeColors from 'vs/workbench/common/theme';
@@ -25,7 +25,7 @@ import { AngularDisposable } from 'sql/base/browser/lifecycle';
 import { CellTypes, CellType } from 'sql/workbench/contrib/notebook/common/models/contracts';
 import { ICellModel, IModelFactory, INotebookModel } from 'sql/workbench/contrib/notebook/browser/models/modelInterfaces';
 import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
-import { INotebookService, INotebookParams, INotebookManager, INotebookEditor, DEFAULT_NOTEBOOK_PROVIDER, SQL_NOTEBOOK_PROVIDER, INotebookSection, INavigationProvider } from 'sql/workbench/services/notebook/browser/notebookService';
+import { INotebookService, INotebookParams, INotebookManager, INotebookEditor, DEFAULT_NOTEBOOK_PROVIDER, SQL_NOTEBOOK_PROVIDER, INotebookSection, INavigationProvider, ICellEditorProvider } from 'sql/workbench/services/notebook/browser/notebookService';
 import { NotebookModel } from 'sql/workbench/contrib/notebook/browser/models/notebookModel';
 import { ModelFactory } from 'sql/workbench/contrib/notebook/browser/models/modelFactory';
 import * as notebookUtils from 'sql/workbench/contrib/notebook/browser/models/notebookUtils';
@@ -51,8 +51,11 @@ import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { Button } from 'sql/base/browser/ui/button/button';
 import { isUndefinedOrNull } from 'vs/base/common/types';
 import { IBootstrapParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
-import { getErrorMessage } from 'vs/base/common/errors';
+import { getErrorMessage, onUnexpectedError } from 'vs/base/common/errors';
 import { find, firstIndex } from 'vs/base/common/arrays';
+import { CodeCellComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/codeCell.component';
+import { TextCellComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/textCell.component';
+import { NotebookRange } from 'sql/workbench/contrib/notebook/find/notebookFindDecorations';
 import { ExtensionsViewlet, ExtensionsViewPaneContainer } from 'vs/workbench/contrib/extensions/browser/extensionsViewlet';
 
 
@@ -68,6 +71,9 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 	@ViewChild('container', { read: ElementRef }) private container: ElementRef;
 	@ViewChild('bookNav', { read: ElementRef }) private bookNav: ElementRef;
 
+	@ViewChildren(CodeCellComponent) private codeCells: QueryList<CodeCellComponent>;
+	@ViewChildren(TextCellComponent) private textCells: QueryList<ICellEditorProvider>;
+
 	private _model: NotebookModel;
 	protected _actionBar: Taskbar;
 	protected isLoading: boolean;
@@ -116,7 +122,7 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		this.updateTheme(this.themeService.getColorTheme());
 		this.initActionBar();
 		this.setScrollPosition();
-		this.doLoad();
+		this.doLoad().catch(e => onUnexpectedError(e));
 		this.initNavSection();
 	}
 
@@ -139,6 +145,28 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
 		return this._model ? this._model.cells : [];
 	}
 
+	public get cellEditors(): ICellEditorProvider[] {
+		let editors: ICellEditorProvider[] = [];
+		if (this.codeCells) {
+			this.codeCells.toArray().forEach(cell => editors.push(...cell.cellEditors));
+		}
+		if (this.textCells) {
+			editors.push(...this.textCells.toArray());
+		}
+		return editors;
+	}
+
+	public deltaDecorations(newDecorationRange: NotebookRange, oldDecorationRange: NotebookRange): void {
+		if (newDecorationRange && newDecorationRange.cell && newDecorationRange.cell.cellType === 'markdown') {
+			let cell = this.cellEditors.filter(c => c.cellGuid() === newDecorationRange.cell.cellGuid)[0];
+			cell.deltaDecorations(newDecorationRange, undefined);
+		}
+		if (oldDecorationRange && oldDecorationRange.cell && oldDecorationRange.cell.cellType === 'markdown') {
+			let cell = this.cellEditors.filter(c => c.cellGuid() === oldDecorationRange.cell.cellGuid)[0];
+			cell.deltaDecorations(undefined, oldDecorationRange);
+		}
+	}
+
 	public get addCodeLabel(): string {
 		return localize('addCodeLabel', "Add code");
 	}

src/sql/workbench/contrib/notebook/browser/notebookActions.ts

@@ -20,6 +20,8 @@ import { NotebookModel } from 'sql/workbench/contrib/notebook/browser/models/not
 import { ICommandService } from 'vs/platform/commands/common/commands';
 import { CellType } from 'sql/workbench/contrib/notebook/common/models/contracts';
 import { getErrorMessage } from 'vs/base/common/errors';
+import { IEditorAction } from 'vs/editor/common/editorCommon';
+import { IFindNotebookController } from 'sql/workbench/contrib/notebook/find/notebookFindWidget';
 import { INotebookModel } from 'sql/workbench/contrib/notebook/browser/models/modelInterfaces';
 import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService';
 import { TreeUpdateUtils } from 'sql/workbench/contrib/objectExplorer/browser/treeUpdateUtils';
@@ -425,3 +427,35 @@ export class NewNotebookAction extends Action {
 		return this.commandService.executeCommand(NewNotebookAction.INTERNAL_NEW_NOTEBOOK_CMD_ID, { connectionProfile: connProfile });
 	}
 }
+
+export class NotebookFindNextAction implements IEditorAction {
+	public readonly id = 'notebook.findNext';
+	public readonly label = localize('notebook.findNext', "Find Next String");
+	public readonly alias = '';
+
+	constructor(private notebook: IFindNotebookController) { }
+
+	async run(): Promise<void> {
+		await this.notebook.findNext();
+	}
+
+	isSupported(): boolean {
+		return true;
+	}
+}
+
+export class NotebookFindPreviousAction implements IEditorAction {
+	public readonly id = 'notebook.findPrevious';
+	public readonly label = localize('notebook.findPrevious', "Find Previous String");
+	public readonly alias = '';
+
+	constructor(private notebook: IFindNotebookController) { }
+
+	async run(): Promise<void> {
+		await this.notebook.findPrevious();
+	}
+
+	isSupported(): boolean {
+		return true;
+	}
+}

src/sql/workbench/contrib/notebook/browser/notebookEditor.ts

@@ -14,31 +14,155 @@ import { CancellationToken } from 'vs/base/common/cancellation';
 import { NotebookInput } from 'sql/workbench/contrib/notebook/browser/models/notebookInput';
 import { NotebookModule } from 'sql/workbench/contrib/notebook/browser/notebook.module';
 import { NOTEBOOK_SELECTOR } from 'sql/workbench/contrib/notebook/browser/notebook.component';
-import { INotebookParams } from 'sql/workbench/services/notebook/browser/notebookService';
+import { INotebookParams, INotebookService } from 'sql/workbench/services/notebook/browser/notebookService';
 import { IStorageService } from 'vs/platform/storage/common/storage';
+import { ACTION_IDS, NOTEBOOK_MAX_MATCHES, IFindNotebookController, FindWidget, IConfigurationChangedEvent } from 'sql/workbench/contrib/notebook/find/notebookFindWidget';
+import { IOverlayWidget } from 'vs/editor/browser/editorBrowser';
+import { FindReplaceState, FindReplaceStateChangedEvent } from 'vs/editor/contrib/find/findState';
+import { IEditorAction } from 'vs/editor/common/editorCommon';
+import { Event, Emitter } from 'vs/base/common/event';
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { NotebookFindNextAction, NotebookFindPreviousAction } from 'sql/workbench/contrib/notebook/browser/notebookActions';
+import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
+import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { INotebookModel, INotebookFindModel } from 'sql/workbench/contrib/notebook/browser/models/modelInterfaces';
+import { IDisposable, DisposableStore, dispose } from 'vs/base/common/lifecycle';
+import { IModelDecorationsChangeAccessor, IModelDeltaDecoration } from 'vs/editor/common/model';
+import { NotebookFindDecorations, NotebookRange } from 'sql/workbench/contrib/notebook/find/notebookFindDecorations';
+import { TimeoutTimer } from 'vs/base/common/async';
+import { BaseTextEditor } from 'vs/workbench/browser/parts/editor/textEditor';
+import { onUnexpectedError } from 'vs/base/common/errors';
 
-export class NotebookEditor extends BaseEditor {
+export class NotebookEditor extends BaseEditor implements IFindNotebookController {
 
 	public static ID: string = 'workbench.editor.notebookEditor';
 	private _notebookContainer: HTMLElement;
+	private _currentDimensions: DOM.Dimension;
+	private _overlay: HTMLElement;
+	private _findState: FindReplaceState;
+	private _finder: FindWidget;
+	private _actionMap: { [x: string]: IEditorAction } = {};
+	private _onDidChangeConfiguration = new Emitter<IConfigurationChangedEvent>();
+	public onDidChangeConfiguration: Event<IConfigurationChangedEvent> = this._onDidChangeConfiguration.event;
+	private _notebookModel: INotebookModel;
+	private _findCountChangeListener: IDisposable;
+	private _currentMatch: NotebookRange;
+	private _previousMatch: NotebookRange;
+	private readonly _toDispose = new DisposableStore();
+	private readonly _startSearchingTimer: TimeoutTimer;
 
 	constructor(
 		@ITelemetryService telemetryService: ITelemetryService,
 		@IThemeService themeService: IThemeService,
-		@IInstantiationService private instantiationService: IInstantiationService,
-		@IStorageService storageService: IStorageService
+		@IInstantiationService private _instantiationService: IInstantiationService,
+		@IStorageService storageService: IStorageService,
+		@IContextViewService private _contextViewService: IContextViewService,
+		@IKeybindingService private _keybindingService: IKeybindingService,
+		@IContextKeyService private _contextKeyService: IContextKeyService,
+		@IWorkbenchThemeService private _themeService: IWorkbenchThemeService,
+		@INotebookService private _notebookService?: INotebookService
 	) {
 		super(NotebookEditor.ID, telemetryService, themeService, storageService);
+		this._startSearchingTimer = new TimeoutTimer();
+		this._actionMap[ACTION_IDS.FIND_NEXT] = this._instantiationService.createInstance(NotebookFindNextAction, this);
+		this._actionMap[ACTION_IDS.FIND_PREVIOUS] = this._instantiationService.createInstance(NotebookFindPreviousAction, this);
+	}
+
+	public dispose(): void {
+		dispose(this._startSearchingTimer);
+		this._toDispose.dispose();
 	}
 
 	public get notebookInput(): NotebookInput {
 		return this.input as NotebookInput;
 	}
 
+	private get _findDecorations(): NotebookFindDecorations {
+		return this.notebookInput.notebookFindModel.findDecorations;
+	}
+
+	public getPosition(): NotebookRange {
+		return this._currentMatch;
+	}
+
+	public getLastPosition(): NotebookRange {
+		return this._previousMatch;
+	}
+	public getCellEditor(cellGuid: string): BaseTextEditor | undefined {
+		let editorImpl = this._notebookService.findNotebookEditor(this.notebookInput.notebookUri);
+		if (editorImpl) {
+			let cellEditorProvider = editorImpl.cellEditors.filter(c => c.cellGuid() === cellGuid)[0];
+			return cellEditorProvider ? cellEditorProvider.getEditor() : undefined;
+		}
+		return undefined;
+	}
+
+	// updateDecorations is only used for modifying decorations on markdown cells
+	// changeDecorations is the function that handles the decorations w.r.t codeEditor cells.
+	public updateDecorations(newDecorationRange: NotebookRange, oldDecorationRange: NotebookRange): void {
+		let editorImpl = this._notebookService.findNotebookEditor(this.notebookInput.notebookUri);
+		if (editorImpl) {
+			editorImpl.deltaDecorations(newDecorationRange, oldDecorationRange);
+		}
+	}
+
+	public changeDecorations(callback: (changeAccessor: IModelDecorationsChangeAccessor) => any): any {
+		if (!this.notebookInput.notebookFindModel) {
+			// callback will not be called
+			return null;
+		}
+		return this.notebookInput.notebookFindModel.changeDecorations(callback, undefined);
+	}
+
+	public deltaDecorations(oldDecorations: string[], newDecorations: IModelDeltaDecoration[]): string[] {
+		return undefined;
+	}
+
+	async setNotebookModel(): Promise<void> {
+		let notebookEditorModel = await this.notebookInput.resolve();
+		if (notebookEditorModel && !this.notebookInput.notebookFindModel.notebookModel) {
+			this._notebookModel = notebookEditorModel.getNotebookModel();
+			this.notebookInput.notebookFindModel.notebookModel = this._notebookModel;
+		}
+		if (!this.notebookInput.notebookFindModel.findDecorations) {
+			this.notebookInput.notebookFindModel.setNotebookFindDecorations(this);
+		}
+	}
+
+	public async getNotebookModel(): Promise<INotebookModel> {
+		if (!this._notebookModel) {
+			await this.setNotebookModel();
+		}
+		return this._notebookModel;
+
+	}
+
+	public get notebookFindModel(): INotebookFindModel {
+		return this.notebookInput.notebookFindModel;
+	}
+
 	/**
-	 * Called to create the editor in the parent element.
+	 * @param parent Called to create the editor in the parent element.
 	 */
 	public createEditor(parent: HTMLElement): void {
+		this._overlay = document.createElement('div');
+		this._overlay.className = 'overlayWidgets monaco-editor';
+		this._overlay.style.width = '100%';
+		this._overlay.style.zIndex = '4';
+
+		this._findState = new FindReplaceState();
+		this._findState.onFindReplaceStateChange(e => this._onFindStateChange(e));
+
+		this._finder = new FindWidget(
+			this,
+			this._findState,
+			this._contextViewService,
+			this._keybindingService,
+			this._contextKeyService,
+			this._themeService
+		);
+		this._finder.getDomNode().style.visibility = 'hidden';
 	}
 
 	/**
@@ -52,12 +176,13 @@ export class NotebookEditor extends BaseEditor {
 	 * To be called when the container of this editor changes size.
 	 */
 	public layout(dimension: DOM.Dimension): void {
+		this._currentDimensions = dimension;
 		if (this.notebookInput) {
 			this.notebookInput.doChangeLayout();
 		}
 	}
 
-	public setInput(input: NotebookInput, options: EditorOptions): Promise<void> {
+	public async setInput(input: NotebookInput, options: EditorOptions): Promise<void> {
 		if (this.input && this.input.matches(input)) {
 			return Promise.resolve(undefined);
 		}
@@ -65,9 +190,8 @@ export class NotebookEditor extends BaseEditor {
 		const parentElement = this.getContainer();
 
 		super.setInput(input, options, CancellationToken.None);
-
 		DOM.clearNode(parentElement);
-
+		await this.setFindInput(parentElement);
 		if (!input.hasBootstrapped) {
 			let container = DOM.$<HTMLElement>('.notebookEditor');
 			container.style.height = '100%';
@@ -81,6 +205,16 @@ export class NotebookEditor extends BaseEditor {
 		}
 	}
 
+	private async setFindInput(parentElement: HTMLElement): Promise<void> {
+		parentElement.appendChild(this._overlay);
+		await this.setNotebookModel();
+		if (this._findState.isRevealed) {
+			this._triggerInputChange();
+		} else {
+			this._findDecorations.clearDecorations();
+		}
+	}
+
 	/**
 	 * Load the angular components and record for this input that we have done so
 	 */
@@ -93,7 +227,7 @@ export class NotebookEditor extends BaseEditor {
 			providerInfo: input.getProviderInfo(),
 			profile: input.connectionProfile
 		};
-		bootstrapAngular(this.instantiationService,
+		bootstrapAngular(this._instantiationService,
 			NotebookModule,
 			this._notebookContainer,
 			NOTEBOOK_SELECTOR,
@@ -101,4 +235,168 @@ export class NotebookEditor extends BaseEditor {
 			input
 		);
 	}
+
+	public getConfiguration() {
+		return {
+			layoutInfo: {
+				width: this._currentDimensions ? this._currentDimensions.width : 0,
+				height: this._currentDimensions ? this._currentDimensions.height : 0
+			}
+		};
+	}
+
+	public layoutOverlayWidget(widget: IOverlayWidget): void {
+		// no op
+	}
+
+	public addOverlayWidget(widget: IOverlayWidget): void {
+		let domNode = widget.getDomNode();
+		domNode.style.right = '28px';
+		domNode.style.top = '34px';
+		this._overlay.appendChild(domNode);
+		this._findState.change({ isRevealed: false }, false);
+	}
+
+	public getAction(id: string): IEditorAction {
+		return this._actionMap[id];
+	}
+
+
+	private async _onFindStateChange(e: FindReplaceStateChangedEvent): Promise<void> {
+		if (!this._notebookModel) {
+			await this.setNotebookModel();
+		}
+		if (this._findCountChangeListener === undefined && this._notebookModel) {
+			this._findCountChangeListener = this.notebookInput.notebookFindModel.onFindCountChange(() => this._updateFinderMatchState());
+		}
+		if (e.isRevealed) {
+			if (this._findState.isRevealed) {
+				this._finder.getDomNode().style.visibility = 'visible';
+				this._finder.focusFindInput();
+				this._updateFinderMatchState();
+				// if find is closed and opened again, highlight the last position.
+				this._findDecorations.setStartPosition(this.getPosition());
+			} else {
+				this._finder.getDomNode().style.visibility = 'hidden';
+				this._findDecorations.clearDecorations();
+			}
+		}
+
+		if (e.searchString) {
+			this._findDecorations.clearDecorations();
+			if (this._notebookModel) {
+				if (this._findState.searchString) {
+					let findScope = this._findDecorations.getFindScope();
+					if (this._findState.searchString === this.notebookFindModel.findExpression && findScope !== null) {
+						if (findScope) {
+							this._updateFinderMatchState();
+							this._findState.changeMatchInfo(
+								this.notebookFindModel.getFindIndex(),
+								this._findDecorations.getCount(),
+								this._currentMatch
+							);
+							this._setCurrentFindMatch(findScope);
+						}
+					} else {
+						this.notebookInput.notebookFindModel.clearDecorations();
+						this.notebookFindModel.findExpression = this._findState.searchString;
+						this.notebookInput.notebookFindModel.find(this._findState.searchString, NOTEBOOK_MAX_MATCHES).then(findRange => {
+							if (findRange) {
+								this.updatePosition(findRange);
+							} else if (this.notebookFindModel.findMatches.length > 0) {
+								this.updatePosition(this.notebookFindModel.findMatches[0].range);
+							} else {
+								this.notebookInput.notebookFindModel.clearFind();
+								this._updateFinderMatchState();
+								this._finder.focusFindInput();
+								return;
+							}
+							this._updateFinderMatchState();
+							this._finder.focusFindInput();
+							this._findDecorations.set(this.notebookFindModel.findMatches, this._currentMatch);
+							this._findState.changeMatchInfo(
+								this.notebookFindModel.getFindIndex(),
+								this._findDecorations.getCount(),
+								this._currentMatch
+							);
+							this._setCurrentFindMatch(this._currentMatch);
+						});
+					}
+				} else {
+					this.notebookFindModel.clearFind();
+				}
+			}
+		}
+	}
+
+	public setSelection(range: NotebookRange): void {
+		this._previousMatch = this._currentMatch;
+		this._currentMatch = range;
+	}
+	public toggleSearch(): void {
+		this._findState.change({
+			isRevealed: !this._findState.isRevealed
+		}, false);
+		if (this._findState.isRevealed) {
+			this._finder.focusFindInput();
+		}
+	}
+
+	public findNext(): void {
+		this.notebookFindModel.findNext().then(p => {
+			this.updatePosition(p);
+			this._updateFinderMatchState();
+			this._setCurrentFindMatch(p);
+		}, er => { onUnexpectedError(er); });
+	}
+
+
+	public findPrevious(): void {
+		this.notebookFindModel.findPrevious().then(p => {
+			this.updatePosition(p);
+			this._updateFinderMatchState();
+			this._setCurrentFindMatch(p);
+		}, er => { onUnexpectedError(er); });
+	}
+
+	private _updateFinderMatchState(): void {
+		if (this.notebookInput && this.notebookInput.notebookFindModel) {
+			this._findState.changeMatchInfo(this.notebookFindModel.getFindIndex(), this.notebookFindModel.getFindCount(), this._currentMatch);
+		} else {
+			this._findState.changeMatchInfo(0, 0, undefined);
+		}
+	}
+
+	private updatePosition(range: NotebookRange): void {
+		this._previousMatch = this._currentMatch;
+		this._currentMatch = range;
+	}
+
+	private _setCurrentFindMatch(match: NotebookRange): void {
+		if (match) {
+			this._notebookModel.updateActiveCell(match.cell);
+			this._findDecorations.setCurrentFindMatch(match);
+			this.setSelection(match);
+		}
+	}
+
+	private _triggerInputChange(): void {
+		let changeEvent: FindReplaceStateChangedEvent = {
+			moveCursor: true,
+			updateHistory: true,
+			searchString: true,
+			replaceString: false,
+			isRevealed: false,
+			isReplaceRevealed: false,
+			isRegex: false,
+			wholeWord: false,
+			matchCase: false,
+			preserveCase: false,
+			searchScope: false,
+			matchesPosition: false,
+			matchesCount: false,
+			currentMatch: false
+		};
+		this._onFindStateChange(changeEvent).catch(e => { onUnexpectedError(e); });
+	}
 }