From 46fc807b69caea388baa29aafe15fe10426079d8 Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Thu, 9 Dec 2021 11:05:07 -0800 Subject: [PATCH] Use standard key events for Notebook keybindings (#17880) * Use standard key events for Notebook keybindings * Add more --- .../cellViews/markdownToolbar.component.ts | 13 +++++++---- .../browser/cellViews/textCell.component.ts | 23 +++++++++++-------- 2 files changed, 21 insertions(+), 15 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 9a6e291c9b..44a5a6b9c5 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/markdownToolbar.component.ts @@ -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 = /\[(?.+)\]\((?[^ ]+)(?: "(?.+)")?\)/; @@ -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); diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts index e28b7bcdfe..a4d04cd84a 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts @@ -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();