From f99adf3de4ac9226d903adae961de08d6aa215ca Mon Sep 17 00:00:00 2001
From: Lucy Zhang <luczhan@microsoft.com>
Date: Fri, 11 Sep 2020 15:55:06 -0700
Subject: [PATCH] Notebooks: Hide link and image buttons in text cell toolbar
 in WYSIWYG mode (#12240)

* hide link and image buttons in WYSIWYG mode

* defined taskbar actions

* rename arrays
---
 .../cellViews/markdownToolbar.component.ts    | 36 +++++++++++++++++--
 .../browser/markdownToolbarActions.ts         |  6 ++++
 2 files changed, 39 insertions(+), 3 deletions(-)

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 44bc71b03d..27223968a7 100644
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
@@ -7,7 +7,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { Component, Input, Inject, ViewChild, ElementRef } from '@angular/core';
 import { localize } from 'vs/nls';
 import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
-import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
+import { ITaskbarContent, Taskbar } from 'sql/base/browser/ui/taskbar/taskbar';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { TransformMarkdownAction, MarkdownButtonType, ToggleViewAction } from 'sql/workbench/contrib/notebook/browser/markdownToolbarActions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
@@ -42,6 +42,9 @@ export class MarkdownToolbarComponent {
 	public splitViewButton = localize('splitViewButton', "View as Split");
 	public markdownButton = localize('markdownButton', "View as Markdown");
 
+	private _taskbarContent: Array<ITaskbarContent>;
+	private _wysiwygTaskbarContent: Array<ITaskbarContent>;
+
 	@Input() public cellModel: ICellModel;
 	private _actionBar: Taskbar;
 	_toggleTextViewAction: ToggleViewAction;
@@ -98,7 +101,7 @@ export class MarkdownToolbarComponent {
 		dropdownMenuActionViewItem.render(buttonDropdownContainer);
 		dropdownMenuActionViewItem.setActionContext(this);
 
-		this._actionBar.setContent([
+		this._taskbarContent = [
 			{ action: boldButton },
 			{ action: italicButton },
 			{ action: underlineButton },
@@ -112,7 +115,34 @@ export class MarkdownToolbarComponent {
 			{ action: this._toggleTextViewAction },
 			{ action: this._toggleSplitViewAction },
 			{ action: this._toggleMarkdownViewAction }
-		]);
+		];
+		this._wysiwygTaskbarContent = [
+			{ action: boldButton },
+			{ action: italicButton },
+			{ action: underlineButton },
+			{ action: highlightButton },
+			{ action: codeButton },
+			{ action: listButton },
+			{ action: orderedListButton },
+			{ element: buttonDropdownContainer },
+			{ action: this._toggleTextViewAction },
+			{ action: this._toggleSplitViewAction },
+			{ action: this._toggleMarkdownViewAction }
+		];
+		// Hide link and image buttons in WYSIWYG mode
+		if (this.cellModel.showPreview && !this.cellModel.showMarkdown) {
+			this._actionBar.setContent(this._wysiwygTaskbarContent);
+		} else {
+			this._actionBar.setContent(this._taskbarContent);
+		}
+	}
+
+	public hideLinkAndImageButtons() {
+		this._actionBar.setContent(this._wysiwygTaskbarContent);
+	}
+
+	public showLinkAndImageButtons() {
+		this._actionBar.setContent(this._taskbarContent);
 	}
 
 	public removeActiveClassFromModeActions() {
diff --git a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
index 99f84f72c6..12717b6d85 100644
--- a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
+++ b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
@@ -541,6 +541,12 @@ export class ToggleViewAction extends Action {
 		this.class += ' active';
 		context.cellModel.showPreview = this.showPreview;
 		context.cellModel.showMarkdown = this.showMarkdown;
+		// Hide link and image buttons in WYSIWYG mode
+		if (this.showPreview && !this.showMarkdown) {
+			context.hideLinkAndImageButtons();
+		} else {
+			context.showLinkAndImageButtons();
+		}
 		return true;
 	}
 }