diff --git a/src/sql/parts/notebook/cellViews/textCell.component.ts b/src/sql/parts/notebook/cellViews/textCell.component.ts index b436bf1f81..f7299f78f7 100644 --- a/src/sql/parts/notebook/cellViews/textCell.component.ts +++ b/src/sql/parts/notebook/cellViews/textCell.component.ts @@ -14,6 +14,7 @@ import * as themeColors from 'vs/workbench/common/theme'; import { ICommandService } from 'vs/platform/commands/common/commands'; import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces'; import { ISanitizer, defaultSanitizer } from 'sql/parts/notebook/outputs/sanitizer'; +import { localize } from 'vs/nls'; export const TEXT_SELECTOR: string = 'text-cell-component'; @@ -35,7 +36,7 @@ export class TextCellComponent extends CellView implements OnInit { @Inject(ICommandService) private _commandService: ICommandService ) { super(); - this.isEditMode = true; + this.isEditMode = false; } ngOnChanges() { @@ -50,14 +51,23 @@ export class TextCellComponent extends CellView implements OnInit { return this._sanitizer = defaultSanitizer; } + /** + * Updates the preview of markdown component with latest changes + * If content is empty and in non-edit mode, default it to 'Double-click to edit' + * Sanitizes the data to be shown in markdown cell + */ private updatePreview() { - if (this.cellModel.source && this._content !== this.cellModel.source) { - this._content = this.sanitizeContent(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 = this.output.nativeElement; - outputElement.innerHTML = htmlcontent; - }); + if (this._content !== this.cellModel.source) { + if (!this.cellModel.source && !this.isEditMode) { + (this.output.nativeElement).innerHTML = localize('doubleClickEdit', 'Double-click to edit'); + } else { + this._content = this.sanitizeContent(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 = this.output.nativeElement; + outputElement.innerHTML = htmlcontent; + }); + } } } @@ -70,6 +80,7 @@ export class TextCellComponent extends CellView implements OnInit { } ngOnInit() { + this.updatePreview(); this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this)); this.updateTheme(this.themeService.getColorTheme()); } @@ -89,6 +100,7 @@ export class TextCellComponent extends CellView implements OnInit { public toggleEditMode(): void { this.isEditMode = !this.isEditMode; + this.updatePreview(); this._changeRef.detectChanges(); } } diff --git a/src/sql/parts/notebook/cellViews/textCell.css b/src/sql/parts/notebook/cellViews/textCell.css index f030bd8b51..df8a1dca3e 100644 --- a/src/sql/parts/notebook/cellViews/textCell.css +++ b/src/sql/parts/notebook/cellViews/textCell.css @@ -11,4 +11,4 @@ text-cell-component .notebook-preview { border-top-width: 1px; border-top-style: solid; user-select: initial; -} +} \ No newline at end of file