Fixed some issues for Markdown and CSS (#3336)

* Fixed few markdown cell issues
* Change the boolean value from 1 to true
This commit is contained in:
Yurong He
2018-11-29 12:50:53 -08:00
committed by GitHub
parent 8fbecc0227
commit 702dbddd78
7 changed files with 64 additions and 42 deletions

View File

@@ -15,6 +15,7 @@ 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';
import { NotebookModel } from 'sql/parts/notebook/models/notebookModel';
export const TEXT_SELECTOR: string = 'text-cell-component';
@@ -25,13 +26,20 @@ export const TEXT_SELECTOR: string = 'text-cell-component';
export class TextCellComponent extends CellView implements OnInit, OnChanges {
@ViewChild('preview', { read: ElementRef }) private output: ElementRef;
@Input() cellModel: ICellModel;
@Input() set model(value: NotebookModel) {
this._model = value;
}
@Input() set activeCellId(value: string) {
this._activeCellId = value;
}
private _content: string;
private isEditMode: boolean;
private _sanitizer: ISanitizer;
private _previewCssApplied: boolean = false;
private _model: NotebookModel;
private _activeCellId: string;
constructor(
@@ -44,17 +52,6 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
this.isEditMode = false;
}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
this.updatePreview();
for (let propName in changes) {
if (propName === 'activeCellId') {
let changedProp = changes[propName];
this._activeCellId = changedProp.currentValue;
break;
}
}
}
//Gets sanitizer from ISanitizer interface
private get sanitizer(): ISanitizer {
if (this._sanitizer) {
@@ -63,17 +60,43 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
return this._sanitizer = defaultSanitizer;
}
get model(): NotebookModel {
return this._model;
}
get activeCellId(): string {
return this._activeCellId;
}
ngOnInit() {
this.updatePreview();
this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
this.updateTheme(this.themeService.getColorTheme());
this.cellModel.onOutputsChanged(e => {
this.updatePreview();
});
}
ngOnChanges(changes: { [propKey: string]: SimpleChange }) {
for (let propName in changes) {
if (propName === 'activeCellId') {
let changedProp = changes[propName];
this._activeCellId = changedProp.currentValue;
if (this._activeCellId) {
this.toggleEditMode(false);
}
break;
}
}
}
/**
* 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._content !== this.cellModel.source) {
if (this._content !== this.cellModel.source || this.cellModel.source.length === 0) {
if (!this.cellModel.source && !this.isEditMode) {
(<HTMLElement>this.output.nativeElement).innerHTML = localize('doubleClickEdit', 'Double-click to edit');
} else {
@@ -94,15 +117,7 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
}
return content;
}
ngOnInit() {
this.updatePreview();
this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
this.updateTheme(this.themeService.getColorTheme());
this.cellModel.onOutputsChanged(e => {
this.updatePreview();
});
}
// Todo: implement layout
public layout() {
@@ -120,8 +135,8 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
this.updatePreview();
}
public toggleEditMode(): void {
this.isEditMode = !this.isEditMode;
public toggleEditMode(editMode?: boolean): void {
this.isEditMode = editMode !== undefined? editMode : !this.isEditMode;
this.updatePreviewCssClass();
this.updatePreview();
this._changeRef.detectChanges();