Add Keybindings for some Markdown Toolbar Actions (#17198)

* Add Keybindings for some markdown toolbar

* add extension registry

* when in text cell stopPropagation to only trigger one command

extensions/notebook/package.json

@@ -291,6 +291,22 @@
           "dark": "resources/dark/unpin_inverse.svg",
           "light": "resources/light/unpin.svg"
         }
+      },
+      {
+        "command": "notebook.command.boldText",
+        "title": "%notebook.command.boldText%"
+      },
+      {
+        "command": "notebook.command.italicizeText",
+        "title": "%notebook.command.italicizeText%"
+      },
+      {
+        "command": "notebook.command.underlineText",
+        "title": "%notebook.command.underlineText%"
+      },
+      {
+        "command": "notebook.command.codeBlock",
+        "title": "%notebook.command.codeBlock%"
       }
     ],
     "languages": [
@@ -425,6 +441,22 @@
         {
           "command": "notebook.command.unpinNotebook",
           "when": "false"
+        },
+        {
+          "command": "notebook.command.boldText",
+          "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
+        },
+        {
+          "command": "notebook.command.italicizeText",
+          "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
+        },
+        {
+          "command": "notebook.command.underlineText",
+          "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
+        },
+        {
+          "command": "notebook.command.codeBlock",
+          "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
         }
       ],
       "touchBar": [
@@ -587,6 +619,26 @@
         "command": "notebook.command.addtext",
         "key": "Ctrl+Shift+T",
         "when": "activeEditor == workbench.editor.notebookEditor"
+      },
+      {
+        "command": "notebook.command.boldText",
+        "key": "Ctrl+B",
+        "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
+      },
+      {
+        "command": "notebook.command.italicizeText",
+        "key": "Ctrl+I",
+        "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
+      },
+      {
+        "command": "notebook.command.underlineText",
+        "key": "Ctrl+U",
+        "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
+      },
+      {
+        "command": "notebook.command.codeBlock",
+        "key": "Ctrl+Shift+K",
+        "when": "activeEditor == workbench.editor.notebookEditor && editorLangId == markdown"
       }
     ],
     "notebook.languagemagics": [

extensions/notebook/package.nls.json

@@ -23,6 +23,10 @@
 	"notebook.command.addcode": "Add Code Cell",
 	"notebook.command.addtext": "Add Text Cell",
 	"notebook.command.addcell": "Add Cell",
+	"notebook.command.boldText": "Bold Markdown Text",
+	"notebook.command.italicizeText": "Italicize Markdown Text",
+	"notebook.command.underlineText": "Underline Markdown Text",
+	"notebook.command.codeBlock": "Add Code Block",
 	"title.analyzeJupyterNotebook": "Analyze in Notebook",
 	"title.newJupyterNotebook": "New Notebook",
 	"title.openJupyterNotebook": "Open Notebook",

extensions/notebook/src/common/notebookUtils.ts

@@ -111,6 +111,10 @@ export class NotebookUtils {
 		}
 	}
 
+	public async toggleMarkdownStyle(style: string, showUI?: boolean, value?: string): Promise<void> {
+		return vscode.commands.executeCommand(style, showUI, value);
+	}
+
 	public async analyzeNotebook(oeContext?: azdata.ObjectExplorerContext): Promise<void> {
 		// Ensure we get a unique ID for the notebook. For now we're using a different prefix to the built-in untitled files
 		// to handle this. We should look into improving this in the future

extensions/notebook/src/extension.ts

@@ -137,6 +137,18 @@ export async function activate(extensionContext: vscode.ExtensionContext): Promi
 		const urlToOpen: string = 'https://aka.ms/localized-BDC-book';
 		await vscode.commands.executeCommand('vscode.open', vscode.Uri.parse(urlToOpen));
 	}));
+	extensionContext.subscriptions.push(vscode.commands.registerCommand('notebook.command.boldText', async () => {
+		await appContext.notebookUtils.toggleMarkdownStyle('bold');
+	}));
+	extensionContext.subscriptions.push(vscode.commands.registerCommand('notebook.command.italicizeText', async () => {
+		await appContext.notebookUtils.toggleMarkdownStyle('italic');
+	}));
+	extensionContext.subscriptions.push(vscode.commands.registerCommand('notebook.command.underlineText', async () => {
+		await appContext.notebookUtils.toggleMarkdownStyle('underline');
+	}));
+	extensionContext.subscriptions.push(vscode.commands.registerCommand('notebook.command.codeBlock', async () => {
+		await appContext.notebookUtils.toggleMarkdownStyle('formatBlock', false, 'pre');
+	}));
 
 	controller = new JupyterController(appContext);
 	let result = await controller.activate();

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

@@ -70,17 +70,33 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	@HostListener('document:keydown', ['$event'])
 	onkeydown(e: KeyboardEvent) {
 		if (DOM.getActiveElement() === this.output?.nativeElement && this.isActive() && this.cellModel?.currentMode === CellEditModes.WYSIWYG) {
-			// select the active .
+			// Select all text
 			if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
 				preventDefaultAndExecCommand(e, 'selectAll');
+				// Redo text
 			} else if ((e.metaKey && e.shiftKey && e.key === 'z') || (e.ctrlKey && e.key === 'y') && !this.markdownMode) {
 				this.redoRichTextChange();
+				// Undo text
 			} else if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
 				this.undoRichTextChange();
+				// Outdent text
 			} else if (e.shiftKey && e.key === 'Tab') {
 				preventDefaultAndExecCommand(e, 'outdent');
+				// Indent text
 			} else if (e.key === 'Tab') {
 				preventDefaultAndExecCommand(e, 'indent');
+				// Bold text
+			} else if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
+				preventDefaultAndExecCommand(e, 'bold');
+				// Italicize text
+			} else if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
+				preventDefaultAndExecCommand(e, 'italic');
+				// Underline text
+			} else if ((e.ctrlKey || e.metaKey) && e.key === 'u') {
+				preventDefaultAndExecCommand(e, 'underline');
+				// Code Block
+			} else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'k') {
+				preventDefaultAndExecCommand(e, 'formatBlock', false, 'pre');
 			}
 		}
 	}
@@ -583,10 +599,11 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
 	}
 }
 
-function preventDefaultAndExecCommand(e: KeyboardEvent, commandId: string) {
+function preventDefaultAndExecCommand(e: KeyboardEvent, commandId: string, showUI?: boolean, value?: string) {
-	// use preventDefault() to avoid invoking the editor's select all
+	// Use preventDefault() to avoid invoking the editor's select all and stopPropagation to prevent further propagation of the current event
+	e.stopPropagation();
 	e.preventDefault();
-	document.execCommand(commandId);
+	document.execCommand(commandId, showUI, value);
 }
 
 /**