UI feature - Notebook markdown toolbar (#9853)

* Markdown editor toolbar - initial commit * Moved icons. Refactored new toolbar component to include markup. * Edited markdown toolbar component and referencing in textCell component markup. * Completed UI updates for selected cell toolbar and markdown toolbar. * Modified import path to Event class. Changed EventEmitter to Emitter. * Cleaned up newly added toolbar components * Works sometimes sometimes editor is null * Removed commented out code and styles. CellToolbar and MarkdownToolbar: moved component markup into html file. * Added icon for highlight. Removed more commented code. Re-scoped two styles to their parent components. Corrected templateUrl reference for the new toolbars. * Adjusted paths to SVG icons from toolbar stylesheet. * Add lists and links * Refactor out of component, add actionbar * Support for nothing selected, quick bug fix * Updated split view icons. Added markdown tool backgrounds and cell border colors to color registry and parent components. Updated toolbar icons to use mask as this allows the SVG icon colors to be adjusted on theme change. * Added colorRegistry entries for code cell. Removed colors from styles. Running registerThemingParticipant from code.component. * Revised code component style rules and corrected syntax. * Merged in Chris' working branch and removed unused markup. * Corrected styles and moved another color into colorRegistry for use in new markdown toolbar. * Corrected style error. Overrode left position of content inside textCell and codeCell. Added more entries to colorRegistry. * Moved toolbar and editor icons to common-icons location. Updated related stylesheet. Revised color theming rules for markdown and code cells. * Added themed border between markdown and preview. Moved all notebook themes into notebookStyles.ts * Merged in latest from origin/master and included a small but significant style tweak to light theme code cell toolbar. * Add Undo Support for Markdown Toolbar (#9915) * Remove comment * Renamed registered notebook colors and prefixed with notebook. Moved markdown component theme colors into notebookStyles.ts. Removed colors from cellToolbar styles. Revised icon class names to generic names for better re-use. Removed commented markup. Co-authored-by: chlafreniere <hichise@gmail.com> Co-authored-by: Chris LaFreniere <40371649+chlafreniere@users.noreply.github.com>
2026-01-18 17:22:45 -05:00 · 2020-04-14 14:13:00 -07:00
parent 37b14d83a6
commit 4e69eabf52
62 changed files with 1035 additions and 189 deletions
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component.html
@@ -0,0 +1,15 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<ul class="cell-toolbar">
+	<li><a class="cell-tool-edit" role="button" href="#" (click)="toolbarToggleEditMode()"><span class="offscreen">{{buttonEdit}}</span></a></li>
+	<li><a class="cell-tool-close" role="button" href="#" (click)="toolbarUnselectActiveCell()"><span class="offscreen">{{buttonClose}}</span></a></li>
+	<li><a class="cell-tool-add" role="button" href="#"><span class="offscreen">{{buttonAdd}}</span></a></li>
+	<li><a class="cell-tool-move-down" role="button" href="#"><span class="offscreen">{{buttonMoveDown}}</span></a></li>
+	<li><a class="cell-tool-move-up" role="button" href="#"><span class="offscreen">{{buttonMoveUp}}</span></a></li>
+	<li><a class="cell-tool-delete" role="button" href="#"><span class="offscreen">{{buttonDelete}}</span></a></li>
+	<li><div #moreactions class="cell-tool-more"></div></li>
+</ul>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component.ts
@@ -0,0 +1,26 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./cellToolbar';
+
+import { Component } from '@angular/core';
+import { localize } from 'vs/nls';
+
+export const CELL_TOOLBAR_SELECTOR: string = 'cell-toolbar-component';
+
+@Component({
+	selector: CELL_TOOLBAR_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./cellToolbar.component.html'))
+})
+export class CellToolbarComponent {
+	public buttonEdit = localize('buttonEdit', "Edit");
+	public buttonClose = localize('buttonClose', "Close");
+	public buttonAdd = localize('buttonAdd', "Add new cell");
+	public buttonMoveDown = localize('buttonMoveDown', "Move cell down");
+	public buttonMoveUp = localize('buttonMoveUp', "Move cell up");
+	public buttonDelete = localize('buttonDelete', "Delete cell");
+
+	constructor() {
+	}
+}
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.css
@@ -0,0 +1,47 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+cell-toolbar-component {
+	position: absolute;
+	left: 25px;
+	top: -21px;
+}
+
+cell-toolbar-component ul {
+	display: inline-block;
+	list-style: none;
+	margin: 0;
+	padding: 5px 10px 0 10px;
+}
+
+cell-toolbar-component li {
+	display: inline-block;
+	margin-right: 4px;
+	text-align: center;
+}
+
+cell-toolbar-component li:last-child {
+	margin-right: 0;
+}
+
+cell-toolbar-component li a {
+	background: 50% 50% no-repeat;
+	display: block;
+	height: 16px;
+	width: 16px;
+}
+
+cell-toolbar-component li div {
+	background: 50% 50% no-repeat;
+	height: 16px;
+	width: 16px;
+}
+
+cell-toolbar-component .offscreen {
+	height: 1px;
+	text-indent: -999999px;
+	margin-top: -1px;
+	position: absolute;
+}
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.css
@@ -9,14 +9,20 @@ code-component {
 	display: block;
 }

+.notebook-cell:not(.active) code-component .toolbar {
+	border-right-color: transparent!important;
+}
+
 code-component .toolbar {
+	border-right-style: solid;
 	border-right-width: 1px;
-	flex: 0 0 auto;
+	box-sizing: border-box;
 	display: flex;
+	flex: 0 0 auto;
 	flex-flow:column;
-	width: 40px;
 	min-height: 40px;
-	orientation: portrait
+	orientation: portrait;
+	width: 52px;
 }

 code-component .toolbar.markdown {
@@ -29,36 +35,37 @@ code-component .toolbar .carbon-taskbar {
 	margin-top: 5px;
 }

-code-component .toolbarIconRun {
+code-component .toolbar .codicon {
 	height: 20px;
-	background-image: url('./media/light/execute_cell.svg');
 	padding-bottom: 10px;
 }

-.vs-dark code-component .toolbarIconRun,
-.hc-black code-component .toolbarIconRun {
-	background-image: url('./media/dark/execute_cell_inverse.svg');
+.notebook-cell:not(.active):hover code-component .toolbarIconRun {
+	background-image: url('./media/execute_cell_grey.svg');
 }
-
-code-component .toolbarIconRunError {
-	height: 20px;
-	background-image: url('./media/light/execute_cell_error.svg');
-	padding-bottom: 10px;
+.vs-dark .notebook-cell:not(.active):hover code-component .toolbarIconRun {
+	background-image: url('./media/execute_cell_dark.svg');
 }
-
-code-component .toolbarIconStop {
-	height: 20px;
-	background-image: url('./media/light/stop_cell_solidanimation.svg');
-	padding-bottom: 10px;
-}
-
-.vs-dark code-component .toolbarIconStop,
-.hc-black code-component .toolbarIconStop {
-	background-image: url('./media/dark/stop_cell_solidanimation_inverse.svg');
+.hc-black .notebook-cell:not(.active):hover code-component .toolbarIconRun {
+	background-image: url('./media/execute_cell_hc.svg');
 }

 code-component .editor {
-	padding: 5px 0px 5px 0px
+	margin: 14px 0px 5px 0px
+}
+
+code-cell-component code-component .monaco-editor .margin-view-overlays .line-numbers {
+	left: 0!important;
+}
+code-cell-component code-component .monaco-scrollable-element.editor-scrollable.vs {
+	left: 40px!important;
+}
+
+code-cell-component .monaco-editor .margin,
+code-cell-component code-component .monaco-editor,
+code-cell-component code-component .monaco-editor-background,
+code-cell-component code-component .monaco-editor .inputarea.ime-input {
+	background-color: transparent;
 }

 /* overview ruler */
@@ -84,7 +91,7 @@ code-component .carbon-taskbar .codicon.hideIcon {
 	padding-left: 0px;
 	padding-top: 6px;
 	font-family: monospace;
-	font-size: 12px;
+	font-size: 14px;
 }

 code-component .carbon-taskbar .codicon.hideIcon.execCountTen {
@@ -95,10 +102,6 @@ code-component .carbon-taskbar .codicon.hideIcon.execCountHundred {
 	margin-left: -6px;
 }

-code-component .carbon-taskbar.monaco-toolbar .monaco-action-bar.animated .actions-container {
-	padding-left: 10px
-}
-
 code-component .hide-component-button {
 	height: 16px;
 	width: 100%;
@@ -106,23 +109,5 @@ code-component .hide-component-button {
 	border-width: 0px;
 	background-repeat: no-repeat;
 	background-position: center;
-	background-color: inherit;
-}
-
-code-component .hide-component-button.icon-hide-cell {
-	background-image: url("./media/light/chevron_up.svg");
-}
-
-code-component .hide-component-button.icon-show-cell {
-	background-image: url("./media/light/chevron_down.svg");
-}
-
-.vs-dark code-component .hide-component-button.icon-hide-cell,
-.hc-black code-component .hide-component-button.icon-hide-cell {
-	background-image: url("./media/dark/chevron_up_inverse.svg");
-}
-
-.vs-dark code-component .hide-component-button.icon-show-cell,
-.hc-black code-component .hide-component-button.icon-show-cell {
-	background-image: url("./media/dark/chevron_down_inverse.svg");
+	background-color: transparent;
 }
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.html
@@ -5,5 +5,5 @@
 *--------------------------------------------------------------------------------------------*/
 -->
 <div style="width: 100%; height: fit-content; display: flex; flex-flow: column">
-	<button #collapseCellButton (click)="toggleCollapsed($event)" class="hide-component-button"></button>
+	<button #collapseCellButton (click)="toggleCollapsed($event)" class="hide-component-button codicon"></button>
 </div>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/collapse.component.ts
@@ -20,10 +20,10 @@ export class CollapseComponent extends CellView implements OnInit, OnChanges {
 	@ViewChild('collapseCellButton', { read: ElementRef }) private collapseCellButtonElement: ElementRef;

 	private readonly expandButtonTitle = localize('expandCellContents', "Expand code cell contents");
-	private readonly expandButtonClass = 'icon-show-cell';
+	private readonly expandButtonClass = 'arrow-down';

 	private readonly collapseButtonTitle = localize('collapseCellContents', "Collapse code cell contents");
-	private readonly collapseButtonClass = 'icon-hide-cell';
+	private readonly collapseButtonClass = 'arrow-up';

 	@Input() cellModel: ICellModel;
 	@Input() activeCellId: string;
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.html
@@ -0,0 +1,7 @@
+<!--
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+-->
+<ul #mdtoolbar class="markdown-toolbar"></ul>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts
@@ -0,0 +1,67 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import 'vs/css!./markdownToolbar';
+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 { TransformMarkdownAction, MarkdownButtonType } from 'sql/workbench/contrib/notebook/browser/markdownToolbarActions';
+import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
+
+export const MARKDOWN_TOOLBAR_SELECTOR: string = 'markdown-toolbar-component';
+
+@Component({
+	selector: MARKDOWN_TOOLBAR_SELECTOR,
+	templateUrl: decodeURI(require.toUrl('./markdownToolbar.component.html'))
+})
+export class MarkdownToolbarComponent {
+	@ViewChild('mdtoolbar', { read: ElementRef }) private mdtoolbar: ElementRef;
+
+	public buttonBold = localize('buttonBold', "Bold");
+	public buttonItalic = localize('buttonItalic', "Italic");
+	public buttonHighlight = localize('buttonHighlight', "Highlight");
+	public buttonCode = localize('buttonCode', "Code");
+	public buttonLink = localize('buttonLink', "Link");
+	public buttonList = localize('buttonList', "List");
+	public buttonOrderedList = localize('buttonOrderedList', "Ordered list");
+	public buttonImage = localize('buttonImage', "Image");
+	public buttonPreview = localize('buttonPreview', "Markdown preview toggle - off");
+
+	@Input() public cellModel: ICellModel;
+	private _actionBar: Taskbar;
+
+	constructor(
+		@Inject(IInstantiationService) private _instantiationService: IInstantiationService
+	) { }
+
+	ngOnInit() {
+		this.initActionBar();
+	}
+
+	private initActionBar() {
+		let boldButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.boldText', '', 'bold', this.buttonBold, this.cellModel, MarkdownButtonType.BOLD);
+		let italicButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.italicText', '', 'italic', this.buttonItalic, this.cellModel, MarkdownButtonType.ITALIC);
+		let highlightButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.highlightText', '', 'highlight', this.buttonHighlight, this.cellModel, MarkdownButtonType.HIGHLIGHT);
+		let codeButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.codeText', '', 'code', this.buttonCode, this.cellModel, MarkdownButtonType.CODE);
+		let linkButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.linkText', '', 'insert-link', this.buttonLink, this.cellModel, MarkdownButtonType.LINK);
+		let listButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.listText', '', 'list', this.buttonList, this.cellModel, MarkdownButtonType.UNORDERED_LIST);
+		let orderedListButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.orderedText', '', 'ordered-list', this.buttonOrderedList, this.cellModel, MarkdownButtonType.ORDERED_LIST);
+		let imageButton = this._instantiationService.createInstance(TransformMarkdownAction, 'notebook.imageText', '', 'insert-image', this.buttonImage, this.cellModel, MarkdownButtonType.IMAGE);
+
+		let taskbar = <HTMLElement>this.mdtoolbar.nativeElement;
+		this._actionBar = new Taskbar(taskbar);
+		this._actionBar.context = this;
+		this._actionBar.setContent([
+			{ action: boldButton },
+			{ action: italicButton },
+			{ action: highlightButton },
+			{ action: codeButton },
+			{ action: linkButton },
+			{ action: listButton },
+			{ action: orderedListButton },
+			{ action: imageButton }
+		]);
+	}
+}
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.css
@@ -0,0 +1,89 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+/* Resets */
+.markdown-toolbar .carbon-taskbar li a.action-label {
+	margin: 0;
+	padding: 0;
+}
+.markdown-toolbar .carbon-taskbar.monaco-toolbar .monaco-action-bar.animated .actions-container {
+	padding: 0;
+}
+
+
+.markdown-toolbar {
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
+	display: block;
+	list-style: none;
+	margin: 0;
+	padding: 4px 16px;
+}
+.markdown-toolbar .carbon-taskbar li.action-item {
+	display: inline-block;
+	margin-right: 14px;
+}
+.markdown-toolbar .carbon-taskbar li:nth-child(1) {
+	margin-right: 9px;
+}
+.markdown-toolbar .carbon-taskbar li:nth-child(2) {
+	margin-right: 9px;
+}
+.markdown-toolbar .carbon-taskbar li a {
+	display: inline-block;
+	height: 20px;
+	width: 20px;
+	-webkit-mask-position: center;
+	-webkit-mask-repeat: no-repeat;
+	mask-position: center;
+	mask-repeat: no-repeat;
+}
+
+.markdown-toolbar li a.codicon.bold {
+	-webkit-mask-size: 50% 100%;
+	mask-size: 50% 100%;
+}
+.markdown-toolbar li a.codicon.italic {
+	-webkit-mask-size: 60% 100%;
+	mask-size: 60% 100%;
+}
+.markdown-toolbar li a.codicon.highlight {
+	-webkit-mask-size: 65% 100%;
+	mask-size: 65% 100%;
+}
+.markdown-toolbar li a.codicon.code {
+	-webkit-mask-size: 88% 100%;
+	mask-size: 88% 100%;
+}
+.markdown-toolbar li a.codicon.insert-link {
+	-webkit-mask-size: 80% 100%;
+	mask-size: 80% 100%;
+}
+.markdown-toolbar li a.codicon.list {
+	-webkit-mask-size: 80% 100%;
+	mask-size: 80% 100%;
+}
+.markdown-toolbar li a.codicon.ordered-list {
+	-webkit-mask-size: 86% 100%;
+	mask-size: 86% 100%;
+}
+.markdown-toolbar li a.codicon.insertimage {
+	-webkit-mask-size: 86% 100%;
+	mask-size: 86% 100%;
+}
+.markdown-toolbar li a.codicon.split-toggle-on {
+	-webkit-mask-size: 75% 100%;
+	mask-size: 75% 100%;
+}
+.markdown-toolbar li a.codicon.split-toggle-off {
+	-webkit-mask-size: 75% 100%;
+	mask-size: 75% 100%;
+}
+
+text-cell-component .offscreen {
+	height: 1px;
+	margin-top: -1px;
+	position: absolute;
+	text-indent: -999999px;
+}
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/execute_cell_dark.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/execute_cell_dark.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#A19F9D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2972 9.9375L8 13.875V6L13.2972 9.9375Z" fill="#1B1A19"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/execute_cell_grey.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/execute_cell_grey.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#A19F9D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2972 9.9375L8 13.875V6L13.2972 9.9375Z" fill="white"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/execute_cell_hc.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/execute_cell_hc.svg
@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 21C16.5228 21 21 16.5228 21 11C21 5.47715 16.5228 1 11 1C5.47715 1 1 5.47715 1 11C1 16.5228 5.47715 21 11 21Z" stroke="#2B56F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.2972 10.9375L9 14.875V7L14.2972 10.9375Z" fill="white"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/light/execute_cell.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/light/execute_cell.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>execute_cell</title><circle cx="8" cy="7.92" r="7.76"/><polygon class="cls-1" points="10.7 8 6.67 11 6.67 5 10.7 8 10.7 8"/></svg>
+<svg id="executeCell" data-name="Execute Cell" xmlns="http://www.w3.org/2000/svg" fill="#0078D4" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>execute_cell</title><circle cx="8" cy="7.92" r="7.76"/><polygon class="cls-1" points="10.7 8 6.67 11 6.67 5 10.7 8 10.7 8"/></svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/light/execute_cell_grey.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/light/execute_cell_grey.svg
@@ -0,0 +1 @@
+<svg id="executeCell" data-name="Execute Cell" xmlns="http://www.w3.org/2000/svg" fill="#A19F9D" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>execute_cell</title><circle cx="8" cy="7.92" r="7.76"/><polygon class="cls-1" points="10.7 8 6.67 11 6.67 5 10.7 8 10.7 8"/></svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-bold.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-bold.svg
@@ -0,0 +1,4 @@
+<svg width="10" height="13" viewBox="0 0 10 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>bold</title>
+<path d="M5.80469 6.03906C6.28385 6.03906 6.73438 6.13021 7.15625 6.3125C7.58333 6.49479 7.95312 6.74479 8.26562 7.0625C8.58333 7.375 8.83333 7.74219 9.01562 8.16406C9.19792 8.58594 9.28906 9.03646 9.28906 9.51562C9.28906 9.99479 9.19792 10.4479 9.01562 10.875C8.83333 11.2969 8.58333 11.6667 8.26562 11.9844C7.95312 12.2969 7.58333 12.5443 7.15625 12.7266C6.73438 12.9089 6.28385 13 5.80469 13H0V0H5.80469C6.22135 0 6.61198 0.0807292 6.97656 0.242188C7.34115 0.398438 7.65885 0.614583 7.92969 0.890625C8.20573 1.16146 8.42188 1.47917 8.57812 1.84375C8.73958 2.20833 8.82031 2.59896 8.82031 3.01562C8.82031 3.43229 8.74219 3.82552 8.58594 4.19531C8.42969 4.5599 8.21354 4.88021 7.9375 5.15625C7.66667 5.42708 7.34635 5.64323 6.97656 5.80469C6.61198 5.96094 6.22135 6.03906 5.80469 6.03906ZM4.17969 1.85938H3V5.57031H4.17969C4.4349 5.57031 4.67448 5.52083 4.89844 5.42188C5.1276 5.32292 5.32552 5.1901 5.49219 5.02344C5.65885 4.85677 5.79167 4.66146 5.89062 4.4375C5.98958 4.20833 6.03906 3.96615 6.03906 3.71094C6.03906 3.45573 5.98958 3.21615 5.89062 2.99219C5.79167 2.76823 5.65885 2.57292 5.49219 2.40625C5.32552 2.23438 5.1276 2.10156 4.89844 2.00781C4.67448 1.90885 4.4349 1.85938 4.17969 1.85938ZM4.64062 11.1406C4.89583 11.1406 5.13542 11.0938 5.35938 11C5.58854 10.901 5.78646 10.7682 5.95312 10.6016C6.11979 10.4297 6.2526 10.2318 6.35156 10.0078C6.45052 9.78385 6.5 9.54427 6.5 9.28906C6.5 9.03385 6.45052 8.79427 6.35156 8.57031C6.25781 8.34115 6.125 8.14323 5.95312 7.97656C5.78646 7.80469 5.58854 7.67188 5.35938 7.57812C5.13542 7.47917 4.89583 7.42969 4.64062 7.42969H3V11.1406H4.64062Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-code.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-code.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>preformatted</title>
+<path d="M1.71094 5L3.3125 6.60156L3.02344 7.73438L0.289062 5L3.64844 1.64844L4.35156 2.35156L1.71094 5ZM15.7109 5L12.3516 8.35156L11.6484 7.64844L14.2891 5L13.125 3.83594C13.2604 3.70052 13.3828 3.57552 13.4922 3.46094C13.6016 3.34115 13.7005 3.21615 13.7891 3.08594L15.7109 5ZM11.4375 0C11.6562 0 11.8594 0.0390625 12.0469 0.117188C12.2396 0.195312 12.4062 0.304688 12.5469 0.445312C12.6875 0.585938 12.7969 0.75 12.875 0.9375C12.9583 1.125 13 1.32812 13 1.54688C13 1.75 12.9609 1.94792 12.8828 2.14062C12.8047 2.33333 12.6927 2.5026 12.5469 2.64844L6.94531 8.26562L4 9L4.73438 6.05469L10.3359 0.445312C10.4818 0.299479 10.651 0.190104 10.8438 0.117188C11.0365 0.0390625 11.2344 0 11.4375 0ZM11.8359 1.94531C11.9453 1.83594 12 1.70312 12 1.54688C12 1.38542 11.9453 1.25521 11.8359 1.15625C11.7318 1.05208 11.599 1 11.4375 1C11.3646 1 11.2943 1.01302 11.2266 1.03906C11.1589 1.0599 11.099 1.09635 11.0469 1.14844L5.64062 6.57031L5.375 7.625L6.42969 7.35938L11.8359 1.94531Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-highlight.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-highlight.svg
@@ -0,0 +1,4 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>highlight</title>
+<path d="M13 0V3.25C12.6318 3.25 12.3166 3.2902 12.0542 3.37061C11.7918 3.45101 11.5697 3.56738 11.3877 3.71973C11.2057 3.87207 11.0576 4.04557 10.9434 4.24023C10.8291 4.4349 10.7424 4.65706 10.6831 4.90674C10.6239 5.15641 10.5837 5.41032 10.5625 5.66846C10.5413 5.9266 10.5308 6.19954 10.5308 6.4873C10.5308 6.7666 10.535 7.04378 10.5435 7.31885C10.5519 7.59391 10.5583 7.86263 10.5625 8.125H8.9375V10.5625L4.0625 13V8.125H2.4375C2.4375 7.86263 2.44173 7.59391 2.4502 7.31885C2.45866 7.04378 2.46501 6.7666 2.46924 6.4873C2.46924 6.20801 2.45866 5.93506 2.4375 5.66846C2.41634 5.40186 2.37614 5.14795 2.31689 4.90674C2.25765 4.66553 2.17301 4.44548 2.06299 4.24658C1.95296 4.04769 1.80485 3.87207 1.61865 3.71973C1.43245 3.56738 1.20817 3.45312 0.945801 3.37695C0.683431 3.30078 0.368164 3.25846 0 3.25V0H0.8125V2.4375H12.1875V0H13ZM8.125 8.125H4.875V11.686L8.125 10.061V8.125ZM9.75 7.3125C9.75 7.12207 9.74788 6.93587 9.74365 6.75391C9.73942 6.57194 9.7373 6.38997 9.7373 6.20801C9.7373 5.93717 9.74788 5.67057 9.76904 5.4082C9.7902 5.14583 9.83252 4.89193 9.896 4.64648C9.95947 4.40104 10.0568 4.15983 10.188 3.92285C10.3192 3.68587 10.4927 3.46159 10.7085 3.25H2.2915C2.50732 3.46582 2.67871 3.6901 2.80566 3.92285C2.93262 4.1556 3.02995 4.39681 3.09766 4.64648C3.16536 4.89616 3.2098 5.15006 3.23096 5.4082C3.25212 5.66634 3.2627 5.93294 3.2627 6.20801C3.2627 6.38997 3.26058 6.57194 3.25635 6.75391C3.25212 6.93587 3.25 7.12207 3.25 7.3125H9.75Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-image.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-image.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>add inline image</title>
+<path d="M11 2.5C11 2.36458 11.0495 2.2474 11.1484 2.14844C11.2474 2.04948 11.3646 2 11.5 2C11.6354 2 11.7526 2.04948 11.8516 2.14844C11.9505 2.2474 12 2.36458 12 2.5C12 2.63542 11.9505 2.7526 11.8516 2.85156C11.7526 2.95052 11.6354 3 11.5 3C11.3646 3 11.2474 2.95052 11.1484 2.85156C11.0495 2.7526 11 2.63542 11 2.5ZM16 10V11H14V13H13V11H11V10H13V8H14V10H16ZM7.20312 7.5L10 10.2891V11H0V0H14V7H13V1H1V4.28906L2.5 2.79688L6.5 6.79688L8.5 4.79688L12 8.28906V9H11.2891L8.5 6.20312L7.20312 7.5ZM2.5 4.20312L1 5.71094V10H8.28906L2.5 4.20312Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-italic.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-italic.svg
@@ -0,0 +1,4 @@
+<svg width="11" height="13" viewBox="0 0 11 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>italics</title>
+<path d="M9.25 1H7.55469L3.89062 12H6.75L5.75 13H0.25L1.25 12H2.50781L6.17188 1H3.75L4.75 0H10.25L9.25 1Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-link.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-link.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>link</title>
+<path d="M7 7V6H8.1L9.1 5.5C9.38138 5.32024 9.62024 5.08138 9.8 4.8C9.93294 4.37949 10.0004 3.94103 10 3.5C9.98112 3.15886 9.91378 2.82215 9.8 2.5C9.6702 2.21199 9.50201 1.94288 9.3 1.7L8.5 1.2L7.5 1H3.5L2.5 1.2L1.7 1.7C1.49799 1.94288 1.3298 2.21199 1.2 2.5C1.08622 2.82215 1.01888 3.15886 1 3.5C1.00946 3.90746 1.0768 4.3115 1.2 4.7L1.9 5.4L2.9 5.9H4V7H3.5C3.01765 6.99754 2.54101 6.8954 2.1 6.7C1.69834 6.52684 1.32698 6.29051 1 6C0.709485 5.67302 0.473165 5.30166 0.3 4.9C0.104596 4.45899 0.00245968 3.98235 0 3.5C0.00245968 3.01765 0.104596 2.54101 0.3 2.1C0.473165 1.69834 0.709485 1.32698 1 1C1.32698 0.709485 1.69834 0.473165 2.1 0.3C2.54101 0.104596 3.01765 0.00245968 3.5 0L7.5 0C7.98235 0.00245968 8.45899 0.104596 8.9 0.3C9.30166 0.473165 9.67302 0.709485 10 1C10.2905 1.32698 10.5268 1.69834 10.7 2.1C10.8954 2.54101 10.9975 3.01765 11 3.5C10.9975 3.98235 10.8954 4.45899 10.7 4.9C10.5268 5.30166 10.2905 5.67302 10 6C9.67302 6.29051 9.30166 6.52684 8.9 6.7C8.45899 6.8954 7.98235 6.99754 7.5 7H7ZM12 3V4H13.1L14.1 4.5C14.3814 4.67976 14.6202 4.91862 14.8 5.2C14.9329 5.62051 15.0004 6.05897 15 6.5C14.9811 6.84114 14.9138 7.17785 14.8 7.5C14.6702 7.78801 14.502 8.05712 14.3 8.3L13.5 8.8L12.5 9H8.5L7.5 8.8L6.7 8.3C6.49799 8.05712 6.3298 7.78801 6.2 7.5C6.08622 7.17785 6.01888 6.84114 6 6.5C6.00946 6.09254 6.0768 5.6885 6.2 5.3C6.37976 5.01862 6.61862 4.77976 6.9 4.6L7.9 4.1H9V3H8.5C8.01765 3.00246 7.54101 3.1046 7.1 3.3C6.69834 3.47316 6.32698 3.70949 6 4C5.70949 4.32698 5.47316 4.69834 5.3 5.1C5.10121 5.53996 4.99839 6.01721 4.99839 6.5C4.99839 6.98279 5.10121 7.46004 5.3 7.9C5.47316 8.30166 5.70949 8.67302 6 9C6.32698 9.29051 6.69834 9.52684 7.1 9.7C7.54101 9.8954 8.01765 9.99754 8.5 10H12.5C12.9824 9.99754 13.459 9.8954 13.9 9.7C14.3017 9.52684 14.673 9.29051 15 9C15.2905 8.67302 15.5268 8.30166 15.7 7.9C15.8988 7.46004 16.0016 6.98279 16.0016 6.5C16.0016 6.01721 15.8988 5.53996 15.7 5.1C15.5268 4.69834 15.2905 4.32698 15 4C14.673 3.70949 14.3017 3.47316 13.9 3.3C13.459 3.1046 12.9824 3.00246 12.5 3H12Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-list.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-list.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>unordered list</title>
+<path d="M0 7V6H1V7H0ZM0 4V3H1V4H0ZM3 4V3H16V4H3ZM0 1V0H1V1H0ZM3 0H16V1H3V0ZM3 7V6H16V7H3ZM0 10V9H1V10H0ZM3 10V9H16V10H3Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-ordered-list.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-ordered-list.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>Ordered list</title>
+<path d="M16 2V3H4V2H16ZM4 6H16V7H4V6ZM4 10H16V11H4V10ZM1.05469 1.72656C0.981771 1.78385 0.882812 1.84115 0.757812 1.89844C0.638021 1.95052 0.528646 1.97656 0.429688 1.97656V1.4375C0.591146 1.38021 0.744792 1.31771 0.890625 1.25C1.03646 1.18229 1.17708 1.09635 1.3125 0.992188H1.69531V4H1.05469V1.72656ZM1.04688 5.00781C1.17708 5.00781 1.29948 5.02604 1.41406 5.0625C1.53385 5.09375 1.63542 5.14583 1.71875 5.21875C1.80729 5.28646 1.875 5.3724 1.92188 5.47656C1.97396 5.58073 2 5.70312 2 5.84375C2 6.00521 1.96875 6.14844 1.90625 6.27344C1.84375 6.39323 1.76562 6.5026 1.67188 6.60156C1.58333 6.69531 1.48438 6.78125 1.375 6.85938C1.26562 6.93229 1.16406 7.0026 1.07031 7.07031C0.981771 7.13281 0.90625 7.19792 0.84375 7.26562C0.78125 7.32812 0.75 7.39323 0.75 7.46094H2V8H0.0390625C0.0390625 7.88021 0.0390625 7.77344 0.0390625 7.67969C0.0442708 7.58594 0.0703125 7.48438 0.117188 7.375C0.195312 7.19792 0.302083 7.04948 0.4375 6.92969C0.572917 6.80469 0.705729 6.6901 0.835938 6.58594C0.971354 6.48177 1.08854 6.3776 1.1875 6.27344C1.28646 6.16927 1.33594 6.04688 1.33594 5.90625C1.33594 5.76562 1.29688 5.66667 1.21875 5.60938C1.14062 5.55208 1.03646 5.52344 0.90625 5.52344C0.770833 5.52344 0.640625 5.55208 0.515625 5.60938C0.395833 5.66667 0.283854 5.73958 0.179688 5.82812V5.25781C0.440104 5.09115 0.729167 5.00781 1.04688 5.00781ZM1.32812 10.4688C1.51562 10.4948 1.67448 10.5651 1.80469 10.6797C1.9349 10.7943 2 10.9531 2 11.1562C2 11.3177 1.96615 11.4557 1.89844 11.5703C1.83594 11.6849 1.7526 11.7786 1.64844 11.8516C1.54427 11.9193 1.42188 11.9714 1.28125 12.0078C1.14583 12.0391 1.00781 12.0547 0.867188 12.0547C0.742188 12.0547 0.614583 12.0443 0.484375 12.0234C0.359375 12.0026 0.239583 11.9635 0.125 11.9062V11.3359C0.223958 11.4089 0.330729 11.4635 0.445312 11.5C0.565104 11.5365 0.6875 11.5547 0.8125 11.5547C0.947917 11.5547 1.06771 11.526 1.17188 11.4688C1.28125 11.4115 1.33594 11.3047 1.33594 11.1484C1.33594 11.0339 1.30208 10.9505 1.23438 10.8984C1.16667 10.8411 1.08333 10.8021 0.984375 10.7812C0.890625 10.7552 0.791667 10.7422 0.6875 10.7422C0.583333 10.7422 0.494792 10.7422 0.421875 10.7422V10.2422C0.494792 10.2422 0.578125 10.2422 0.671875 10.2422C0.765625 10.2422 0.854167 10.2344 0.9375 10.2188C1.02604 10.1979 1.09896 10.1615 1.15625 10.1094C1.21875 10.0573 1.25 9.97656 1.25 9.86719C1.25 9.73177 1.20573 9.63802 1.11719 9.58594C1.03385 9.53385 0.932292 9.50781 0.8125 9.50781C0.609375 9.50781 0.416667 9.57031 0.234375 9.69531V9.16406C0.348958 9.10677 0.466146 9.06771 0.585938 9.04688C0.710938 9.02083 0.835938 9.00781 0.960938 9.00781C1.07552 9.00781 1.1901 9.02083 1.30469 9.04688C1.41927 9.07292 1.52083 9.11719 1.60938 9.17969C1.69792 9.23698 1.77083 9.3125 1.82812 9.40625C1.88542 9.5 1.91406 9.61198 1.91406 9.74219C1.91406 9.9401 1.86198 10.099 1.75781 10.2188C1.65885 10.3333 1.51562 10.4141 1.32812 10.4609V10.4688Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-preview-toggle-off.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-preview-toggle-off.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>markdown preview toggle - off</title>
+<path d="M15.5 0.5V13.5H0.5V0.5H15.5ZM1.5 1.5V3.5H14.5V1.5H1.5ZM14.5 12.5V4.5H1.5V12.5H14.5Z" fill="#323130"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-preview-toggle-on.svg
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/media/toolbar-preview-toggle-on.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<title>markdown preview toggle - on</title>
+<path d="M15 1V14H0V1H15ZM1 2V4H14V2H1ZM14 13V5H1V13H14Z" fill="black"/>
+<path d="M8 5H7V13H8V5Z" fill="black"/>
+</svg>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.html
@@ -5,6 +5,7 @@
 *--------------------------------------------------------------------------------------------*/
 -->
 <div style="overflow: hidden; width: 100%; height: 100%; display: flex; flex-flow: column" (mouseover)="hover=true" (mouseleave)="hover=false">
+	<markdown-toolbar-component #markdownToolbar *ngIf="isEditMode" [cellModel]="cellModel"></markdown-toolbar-component>
 	<div class="notebook-text" style="flex: 0 0 auto;">
 		<code-component *ngIf="isEditMode" [cellModel]="cellModel" (onContentChanged)="handleContentChanged()" [model]="model" [activeCellId]="activeCellId">
 		</code-component>
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts
@@ -31,7 +31,6 @@ import { IColorTheme } from 'vs/platform/theme/common/themeService';
 export const TEXT_SELECTOR: string = 'text-cell-component';
 const USER_SELECT_CLASS = 'actionselect';

-
@Component({
 	selector: TEXT_SELECTOR,
 	templateUrl: decodeURI(require.toUrl('./textCell.component.html'))
--- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
+++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.css
@@ -7,6 +7,12 @@ text-cell-component {
 	display: block;
 }

+.notebookEditor .notebook-cell.active text-cell-component code-component {
+	border-color: transparent;
+	border-bottom-width: 1px;
+	border-style: solid;
+}
+
 text-cell-component .notebook-preview {
 	user-select: none;
 	padding-left: 8px;
@@ -17,6 +23,16 @@ text-cell-component .notebook-preview {
 	user-select: text;
 }

+text-cell-component code-component .monaco-scrollable-element.editor-scrollable.vs {
+	left: 16px!important;
+}
+text-cell-component .monaco-editor .margin,
+text-cell-component code-component .monaco-editor,
+text-cell-component code-component .monaco-editor-background,
+text-cell-component code-component .monaco-editor .inputarea.ime-input {
+	background-color: transparent;
+}
+
 .vs .notebook-preview .rangeHighlight {
 	background-color: rgba(255, 255, 0, 0.2)
 }
--- a/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
+++ b/src/sql/workbench/contrib/notebook/browser/markdownToolbarActions.ts
@@ -0,0 +1,344 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Action } from 'vs/base/common/actions';
+
+import { INotebookEditor, INotebookService } from 'sql/workbench/services/notebook/browser/notebookService';
+import { CodeEditorWidget } from 'vs/editor/browser/widget/codeEditorWidget';
+import { IRange } from 'vs/editor/common/core/range';
+import { IIdentifiedSingleEditOperation } from 'vs/editor/common/model';
+import { TextModel } from 'vs/editor/common/model/textModel';
+import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces';
+import { QueryTextEditor } from 'sql/workbench/browser/modelComponents/queryTextEditor';
+import { Selection } from 'vs/editor/common/core/selection';
+
+
+
+// Action to decorate markdown
+export class TransformMarkdownAction extends Action {
+
+	constructor(
+		id: string,
+		label: string,
+		cssClass: string,
+		tooltip: string,
+		private _cellModel: ICellModel,
+		private _type: MarkdownButtonType,
+		@INotebookService private _notebookService: INotebookService
+	) {
+		super(id, label, cssClass);
+		this._tooltip = tooltip;
+	}
+	public run(context: any): Promise<boolean> {
+		return new Promise<boolean>((resolve, reject) => {
+			try {
+				let markdownTextTransformer = new MarkdownTextTransformer(this._notebookService, this._cellModel);
+				markdownTextTransformer.transformText(this._type);
+				resolve(true);
+			} catch (e) {
+				reject(e);
+			}
+		});
+	}
+}
+
+export class MarkdownTextTransformer {
+
+	private _notebookEditor: INotebookEditor;
+	constructor(private _notebookService: INotebookService, private _cellModel: ICellModel) { }
+
+	public transformText(type: MarkdownButtonType): void {
+		let editorControl = this.getEditorControl();
+		if (editorControl) {
+			let selections = editorControl.getSelections();
+			// TODO: Support replacement for multiple selections
+			let selection = selections[0];
+			let nothingSelected = this.editorHasNoSelection(selection);
+			let startRange: IRange = {
+				startColumn: selection.startColumn,
+				endColumn: selection.startColumn,
+				startLineNumber: selection.startLineNumber,
+				endLineNumber: selection.startLineNumber
+			};
+
+			// Get text to insert before selection
+			let beginInsertedCode = this.getStartTextToInsert(type);
+			// Get text to insert after selection
+			let endInsertedCode = this.getEndTextToInsert(type);
+
+			// endInsertedCode can be an empty string (e.g. for unordered list), so no need to check for that as well
+			if (beginInsertedCode) {
+				let endRange: IRange = {
+					startColumn: selection.endColumn,
+					endColumn: selection.endColumn,
+					startLineNumber: selection.endLineNumber,
+					endLineNumber: selection.endLineNumber
+				};
+				let editorModel = editorControl.getModel() as TextModel;
+				let isUndo = false;
+				if (editorModel) {
+					let markdownLineType = this.getMarkdownLineType(type);
+					isUndo = this.isUndoOperation(selection, type, markdownLineType, editorModel);
+					if (isUndo) {
+						if (markdownLineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+							startRange = this.getIRangeWithOffsets(startRange, -1 * beginInsertedCode.length, 0, 0, 0);
+							endRange = this.getIRangeWithOffsets(endRange, 0, 0, endInsertedCode.length, 0);
+							editorModel.pushEditOperations(selections, [{ range: endRange, text: '' }, { range: startRange, text: '' }], null);
+						} else {
+							let operations: IIdentifiedSingleEditOperation[] = [];
+							startRange = this.getIRangeWithOffsets(startRange, 0, 0, beginInsertedCode.length, 0);
+							for (let i = 0; i < selection.endLineNumber - selection.startLineNumber + 1; i++) {
+								operations.push({ range: this.transformRangeByLineOffset(startRange, i), text: '' });
+							}
+							editorModel.pushEditOperations(selections, operations, null);
+						}
+					} else {
+						// If the markdown we're inserting only needs to be added to the begin and end lines, add those edit operations directly
+						if (markdownLineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+							editorModel.pushEditOperations(selections, [{ range: startRange, text: beginInsertedCode }, { range: endRange, text: endInsertedCode }], null);
+						} else { // Otherwise, add an operation per line (plus the operation at the last column + line)
+							let operations: IIdentifiedSingleEditOperation[] = [];
+							for (let i = 0; i < selection.endLineNumber - selection.startLineNumber + 1; i++) {
+								operations.push({ range: this.transformRangeByLineOffset(startRange, i), text: beginInsertedCode });
+							}
+							operations.push({ range: endRange, text: endInsertedCode });
+							editorModel.pushEditOperations(selections, operations, null);
+						}
+					}
+				}
+
+				// If selection end is on same line as beginning, need to add offset for number of characters inserted
+				// Otherwise, the selection will not be correct after the transformation
+				let offset = selection.startLineNumber === selection.endLineNumber ? beginInsertedCode.length : 0;
+				endRange = this.getIRangeWithOffsets(endRange, offset, 0, offset, 0);
+				this.setEndSelection(endRange, type, editorControl, nothingSelected, isUndo);
+			}
+			// Always give focus back to the editor after pressing the button
+			editorControl.focus();
+		}
+	}
+
+	// For items like lists (where we need to insert a character at the beginning of each line), create
+	// range object for that range
+	private transformRangeByLineOffset(range: IRange, lineOffset: number): IRange {
+		return {
+			startColumn: lineOffset === 0 ? range.startColumn : 1,
+			endColumn: range.endColumn,
+			startLineNumber: range.endLineNumber + lineOffset,
+			endLineNumber: range.endLineNumber + lineOffset
+		};
+	}
+
+	private getStartTextToInsert(type: MarkdownButtonType): string {
+		switch (type) {
+			case MarkdownButtonType.BOLD:
+				return '**';
+			case MarkdownButtonType.ITALIC:
+				return '_';
+			case MarkdownButtonType.CODE:
+				return '```\n';
+			case MarkdownButtonType.LINK:
+				return '[';
+			case MarkdownButtonType.UNORDERED_LIST:
+				return '- ';
+			case MarkdownButtonType.ORDERED_LIST:
+				return '1. ';
+			case MarkdownButtonType.IMAGE:
+				return '![';
+			case MarkdownButtonType.HIGHLIGHT:
+				return '<mark>';
+			default:
+				return '';
+		}
+	}
+
+	private getEndTextToInsert(type: MarkdownButtonType): string {
+		switch (type) {
+			case MarkdownButtonType.BOLD:
+				return '**';
+			case MarkdownButtonType.ITALIC:
+				return '_';
+			case MarkdownButtonType.CODE:
+				return '\n```';
+			case MarkdownButtonType.LINK:
+			case MarkdownButtonType.IMAGE:
+				return ']()';
+			case MarkdownButtonType.HIGHLIGHT:
+				return '</mark>';
+			case MarkdownButtonType.UNORDERED_LIST:
+			case MarkdownButtonType.ORDERED_LIST:
+			default:
+				return '';
+		}
+	}
+
+	private getMarkdownLineType(type: MarkdownButtonType): MarkdownLineType {
+		switch (type) {
+			case MarkdownButtonType.UNORDERED_LIST:
+			case MarkdownButtonType.ORDERED_LIST:
+				return MarkdownLineType.EVERY_LINE;
+			default:
+				return MarkdownLineType.BEGIN_AND_END_LINES;
+		}
+	}
+
+	// Get offset from the end column for editor selection
+	// For example, when inserting a link, we want to have the cursor be present in between the brackets
+	private getColumnOffsetForSelection(type: MarkdownButtonType, nothingSelected: boolean): number {
+		if (nothingSelected) {
+			return 0;
+		}
+		switch (type) {
+			case MarkdownButtonType.LINK:
+				return 2;
+			case MarkdownButtonType.IMAGE:
+				return 2;
+			// -1 is considered as having no explicit offset, so do not do anything with selection
+			default: return -1;
+		}
+	}
+
+	private getEditorControl(): CodeEditorWidget | undefined {
+		if (!this._notebookEditor) {
+			this._notebookEditor = this._notebookService.findNotebookEditor(this._cellModel.notebookModel.notebookUri);
+		}
+		if (this._notebookEditor?.cellEditors?.length > 0) {
+			// Find cell editor provider via cell guid
+			let cellEditorProvider = this._notebookEditor.cellEditors.find(e => e.cellGuid() === this._cellModel.cellGuid);
+			if (cellEditorProvider) {
+				let editor = cellEditorProvider.getEditor() as QueryTextEditor;
+				if (editor) {
+					let editorControl = editor.getControl() as CodeEditorWidget;
+					return editorControl;
+				}
+			}
+		}
+		return undefined;
+	}
+
+	private editorHasNoSelection(selection: Selection): boolean {
+		return !selection || (selection.startLineNumber === selection.endLineNumber && selection.startColumn === selection.endColumn);
+	}
+
+	/**
+	 * Sets the end selection state after the transform has occurred
+	 * @param endRange range for end text that was inserted
+	 * @param type MarkdownButtonType
+	 * @param editorControl code editor widget
+	 * @param noSelection controls whether there was no previous selection in the editor
+	 */
+	private setEndSelection(endRange: IRange, type: MarkdownButtonType, editorControl: CodeEditorWidget, noSelection: boolean, isUndo: boolean): void {
+		if (!endRange || !editorControl || isUndo) {
+			return;
+		}
+		let offset = this.getColumnOffsetForSelection(type, noSelection);
+		if (offset > -1) {
+			let newRange: IRange = {
+				startColumn: endRange.startColumn + offset,
+				startLineNumber: endRange.startLineNumber,
+				endColumn: endRange.startColumn + offset,
+				endLineNumber: endRange.endLineNumber
+			};
+			editorControl.setSelection(newRange);
+		} else {
+			if (this.getMarkdownLineType(type) === MarkdownLineType.BEGIN_AND_END_LINES) {
+				let currentSelection = editorControl.getSelection();
+				editorControl.setSelection({
+					startColumn: currentSelection.startColumn + this.getStartTextToInsert(type).length,
+					startLineNumber: currentSelection.startLineNumber,
+					endColumn: currentSelection.endColumn - this.getEndTextToInsert(type).length,
+					endLineNumber: currentSelection.endLineNumber
+				});
+			}
+		}
+	}
+
+	/**
+	 * Determine if user wants to perform an undo operation
+	 * @param selection current user selection
+	 * @param type markdown button type
+	 * @param lineType markdown line type
+	 * @param editorModel text model for the cell
+	 */
+	private isUndoOperation(selection: Selection, type: MarkdownButtonType, lineType: MarkdownLineType, editorModel: TextModel): boolean {
+		if (lineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+			let selectedText = this.getExtendedSelectedText(selection, type, lineType, editorModel);
+			return selectedText && selectedText.startsWith(this.getStartTextToInsert(type)) && selectedText.endsWith(this.getEndTextToInsert(type));
+		} else {
+			return this.everyLineMatchesBeginString(selection, type, editorModel);
+		}
+	}
+
+	/**
+	 * Gets the extended selected text (current selection + potential beginning + ending transformed text)
+	 * @param selection Current selection in editor
+	 * @param type Markdown Button Type
+	 * @param lineType Markdown Line Type
+	 * @param editorModel TextModel
+	 */
+	private getExtendedSelectedText(selection: Selection, type: MarkdownButtonType, lineType: MarkdownLineType, editorModel: TextModel): string {
+		if (lineType === MarkdownLineType.BEGIN_AND_END_LINES) {
+			return editorModel.getValueInRange({
+				startColumn: selection.startColumn - this.getStartTextToInsert(type).length,
+				startLineNumber: selection.startLineNumber,
+				endColumn: selection.endColumn + this.getEndTextToInsert(type).length,
+				endLineNumber: selection.endLineNumber
+			});
+		}
+		return '';
+	}
+
+	/**
+	 * Returns whether all lines start with the expected transformed text for actions that match the EVERY_LINE line type
+	 * @param selection Current selection in editor
+	 * @param type Markdown Button Type
+	 * @param editorModel TextModel
+	 */
+	private everyLineMatchesBeginString(selection: Selection, type: MarkdownButtonType, editorModel: TextModel): boolean {
+		if (this.getMarkdownLineType(type) !== MarkdownLineType.EVERY_LINE) {
+			return false;
+		}
+		for (let selectionLine = selection.startLineNumber; selectionLine <= selection.endLineNumber; selectionLine++) {
+			if (!editorModel.getLineContent(selectionLine).startsWith(this.getStartTextToInsert(type))) {
+				return false;
+			}
+		}
+		return true;
+	}
+
+	/**
+	 * Create new IRange object with arbitrary offsets
+	 * @param initialRange range object
+	 * @param startColumnOffset
+	 * @param startLineNumberOffset
+	 * @param endColumnOffset
+	 * @param endLineNumberOffset
+	 */
+	private getIRangeWithOffsets(initialRange: IRange, startColumnOffset = 0, startLineNumberOffset = 0, endColumnOffset = 0, endLineNumberOffset = 0): IRange {
+		return {
+			startColumn: initialRange.startColumn + startColumnOffset,
+			startLineNumber: initialRange.startLineNumber + startLineNumberOffset,
+			endColumn: initialRange.endColumn + endColumnOffset,
+			endLineNumber: initialRange.endLineNumber + endLineNumberOffset
+		};
+	}
+}
+
+export enum MarkdownButtonType {
+	BOLD,
+	ITALIC,
+	CODE,
+	HIGHLIGHT,
+	LINK,
+	UNORDERED_LIST,
+	ORDERED_LIST,
+	IMAGE
+}
+
+// If ALL_LINES, we need to insert markdown at each line (e.g. lists)
+export enum MarkdownLineType {
+	BEGIN_AND_END_LINES,
+	EVERY_LINE
+}
--- a/src/sql/workbench/contrib/notebook/browser/notebook.component.html
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.html
@@ -9,17 +9,6 @@
 	</div>
 	<div #container class="scrollable" style="flex: 1 1 auto; position: relative; outline: none" (click)="unselectActiveCell()" (scroll)="scrollHandler($event)">
 		<loading-spinner [loading]="isLoading"></loading-spinner>
-		<div class="hoverButtonsContainer" *ngIf="(cells && cells.length > 0) && !isLoading">
-			<span class="containerBackground"></span>
-			<button class="hoverButton" (click)="addCell('code', 0, $event)">
-				<div class="addCodeIcon"></div>
-				<span>{{addCodeLabel}}</span>
-			</button>
-			<button class="hoverButton" (click)="addCell('markdown', 0, $event)">
-				<div class="addTextIcon"></div>
-				<span>{{addTextLabel}}</span>
-			</button>
-		</div>
 		<div *ngFor="let cell of cells">
 			<div class="notebook-cell" (click)="selectCell(cell, $event)" [class.active]="cell.active">
 				<code-cell-component *ngIf="cell.cellType === 'code'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
@@ -27,17 +16,6 @@
 				<text-cell-component *ngIf="cell.cellType === 'markdown'" [cellModel]="cell" [model]="model" [activeCellId]="activeCellId">
 				</text-cell-component>
 			</div>
-			<div class="hoverButtonsContainer">
-				<span class="containerBackground"></span>
-				<button class="hoverButton" (click)="addCell('code', findCellIndex(cell) + 1, $event)">
-					<div class="addCodeIcon"></div>
-					<span>{{addCodeLabel}}</span>
-				</button>
-				<button class="hoverButton" (click)="addCell('markdown', findCellIndex(cell) + 1, $event)">
-					<div class="addTextIcon"></div>
-					<span>{{addTextLabel}}</span>
-				</button>
-			</div>
 		</div>
 		<div class="notebook-cell" *ngIf="(!cells || !cells.length) && !isLoading">
 			<placeholder-cell-component [cellModel]="cell" [model]="model">
--- a/src/sql/workbench/contrib/notebook/browser/notebook.css
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.css
@@ -2,16 +2,21 @@
 *  Copyright (c) Microsoft Corporation. All rights reserved.
 *  Licensed under the Source EULA. See License.txt in the project root for license information.
 *--------------------------------------------------------------------------------------------*/
+.notebookEditor .scrollable {
+	margin-top: 5px;
+}
+
 .notebookEditor .editor-toolbar {
-	border-bottom-width: 1px;
 	border-bottom-style: solid;
+	border-width: 0px 0px 1px 0px;
 }

 .notebookEditor .notebook-cell {
-	margin: 1px 20px;
-	border-width: 1px;
+	border-color: transparent;
 	border-style: solid;
-	border-radius: 3px;
+	border-width: 1px 1px 1px 4px;
+	margin: 24px 20px;
+	position: relative;
 }

 .notebookEditor .notebook-info-label {
@@ -120,6 +125,9 @@
 .moreActions.actionhidden {
 	visibility: hidden
 }
+.moreActions .monaco-action-bar {
+	margin-left: -12px;
+}

 .notebookEditor .notebook-cellTable {
 	margin-left: 20px;
--- a/src/sql/workbench/contrib/notebook/browser/notebook.module.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebook.module.ts
@@ -30,6 +30,8 @@ import { LinkHandlerDirective } from 'sql/workbench/contrib/notebook/browser/cel
 import { IBootstrapParams, ISelector } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
 import { ICellComponenetRegistry, Extensions as OutputComponentExtensions } from 'sql/platform/notebooks/common/outputRegistry';
 import { CollapseComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/collapse.component';
+import { MarkdownToolbarComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component';
+import { CellToolbarComponent } from 'sql/workbench/contrib/notebook/browser/cellViews/cellToolbar.component';

 const outputComponentRegistry = Registry.as<ICellComponenetRegistry>(OutputComponentExtensions.CellComponentContributions);

@@ -46,6 +48,8 @@ export const NotebookModule = (params, selector: string, instantiationService: I
 			LoadingSpinner,
 			CodeComponent,
 			CodeCellComponent,
+			CellToolbarComponent,
+			MarkdownToolbarComponent,
 			PlaceholderCellComponent,
 			NotebookComponent,
 			ComponentHostDirective,
--- a/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
+++ b/src/sql/workbench/contrib/notebook/browser/notebookStyles.ts
@@ -5,9 +5,10 @@
 import 'vs/css!./notebook';

 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { SIDE_BAR_BACKGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme';
+import { SIDE_BAR_BACKGROUND, EDITOR_GROUP_HEADER_TABS_BACKGROUND } from 'vs/workbench/common/theme';
 import { activeContrastBorder, contrastBorder, buttonBackground, textLinkForeground, textLinkActiveForeground, textPreformatForeground, textBlockQuoteBackground, textBlockQuoteBorder, buttonForeground, editorBackground, lighten } from 'vs/platform/theme/common/colorRegistry';
 import { editorLineHighlight, editorLineHighlightBorder } from 'vs/editor/common/view/editorColorRegistry';
+import { cellBorder, markdownEditorBackground, splitBorder, codeEditorBackground, codeEditorBackgroundActive, codeEditorLineNumber, codeEditorToolbarIcon, codeEditorToolbarBackground, codeEditorToolbarBorder, toolbarBackground, toolbarIcon, toolbarBottomBorder } from 'sql/platform/theme/common/colorRegistry';
 import { IDisposable } from 'vs/base/common/lifecycle';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 import { BareResultsGridInfo, getBareResultsGridInfoStyles } from 'sql/workbench/contrib/query/browser/queryResultsEditor';
@@ -17,10 +18,6 @@ import * as types from 'vs/base/common/types';
 export function registerNotebookThemes(overrideEditorThemeSetting: boolean, configurationService: IConfigurationService): IDisposable {
 	return registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {

-		let lightBoxShadow = '0px 4px 6px 0px rgba(0, 0, 0, 0.14)';
-		let darkBoxShadow = '0px 4px 6px 0px rgba(0, 0, 0, 1)';
-		let addBorderToInactiveCodeCells = true;
-
 		// Book Navigation Buttons
 		const buttonForegroundColor = theme.getColor(buttonForeground);
 		const buttonBackgroundColor = theme.getColor(buttonBackground);
@@ -40,14 +37,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		if (buttonBackgroundColor) {
 			let lighterBackgroundColor = lighten(buttonBackgroundColor, 0.825)(theme);
 			collector.addRule(`
-				.notebookEditor .notebook-cell.active {
-					border-color: ${buttonBackgroundColor};
-					border-width: 1px;
-				}
-				.notebookEditor .notebook-cell.active:hover {
-					border-color: ${buttonBackgroundColor};
-				}
-
 				.notebookEditor .hoverButton {
 					border-color: ${buttonBackgroundColor};
 				}
@@ -58,7 +47,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 				.notebookEditor .hoverButton {
 					color: ${buttonBackgroundColor};
 				}
-
 				.vs-dark .notebookEditor .hoverButton {
 					border-color: ${lighterBackgroundColor};
 				}
@@ -89,38 +77,11 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 			`);
 		}

-		// Box shadow handling
-		collector.addRule(`
-			.notebookEditor .notebook-cell.active {
-				box-shadow: ${lightBoxShadow};
-			}
-
-			.vs-dark .notebookEditor .notebook-cell.active {
-				box-shadow: ${darkBoxShadow};
-			}
-
-			.hc-black .notebookEditor .notebook-cell.active {
-				box-shadow: 0;
-			}
-
-			.notebookEditor .notebook-cell:hover:not(.active) {
-				box-shadow: ${lightBoxShadow};
-			}
-
-			.vs-dark .notebookEditor .notebook-cell:hover:not(.active) {
-				box-shadow: ${darkBoxShadow};
-			}
-
-			.hc-black .notebookEditor .notebook-cell:hover:not(.active) {
-				box-shadow: 0;
-			}
-		`);
-
 		const inactiveBorder = theme.getColor(SIDE_BAR_BACKGROUND);
-		const sidebarColor = theme.getColor(SIDE_BAR_SECTION_HEADER_BACKGROUND);
 		const notebookLineHighlight = theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
 		// Code editor style overrides - only applied if user chooses this as preferred option
 		if (overrideEditorThemeSetting) {
+
 			let lineHighlight = theme.getColor(editorLineHighlight);
 			if (!lineHighlight || lineHighlight.isTransparent()) {
 				// Use notebook color override
@@ -135,43 +96,12 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 				// Override values only for the children of code-component so regular editors aren't affected
 				collector.addRule(`code-component .monaco-editor .view-overlays .current-line { border: 0px; }`);
 			}
-
-			// Override code editor background if color is defined
-			let codeBackground = inactiveBorder; // theme.getColor(EDITOR_GROUP_HEADER_TABS_BACKGROUND);
-			if (codeBackground) {
-				// Main background
-				collector.addRule(`.notebook-cell:not(.active) code-component { background-color: ${codeBackground}; }`);
-				collector.addRule(`
-					.notebook-cell:not(.active) code-component .monaco-editor,
-					.notebook-cell:not(.active) code-component .monaco-editor-background,
-					.notebook-cell:not(.active) code-component .monaco-editor .inputarea.ime-input,
-					.notebook-cell.active .hide-component-button:hover
-					{
-						background-color: ${codeBackground};
-					}`);
-
-				// Margin background will be the same (may override some styles)
-				collector.addRule(`.notebook-cell:not(.active) code-component .monaco-editor .margin { background-color: ${codeBackground}; }`);
-				addBorderToInactiveCodeCells = false;
-			}
 		}

 		// Inactive border
 		if (inactiveBorder) {
 			// Standard notebook cell behavior
 			collector.addRule(`
-				.notebookEditor .notebook-cell {
-					border-color: transparent;
-					border-width: 1px;
-				}
-				.notebookEditor .notebook-cell.active {
-					border-width: 1px;
-				}
-				.notebookEditor .notebook-cell:hover {
-					border-color: ${inactiveBorder};
-					border-width: 1px;
-				}
-
 				.notebookEditor .hoverButtonsContainer .containerBackground {
 					background-color: ${inactiveBorder};
 				}
@@ -181,35 +111,10 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 			collector.addRule(`
 				.notebookEditor .notebook-cell.active code-component {
 					border-color: ${inactiveBorder};
-					border-width: 0px 0px 1px 0px;
-					border-style: solid;
-					border-radius: 0;
 				}
 			`);
-
-			if (addBorderToInactiveCodeCells) {
-				// Sets a border for the editor component if we don't have a custom line color for editor instead
-				collector.addRule(`
-					.notebookEditor .notebook-cell code-component {
-						border-color: ${inactiveBorder};
-						border-width: 1px;
-						border-style: solid;
-						border-radius: 3px 3px 3px 3px;
-					}
-					.notebookEditor .notebook-cell:hover code-component {
-						border-width: 0px 0px 1px 0px;
-						border-radius: 0px;
-					}
-				`);
-			}
 		}

-		// Sidebar and cell outline toolbar color set only when active
-		collector.addRule(`
-			.notebook-cell.active code-component .toolbar {
-				background-color: ${sidebarColor};
-			}
-		`);
 		// Styling with Outline color (e.g. high contrast theme)
 		const outline = theme.getColor(activeContrastBorder);
 		const hcOutline = theme.getColor(contrastBorder);
@@ -219,21 +124,11 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 					border-color: ${hcOutline};
 					border-width: 0px 0px 1px 0px;
 				}
-				.hc-black .notebookEditor .notebook-cell.active code-component {
-					border-color: ${outline};
-					border-width: 0px 0px 1px 0px;
-				}
 				.hc-black .notebookEditor .notebook-cell:not(.active) {
 					outline-color: ${hcOutline};
 					outline-width: 1px;
 					outline-style: solid;
 				}
-				.notebookEditor .notebook-cell.active {
-					outline-color: ${outline};
-					outline-width: 1px;
-					outline-style: solid;
-				}
-
 				.hc-black .notebookEditor .hoverButton {
 					color: ${hcOutline};
 				}
@@ -283,8 +178,6 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 			}
 			`);
 		}
-
-
 		let blockQuoteBackground = theme.getColor(textBlockQuoteBackground);
 		let blockQuoteBorder = theme.getColor(textBlockQuoteBorder);
 		if (preformatForeground) {
@@ -313,5 +206,64 @@ export function registerNotebookThemes(overrideEditorThemeSetting: boolean, conf
 		.grid-panel .monaco-table, .message-tree {
 			${getBareResultsGridInfoStyles(rawOptions)}
 		}`);
+
+
+		// Cell border
+		const cellBorderColor = theme.getColor(cellBorder);
+		if (cellBorderColor) {
+			collector.addRule(`.notebookEditor .notebook-cell.active { border-color: ${cellBorderColor};}`);
+		}
+
+		// Markdown editor toolbar
+		const toolbarBackgroundColor = theme.getColor(toolbarBackground);
+		if (toolbarBackgroundColor) {
+			collector.addRule(`markdown-toolbar-component { background: ${toolbarBackgroundColor};}`);
+		}
+		const toolbarIconColor = theme.getColor(toolbarIcon);
+		if (toolbarIconColor) {
+			collector.addRule(`.markdown-toolbar li a { background-color: ${toolbarIconColor};}`);
+		}
+		const toolbarBottomBorderColor = theme.getColor(toolbarBottomBorder);
+		if (toolbarBottomBorderColor) {
+			collector.addRule(`.markdown-toolbar { border-bottom-color: ${toolbarBottomBorderColor};}`);
+		}
+
+		// Markdwon editor colors
+		const markdownEditorBackgroundColor = theme.getColor(markdownEditorBackground);
+		if (markdownEditorBackgroundColor) {
+			collector.addRule(`text-cell-component code-component { background-color: ${markdownEditorBackgroundColor}; }`);
+		}
+		const splitBorderColor = theme.getColor(splitBorder);
+		if (splitBorderColor) {
+			collector.addRule(`.notebookEditor .notebook-cell.active text-cell-component code-component { border-bottom-color: ${splitBorderColor}; }`);
+		}
+
+		// Code editor colors
+		const codeEditorBackgroundColor = theme.getColor(codeEditorBackground);
+		if (codeEditorBackgroundColor) {
+			collector.addRule(`code-cell-component code-component { background-color: ${codeEditorBackgroundColor}; }`);
+		}
+		const codeEditorBackgroundActiveColor = theme.getColor(codeEditorBackgroundActive);
+		if (codeEditorBackgroundActiveColor) {
+			collector.addRule(`.notebook-cell.active code-cell-component code-component { background-color: ${codeEditorBackgroundActiveColor}; }`);
+		}
+		const codeEditorLineNumberColor = theme.getColor(codeEditorLineNumber);
+		if (codeEditorLineNumberColor) {
+			collector.addRule(`code-cell-component code-component .editor .line-numbers { color: ${codeEditorLineNumberColor};}`);
+		}
+		const codeEditorToolbarIconColor = theme.getColor(codeEditorToolbarIcon);
+		if (codeEditorToolbarIconColor) {
+			collector.addRule(
+				`code-cell-component code-component .carbon-taskbar .codicon.hideIcon { color: ${codeEditorToolbarIconColor};}`
+			);
+		}
+		const codeEditorToolbarBackgroundColor = theme.getColor(codeEditorToolbarBackground);
+		if (codeEditorToolbarBackgroundColor) {
+			collector.addRule(`.notebook-cell.active code-cell-component code-component .toolbar { background-color: ${codeEditorToolbarBackgroundColor};}`);
+		}
+		const codeEditorToolbarBorderColor = theme.getColor(codeEditorToolbarBorder);
+		if (codeEditorToolbarBorderColor) {
+			collector.addRule(`.notebook-cell.active code-cell-component code-component .toolbar { border-right-color: ${codeEditorToolbarBorderColor}!important;}`);
+		}
 	});
 }
				`@@ -0,0 +1 @@`
				`<svg id="executeCell" data-name="Execute Cell" xmlns="http://www.w3.org/2000/svg" fill="#A19F9D" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>execute_cell</title><circle cx="8" cy="7.92" r="7.76"/><polygon class="cls-1" points="10.7 8 6.67 11 6.67 5 10.7 8 10.7 8"/></svg>`