Notebook UI - Markdown toolbar - Headings dropdown (#11049)

* Adds heading dropdown to markdown toolbar.

* Added a method specific to headings that places markdown at beginning of line selected.

* Rewrote comment for my new method.

* Revised code to support multi select for headers, similar to how unordered list is applied. Multi-line headings can be undone if the multi lines are selected.

* Modified transformText to make single-line undo operation possible with just the cursor position.

* Added utility methods to help determine if the selection is a line-only or multi-line.

* Building isReplaceOperation to determine when preceeding characters need to be replaced with a new MarkdownButtonType.

* Updated comments.

* Applied changes written by Chris.

* Reverted changes to earlier stage where heading addition works just like list item additions.

* getExtendedSelectedText now returns an actual value in range for MarkdownLineType.EVERY_LINE.

* Added conditional so that Preview element is updated only when Preview is enabled.

* Updated tests for heading toolbar: heading 1, 2 and 3.

* Removed code that could not be reached.

* Corrected tests for headings.

* wip

(cherry picked from commit 43deb9635cc0eeebaffef22d4373f1f6ad713ace)

* cleanup

* fix error

* Fix tests

* Add more testing

* delete

* re-add

Co-authored-by: chgagnon <chgagnon@microsoft.com>

src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts

@@ -3,12 +3,15 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./markdownToolbar';
+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 { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { TransformMarkdownAction, MarkdownButtonType, TogglePreviewAction } from 'sql/workbench/contrib/notebook/browser/markdownToolbarActions';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+import { DropdownMenuActionViewItem } from 'sql/base/browser/ui/buttonMenu/buttonMenu';
 
 export const MARKDOWN_TOOLBAR_SELECTOR: string = 'markdown-toolbar-component';
 
@@ -28,12 +31,19 @@ export class MarkdownToolbarComponent {
 	public buttonList = localize('buttonList', "List");
 	public buttonOrderedList = localize('buttonOrderedList', "Ordered list");
 	public buttonImage = localize('buttonImage', "Image");
+	public buttonPreview = localize('buttonPreview', "Markdown preview toggle - off");
+	public dropdownHeading = localize('dropdownHeading', "Heading");
+	public optionHeading1 = localize('optionHeading1', "Heading 1");
+	public optionHeading2 = localize('optionHeading2', "Heading 2");
+	public optionHeading3 = localize('optionHeading3', "Heading 3");
+	public optionParagraph = localize('optionParagraph', "Paragraph");
 
 	@Input() public cellModel: ICellModel;
 	private _actionBar: Taskbar;
 
 	constructor(
-		@Inject(IInstantiationService) private _instantiationService: IInstantiationService
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService,
+		@Inject(IContextMenuService) private contextMenuService: IContextMenuService
 	) { }
 
 	ngOnInit() {
@@ -52,9 +62,32 @@ export class MarkdownToolbarComponent {
 		let imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image', this.buttonImage, this.cellModel, MarkdownButtonType.IMAGE);
 		let togglePreviewAction = this._instantiationService.createInstance(TogglePreviewAction, 'notebook.togglePreview', true, this.cellModel.showPreview);
 
+		let headingDropdown = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading', '', 'heading', this.dropdownHeading, this.cellModel, null);
+		let heading1 = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading1', this.optionHeading1, 'heading 1', this.optionHeading1, this.cellModel, MarkdownButtonType.HEADING1);
+		let heading2 = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading2', this.optionHeading2, 'heading 2', this.optionHeading2, this.cellModel, MarkdownButtonType.HEADING2);
+		let heading3 = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.heading3', this.optionHeading3, 'heading 3', this.optionHeading3, this.cellModel, MarkdownButtonType.HEADING3);
+		let paragraph = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.paragraph', this.optionParagraph, 'paragraph', this.optionParagraph, this.cellModel, MarkdownButtonType.PARAGRAPH);
+
 		let taskbar = <HTMLElement>this.mdtoolbar.nativeElement;
 		this._actionBar = new Taskbar(taskbar);
 		this._actionBar.context = this;
+
+		let buttonDropdownContainer = DOM.$('li.action-item');
+		buttonDropdownContainer.setAttribute('role', 'presentation');
+		let dropdownMenuActionViewItem = new DropdownMenuActionViewItem(
+			headingDropdown,
+			[heading1, heading2, heading3, paragraph],
+			this.contextMenuService,
+			undefined,
+			this._actionBar.actionRunner,
+			undefined,
+			'notebook-button masked-pseudo-after dropdown-arrow',
+			this.optionParagraph,
+			undefined
+		);
+		dropdownMenuActionViewItem.render(buttonDropdownContainer);
+		dropdownMenuActionViewItem.setActionContext(this);
+
 		this._actionBar.setContent([
 			{ action: boldButton },
 			{ action: italicButton },
@@ -65,6 +98,7 @@ export class MarkdownToolbarComponent {
 			{ action: listButton },
 			{ action: orderedListButton },
 			{ action: imageButton },
+			{ element: buttonDropdownContainer },
 			{ action: togglePreviewAction }
 		]);
 	}

src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css

@@ -34,13 +34,26 @@
 .markdown-toolbar .carbon-taskbar li:nth-child(2) {
 	margin-right: 9px;
 }
+.markdown-toolbar .carbon-taskbar li.action-item .masked-pseudo-after.dropdown-arrow {
+	background-color: transparent;
+	font-size: 14px;
+	height: 100%;
+	line-height: 20px;
+	width: 100%;
+}
+.markdown-toolbar .carbon-taskbar li.action-item .masked-pseudo-after.dropdown-arrow:after {
+	position: relative;
+	right: -6px;
+	top: -3px;
+	width: 26px;
+}
 .markdown-toolbar .carbon-taskbar li:last-child {
 	margin-right: 0;
 	position: absolute;
 	right: 0;
 }
 .markdown-toolbar .carbon-taskbar li a {
-	display: inline-block;
+	display: flex;
 	height: 20px;
 	width: 20px;
 	-webkit-mask-position: center;

src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts

@@ -199,9 +199,11 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 			});
 			this.markdownResult.element.innerHTML = this.sanitizeContent(this.markdownResult.element.innerHTML);
 			this.setLoading(false);
-			let outputElement = <HTMLElement>this.output.nativeElement;
-			outputElement.innerHTML = this.markdownResult.element.innerHTML;
-			this.cellModel.renderedOutputTextContent = this.getRenderedTextOutput();
+			if (this.showPreview) {
+				let outputElement = <HTMLElement>this.output.nativeElement;
+				outputElement.innerHTML = this.markdownResult.element.innerHTML;
+				this.cellModel.renderedOutputTextContent = this.getRenderedTextOutput();
+			}
 		}
 	}