Use standard key events for Notebook keybindings (#17880)

* Use standard key events for Notebook keybindings

* Add more
This commit is contained in:
Charles Gagnon
2021-12-09 11:05:07 -08:00
committed by GitHub
parent e6c0b705cc
commit 46fc807b69
2 changed files with 21 additions and 15 deletions

View File

@@ -25,6 +25,8 @@ import { escape } from 'vs/base/common/strings';
import { IImageCalloutDialogOptions, ImageCalloutDialog } from 'sql/workbench/contrib/notebook/browser/calloutDialog/imageCalloutDialog';
import { TextCellEditModes } from 'sql/workbench/services/notebook/common/contracts';
import { NotebookLinkHandler } from 'sql/workbench/contrib/notebook/browser/notebookLinkHandler';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
export const MARKDOWN_TOOLBAR_SELECTOR: string = 'markdown-toolbar-component';
const linksRegex = /\[(?<text>.+)\]\((?<url>[^ ]+)(?: "(?<title>.+)")?\)/;
@@ -39,24 +41,25 @@ export class MarkdownToolbarComponent extends AngularDisposable {
@HostListener('document:keydown', ['$event'])
async onkeydown(e: KeyboardEvent) {
if (this.cellModel?.currentMode === CellEditModes.SPLIT || this.cellModel?.currentMode === CellEditModes.MARKDOWN) {
const keyEvent = new StandardKeyboardEvent(e);
let markdownTextTransformer = new MarkdownTextTransformer(this._notebookService, this.cellModel);
if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_B) {
// Bold Text
DOM.EventHelper.stop(e, true);
await markdownTextTransformer.transformText(MarkdownButtonType.BOLD);
} else if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_I) {
// Italicize text
DOM.EventHelper.stop(e, true);
await markdownTextTransformer.transformText(MarkdownButtonType.ITALIC);
} else if ((e.ctrlKey || e.metaKey) && e.key === 'u') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_U) {
// Underline text
DOM.EventHelper.stop(e, true);
await markdownTextTransformer.transformText(MarkdownButtonType.UNDERLINE);
} else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'k') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.shiftKey && keyEvent.keyCode === KeyCode.KEY_K) {
// Code Block
DOM.EventHelper.stop(e, true);
await markdownTextTransformer.transformText(MarkdownButtonType.CODE);
} else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'h') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.shiftKey && keyEvent.keyCode === KeyCode.KEY_H) {
// Highlight Text
DOM.EventHelper.stop(e, true);
await markdownTextTransformer.transformText(MarkdownButtonType.HIGHLIGHT);

View File

@@ -31,6 +31,8 @@ import { NotebookRange, ICellEditorProvider, INotebookService } from 'sql/workbe
import { HTMLMarkdownConverter } from 'sql/workbench/contrib/notebook/browser/htmlMarkdownConverter';
import { NotebookInput } from 'sql/workbench/contrib/notebook/browser/models/notebookInput';
import { highlightSelectedText } from 'sql/workbench/contrib/notebook/browser/utils';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
export const TEXT_SELECTOR: string = 'text-cell-component';
const USER_SELECT_CLASS = 'actionselect';
@@ -72,33 +74,34 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges {
onkeydown(e: KeyboardEvent) {
if (DOM.getActiveElement() === this.output?.nativeElement && this.isActive() && this.cellModel?.currentMode === CellEditModes.WYSIWYG) {
// Select all text
if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
const keyEvent = new StandardKeyboardEvent(e);
if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_A) {
preventDefaultAndExecCommand(e, 'selectAll');
} else if ((e.metaKey && e.shiftKey && e.key === 'z') || (e.ctrlKey && e.key === 'y') && !this.markdownMode) {
} else if ((keyEvent.metaKey && keyEvent.shiftKey && keyEvent.keyCode === KeyCode.KEY_Z) || (keyEvent.ctrlKey && keyEvent.keyCode === KeyCode.KEY_Y) && !this.markdownMode) {
// Redo text
this.redoRichTextChange();
} else if ((e.ctrlKey || e.metaKey) && e.key === 'z') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_Z) {
// Undo text
this.undoRichTextChange();
} else if (e.shiftKey && e.key === 'Tab') {
} else if (keyEvent.shiftKey && keyEvent.keyCode === KeyCode.Tab) {
// Outdent text
preventDefaultAndExecCommand(e, 'outdent');
} else if (e.key === 'Tab') {
} else if (keyEvent.keyCode === KeyCode.Tab) {
// Indent text
preventDefaultAndExecCommand(e, 'indent');
} else if ((e.ctrlKey || e.metaKey) && e.key === 'b') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_B) {
// Bold text
preventDefaultAndExecCommand(e, 'bold');
} else if ((e.ctrlKey || e.metaKey) && e.key === 'i') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_I) {
// Italicize text
preventDefaultAndExecCommand(e, 'italic');
} else if ((e.ctrlKey || e.metaKey) && e.key === 'u') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.keyCode === KeyCode.KEY_U) {
// Underline text
preventDefaultAndExecCommand(e, 'underline');
} else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'k') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.shiftKey && keyEvent.keyCode === KeyCode.KEY_K) {
// Code Block
preventDefaultAndExecCommand(e, 'formatBlock', false, 'pre');
} else if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'h') {
} else if ((keyEvent.ctrlKey || keyEvent.metaKey) && keyEvent.shiftKey && keyEvent.keyCode === KeyCode.KEY_H) {
// Highlight Text
DOM.EventHelper.stop(e, true);
highlightSelectedText();