ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-30 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enable keyboard navigation in notebooks (#18176)

Browse Source
This commit is contained in:
Barbara Valdez
2022-02-08 14:30:58 -08:00
committed by GitHub
parent 6ba746e570
commit 8695b463dc
7 changed files with 96 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/sql/workbench/contrib/notebook/browser/notebook.component.ts
View File

@@ -55,6 +55,8 @@ import { MaskedLabeledMenuItemActionItem } from 'sql/platform/actions/browser/me
import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
import { Emitter } from 'vs/base/common/event';
import { RedoCommand, UndoCommand } from 'vs/editor/browser/editorExtensions';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes';
export const NOTEBOOK_SELECTOR: string = 'notebook-component';
const PRIORITY = 105;
@@ -131,6 +133,40 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
}
return false;
}));
this._register(DOM.addDisposableListener(window, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
let event = new StandardKeyboardEvent(e);
if (this.isActive() && this.model.activeCell) {
if (!this.model.activeCell?.isEditMode) {
if (event.keyCode === KeyCode.DownArrow) {
let next = (this.findCellIndex(this.model.activeCell) + 1) % this.cells.length;
this.selectCell(this.cells[next]);
this.scrollToActiveCell();
} else if (event.keyCode === KeyCode.UpArrow) {
let index = this.findCellIndex(this.model.activeCell);
if (index === 0) {
index = this.cells.length;
}
this.selectCell(this.cells[--index]);
this.scrollToActiveCell();
} else if (event.keyCode === KeyCode.Escape) {
// unselects active cell and removes the focus from code cells
this.unselectActiveCell();
(document.activeElement as HTMLElement).blur();
}
else if (event.keyCode === KeyCode.Enter) {
// prevents adding a newline to the cell source
e.preventDefault();
// show edit toolbar
this.setActiveCellEditActionMode(true);
this.toggleEditMode();
}
} else if (event.keyCode === KeyCode.Escape) {
// first time hitting escape removes the cursor from code cell and changes toolbar in text cells and changes edit mode to false
this.toggleEditMode();
this.setActiveCellEditActionMode(false);
}
}
}));
}
ngOnInit() {
@@ -248,6 +284,23 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
}
}
private scrollToActiveCell(): void {
// Get active cell from active notebook editor
const activeCellElement = document.querySelector(`.editor-group-container.active .notebook-cell.active`);
activeCellElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
private toggleEditMode(): void {
let selectedCell: TextCellComponent | CodeCellComponent = undefined;
if (this.model.activeCell.cellType !== CellTypes.Code) {
selectedCell = this.textCells.find(c => c.cellModel.id === this.activeCellId);
} else {
selectedCell = this.codeCells.find(c => c.cellModel.id === this.activeCellId);
}
selectedCell.toggleEditMode();
}
//Saves scrollTop value on scroll change
public scrollHandler(event: Event) {
this._scrollTop = (<HTMLElement>event.srcElement).scrollTop;
@@ -261,16 +314,18 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe
// Handles double click to edit icon change
// See textcell.component.ts for changing edit behavior
public enableActiveCellIconOnDoubleClick() {
public enableActiveCellEditIconOnDoubleClick() {
if (this.doubleClickEditEnabled) {
const toolbarComponent = (<CellToolbarComponent>this.cellToolbar.first);
const toolbarEditCellAction = toolbarComponent.getEditCellAction();
if (!toolbarEditCellAction.editMode) {
toolbarEditCellAction.editMode = !toolbarEditCellAction.editMode;
}
this.setActiveCellEditActionMode(true);
}
}
public setActiveCellEditActionMode(editMode: boolean) {
const toolbarComponent = (<CellToolbarComponent>this.cellToolbar.first);
const toolbarEditCellAction = toolbarComponent.getEditCellAction();
toolbarEditCellAction.editMode = editMode;
}
// Add cell based on cell type
public addCell(cellType: CellType, index?: number, event?: Event) {
if (event) {