Add markdown cell to Notebook (#3014)

* add markdown cell

* add markdown preview for Notebook

* formatting

* address comment

src/sql/parts/notebook/cellViews/code.component.ts

@@ -4,13 +4,14 @@
 *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./code';
 
-import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild, Output, EventEmitter } from '@angular/core';
 
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { QueryTextEditor } from 'sql/parts/modelComponents/queryTextEditor';
+import { ICellModel } from 'sql/parts/notebook/cellViews/interfaces';
 
 import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import * as themeColors from 'vs/workbench/common/theme';
@@ -26,7 +27,6 @@ import * as DOM from 'vs/base/browser/dom';
 import { IModeService } from 'vs/editor/common/services/modeService';
 import { IModelService } from 'vs/editor/common/services/modelService';
 
-
 export const CODE_SELECTOR: string = 'code-component';
 
 @Component({
@@ -36,9 +36,8 @@ export const CODE_SELECTOR: string = 'code-component';
 export class CodeComponent extends AngularDisposable implements OnInit {
 	@ViewChild('toolbar', { read: ElementRef }) private toolbarElement: ElementRef;
 	@ViewChild('editor', { read: ElementRef }) private codeElement: ElementRef;
-	@Input() id: string;
-	@Input() content: string;
-	@Input() language: string;
+	@Input() cellModel: ICellModel;
+	@Output() public onContentChanged = new EventEmitter<void>();
 
 	private readonly _minimumHeight = 30;
 	private _editor: QueryTextEditor;
@@ -81,18 +80,19 @@ export class CodeComponent extends AngularDisposable implements OnInit {
 		this._editor.setVisible(true);
 		this._editor.setMinimumHeight(this._minimumHeight);
 		let uri = this.createUri();
-		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.language, '', '');
+		this._editorInput = instantiationService.createInstance(UntitledEditorInput, uri, false, this.cellModel.language, '', '');
 		this._editor.setInput(this._editorInput, undefined);
 		this._editorInput.resolve().then(model => {
 			this._editorModel = model.textEditorModel;
-			this._modelService.updateModel(this._editorModel, this.content);
+			this._modelService.updateModel(this._editorModel, this.cellModel.source);
 		});
 
 		this._register(this._editor);
 		this._register(this._editorInput);
 		this._register(this._editorModel.onDidChangeContent(e => {
-			this.content = this._editorModel.getValue();
 			this._editor.setHeightToScrollHeight();
+			this.cellModel.source = this._editorModel.getValue();
+			this.onContentChanged.emit();
 		}));
 		this.layout();
 	}
@@ -105,22 +105,22 @@ export class CodeComponent extends AngularDisposable implements OnInit {
 	}
 
 	private createUri(): URI {
-		let uri = URI.from({ scheme: Schemas.untitled, path: `notebook-editor-${this.id}` });
+		let uri = URI.from({ scheme: Schemas.untitled, path: `notebook-editor-${this.cellModel.id}` });
 		// Use this to set the internal (immutable) and public (shared with extension) uri properties
-		this._uri = uri.toString();
+		this.cellModel.cellUri = uri;
 		return uri;
 	}
 
 	/// Editor Functions
 	private updateModel() {
 		if (this._editorModel) {
-			this._modelService.updateModel(this._editorModel, this.content);
+			this._modelService.updateModel(this._editorModel, this.cellModel.source);
 		}
 	}
 
 	private updateLanguageMode() {
 		if (this._editorModel && this._editor) {
-			this._modeService.getOrCreateMode(this.language).then((modeValue) => {
+			this._modeService.getOrCreateMode(this.cellModel.language).then((modeValue) => {
 				this._modelService.setMode(this._editorModel, modeValue);
 			});
 		}

src/sql/parts/notebook/cellViews/codeCell.component.html

@@ -6,7 +6,7 @@
 -->
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
 	<div class="notebook-code" style="flex: 0 0 auto;">
-		<code-component [id]="cellModel.id" [content]="cellModel.source" [language]="cellModel.language"></code-component>
+		<code-component [cellModel]="cellModel"></code-component>
 	</div>
 	<div #output class="notebook-output" style="flex: 0 0 auto;">
 		Place Holder for output area

src/sql/parts/notebook/cellViews/interfaces.ts

@@ -5,7 +5,7 @@
 
 import { OnDestroy } from '@angular/core';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
-
+import URI from 'vs/base/common/uri';
 
 export abstract class CellView extends AngularDisposable implements OnDestroy {
 	constructor() {
@@ -21,6 +21,7 @@ export interface ICellModel {
 	source: string;
 	cellType: CellType;
 	active: boolean;
+	cellUri?: URI;
 }
 
 export type CellType = 'code' | 'markdown' | 'raw';

src/sql/parts/notebook/cellViews/textCell.component.html

@@ -0,0 +1,13 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column">
+	<div class="notebook-text" style="flex: 0 0 auto;">
+		<code-component [cellModel]="cellModel" (onContentChanged)="handleContentChanged()"></code-component>
+	</div>
+	<div #preview class="notebook-preview" style="flex: 0 0 auto;">
+	</div>
+</div>

src/sql/parts/notebook/cellViews/textCell.component.ts

@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+*  Copyright (c) Microsoft Corporation. All rights reserved.
+*  Licensed under the Source EULA. See License.txt in the project root for license information.
+*--------------------------------------------------------------------------------------------*/
+import 'vs/css!./textCell';
+
+import { OnInit, Component, Input, Inject, forwardRef, ElementRef, ChangeDetectorRef, OnDestroy, ViewChild } from '@angular/core';
+
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { CellView, ICellModel } from 'sql/parts/notebook/cellViews/interfaces';
+
+import { IColorTheme, IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import * as themeColors from 'vs/workbench/common/theme';
+import { ICommandService } from 'vs/platform/commands/common/commands';
+
+export const TEXT_SELECTOR: string = 'text-cell-component';
+
+@Component({
+	selector: TEXT_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./textCell.component.html'))
+})
+export class TextCellComponent extends CellView implements OnInit {
+	@ViewChild('preview', { read: ElementRef }) private output: ElementRef;
+	@Input() cellModel: ICellModel;
+	private _content: string;
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrapService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(ICommandService) private _commandService: ICommandService
+	) {
+		super();
+	}
+
+	ngOnChanges() {
+		this.updatePreview();
+	}
+
+	private updatePreview() {
+		if (this._content !== this.cellModel.source) {
+			this._content = this.cellModel.source;
+			// todo: pass in the notebook filename instead of undefined value
+			this._commandService.executeCommand('notebook.showPreview', undefined, this._content).then((htmlcontent) => {
+				let outputElement = <HTMLElement>this.output.nativeElement;
+				outputElement.innerHTML = htmlcontent;
+			});
+		}
+	}
+
+	ngOnInit() {
+		this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
+		this.updateTheme(this.themeService.getColorTheme());
+	}
+
+	// Todo: implement layout
+	public layout() {
+	}
+
+	private updateTheme(theme: IColorTheme): void {
+		let outputElement = <HTMLElement>this.output.nativeElement;
+		outputElement.style.borderTopColor = theme.getColor(themeColors.SIDE_BAR_BACKGROUND, true).toString();
+	}
+
+	public handleContentChanged(): void {
+		this.updatePreview();
+	}
+}

src/sql/parts/notebook/cellViews/textCell.css

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+text-cell-component {
+	display: block;
+}
+
+text-cell-component .notebook-preview {
+	border-top-width: 1px;
+	border-top-style: solid;
+}

src/sql/parts/notebook/notebook.component.html

@@ -12,8 +12,10 @@
 	</div>
 	<div style="flex: 1 1 auto; position: relative">
 		<div class="notebook-cell" *ngFor="let cell of cells" (click)="selectCell(cell)" [class.active]="cell.active" >
-			<code-cell-component [cellModel]="cell">
+			<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell">
 			</code-cell-component>
+			<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell">
+			</text-cell-component>
 		</div>
 	</div>
 </div>

src/sql/parts/notebook/notebook.component.ts

@@ -38,7 +38,10 @@ export class NotebookComponent extends AngularDisposable implements OnInit {
 		let cell2: ICellModel = {
 			id: '2', language: 'sql', source: 'select 1', cellType: CellTypes.Code, active: false
 		};
-		this.cells.push(cell1, cell2);
+		let cell3: ICellModel = {
+			id: '3', language: 'markdown', source: '## This is test!', cellType: CellTypes.Markdown, active: false
+		};
+		this.cells.push(cell1, cell2, cell3);
 	}
 
 	ngOnInit() {

src/sql/parts/notebook/notebook.module.ts

@@ -25,6 +25,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { Registry } from 'vs/platform/registry/common/platform';
 import { CodeComponent } from 'sql/parts/notebook/cellViews/code.component';
 import { CodeCellComponent } from 'sql/parts/notebook/cellViews/codeCell.component';
+import { TextCellComponent } from 'sql/parts/notebook/cellViews/textCell.component';
 
 export const NotebookModule = (params, selector: string, instantiationService: IInstantiationService): any => {
 	@NgModule({
@@ -35,6 +36,7 @@ export const NotebookModule = (params, selector: string, instantiationService: I
 			InputBox,
 			CodeComponent,
 			CodeCellComponent,
+			TextCellComponent,
 			NotebookComponent,
 			ComponentHostDirective
 		],