ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

3147: Notebook markdown cell should be opened in preview mode (#3168)

Browse Source 
* 3147: Notebook markdown cell should be opened in preview mode

* 3147: Default ability to double click a cell to add text

* Misc changes

* CSS cleanup

* Localization stuff

* Remove constants file in Notebook codebase
This commit is contained in:
Raj
2018-11-09 10:38:14 -08:00
committed by GitHub
parent 7508192ab9
commit a2bbf3f44e
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/sql/parts/notebook/cellViews/textCell.component.ts
View File

@@ -14,6 +14,7 @@ import * as themeColors from 'vs/workbench/common/theme';
import { ICommandService } from 'vs/platform/commands/common/commands'; import { ICommandService } from 'vs/platform/commands/common/commands';
import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces'; import { ICellModel } from 'sql/parts/notebook/models/modelInterfaces';
import { ISanitizer, defaultSanitizer } from 'sql/parts/notebook/outputs/sanitizer'; import { ISanitizer, defaultSanitizer } from 'sql/parts/notebook/outputs/sanitizer';
import { localize } from 'vs/nls';
export const TEXT_SELECTOR: string = 'text-cell-component'; export const TEXT_SELECTOR: string = 'text-cell-component';
@@ -35,7 +36,7 @@ export class TextCellComponent extends CellView implements OnInit {
@Inject(ICommandService) private _commandService: ICommandService @Inject(ICommandService) private _commandService: ICommandService
) { ) {
super(); super();
this.isEditMode = true; this.isEditMode = false;
} }
ngOnChanges() { ngOnChanges() {
@@ -50,14 +51,23 @@ export class TextCellComponent extends CellView implements OnInit {
return this._sanitizer = defaultSanitizer; 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() { private updatePreview() {
if (this.cellModel.source && this._content !== this.cellModel.source) { if (this._content !== this.cellModel.source) {
this._content = this.sanitizeContent(this.cellModel.source); if (!this.cellModel.source && !this.isEditMode) {
// todo: pass in the notebook filename instead of undefined value (<HTMLElement>this.output.nativeElement).innerHTML = localize('doubleClickEdit', 'Double-click to edit');
this._commandService.executeCommand<string>('notebook.showPreview', undefined, this._content).then((htmlcontent) => { } else {
let outputElement = <HTMLElement>this.output.nativeElement; this._content = this.sanitizeContent(this.cellModel.source);
outputElement.innerHTML = htmlcontent; // todo: pass in the notebook filename instead of undefined value
}); this._commandService.executeCommand<string>('notebook.showPreview', undefined, this._content).then((htmlcontent) => {
let outputElement = <HTMLElement>this.output.nativeElement;
outputElement.innerHTML = htmlcontent;
});
}
} }
} }
@@ -70,6 +80,7 @@ export class TextCellComponent extends CellView implements OnInit {
} }
ngOnInit() { ngOnInit() {
this.updatePreview();
this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this)); this._register(this.themeService.onDidColorThemeChange(this.updateTheme, this));
this.updateTheme(this.themeService.getColorTheme()); this.updateTheme(this.themeService.getColorTheme());
} }
@@ -89,6 +100,7 @@ export class TextCellComponent extends CellView implements OnInit {
public toggleEditMode(): void { public toggleEditMode(): void {
this.isEditMode = !this.isEditMode; this.isEditMode = !this.isEditMode;
this.updatePreview();
this._changeRef.detectChanges(); this._changeRef.detectChanges();
} }
} }

2
src/sql/parts/notebook/cellViews/textCell.css
View File

@@ -11,4 +11,4 @@ text-cell-component .notebook-preview {
border-top-width: 1px; border-top-width: 1px;
border-top-style: solid; border-top-style: solid;
user-select: initial; user-select: initial;
} }