diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts index 60148eb86f..b905430a52 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts @@ -221,6 +221,7 @@ export class MarkdownToolbarComponent extends AngularDisposable { } } this._notebookEditor = this._notebookService.findNotebookEditor(this.cellModel?.notebookModel?.notebookUri); + this.updateActiveViewAction(); } public async onInsertButtonClick(event: MouseEvent, type: MarkdownButtonType): Promise { @@ -291,7 +292,7 @@ export class MarkdownToolbarComponent extends AngularDisposable { } } - public removeActiveClassFromModeActions() { + private removeActiveClassFromModeActions() { const activeClass = ' active'; for (let action of [this._toggleTextViewAction, this._toggleSplitViewAction, this._toggleMarkdownViewAction]) { if (action.class.includes(activeClass)) { @@ -300,6 +301,16 @@ export class MarkdownToolbarComponent extends AngularDisposable { } } + public updateActiveViewAction() { + this.removeActiveClassFromModeActions(); + const activeClass = ' active'; + switch (this.cellModel.currentMode) { + case CellEditModes.MARKDOWN: this._toggleMarkdownViewAction.class += activeClass; break; + case CellEditModes.SPLIT: this._toggleSplitViewAction.class += activeClass; break; + case CellEditModes.WYSIWYG: this._toggleTextViewAction.class += activeClass; break; + } + } + /** * Instantiate modal for use as callout when inserting Link or Image into markdown. * @param calloutStyle Style of callout passed in to determine which callout is rendered. diff --git a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts index d805e2346c..fbd62f0810 100644 --- a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts +++ b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts @@ -607,8 +607,6 @@ export class ToggleViewAction extends Action { } public override async run(context: MarkdownToolbarComponent): Promise { - context.removeActiveClassFromModeActions(); - this.class += ' active'; context.cellModel.showPreview = this.showPreview; context.cellModel.showMarkdown = this.showMarkdown; // Hide image button in WYSIWYG mode @@ -617,5 +615,6 @@ export class ToggleViewAction extends Action { } else { context.showLinkAndImageButtons(); } + context.updateActiveViewAction(); } } diff --git a/src/sql/workbench/services/notebook/browser/models/cell.ts b/src/sql/workbench/services/notebook/browser/models/cell.ts index a33dc019d9..dd61e16d67 100644 --- a/src/sql/workbench/services/notebook/browser/models/cell.ts +++ b/src/sql/workbench/services/notebook/browser/models/cell.ts @@ -87,6 +87,7 @@ export class CellModel extends Disposable implements ICellModel { private _outputCounter = 0; // When re-executing the same cell, ensure that we apply chart options in the same order private _attachments: nb.ICellAttachments | undefined; private _preventNextChartCache: boolean = false; + private _lastEditMode: string | undefined; public richTextCursorPosition: ICaretPosition | undefined; public markdownCursorPosition: IPosition | undefined; @@ -230,8 +231,9 @@ export class CellModel extends Disposable implements ICellModel { public set isEditMode(isEditMode: boolean) { this._isEditMode = isEditMode; if (this._isEditMode) { - this.showPreview = this._defaultTextEditMode !== TextCellEditModes.Markdown; - this.showMarkdown = this._defaultTextEditMode !== TextCellEditModes.RichText; + const newEditMode = this._lastEditMode ?? this._defaultTextEditMode; + this.showPreview = newEditMode !== TextCellEditModes.Markdown; + this.showMarkdown = newEditMode !== TextCellEditModes.RichText; } this._onCellModeChanged.fire(this._isEditMode); // Note: this does not require a notebook update as it does not change overall state @@ -421,7 +423,7 @@ export class CellModel extends Disposable implements ICellModel { public set showPreview(val: boolean) { this._showPreview = val; this._onCellPreviewChanged.fire(this._showPreview); - this._onCurrentEditModeChanged.fire(this.currentMode); + this.doModeUpdates(); } public get showMarkdown(): boolean { @@ -431,6 +433,13 @@ export class CellModel extends Disposable implements ICellModel { public set showMarkdown(val: boolean) { this._showMarkdown = val; this._onCellMarkdownChanged.fire(this._showMarkdown); + this.doModeUpdates(); + } + + private doModeUpdates() { + if (this._isEditMode) { + this._lastEditMode = this._showPreview && this._showMarkdown ? TextCellEditModes.SplitView : (this._showMarkdown ? TextCellEditModes.Markdown : TextCellEditModes.RichText); + } this._onCurrentEditModeChanged.fire(this.currentMode); }