Skip to content

Commit

Permalink
added commands for 'dd' (#7313)
Browse files Browse the repository at this point in the history 
* added commands for 'dd', 'ctrl + enter',
'alt + enter', 'a', 'b', 'j', 'k' to behave just like
jupyterLabs.

* added news file

* removed the addEmptyCell function, it was
redundant.

* Added parameter to insertCell to check if the cell
being inserted should be monaco or not
  • Loading branch information
David Kutugata authored Sep 10, 2019
1 parent bb6899c commit 7362b25
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 18 deletions.
1 change: 1 addition & 0 deletions news/2 Fixes/7229.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added commands for 'dd', 'ctrl + enter', 'alt + enter', 'a', 'b', 'j', 'k' in the native Editor to behave just like JupyterLabs.
6 changes: 5 additions & 1 deletion src/datascience-ui/interactive-common/mainStateController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -701,7 +701,7 @@ export class MainStateController implements IMessageHandler {
this.insertCell(cell);
}

protected insertCell(cell: ICell, position?: number): ICellViewModel | undefined {
protected insertCell(cell: ICell, position?: number, isMonaco?: boolean): ICellViewModel | undefined {
if (cell) {
const showInputs = getSettings().showCellInputCode;
const collapseInputs = getSettings().collapseCellInputCodeByDefault;
Expand All @@ -711,6 +711,10 @@ export class MainStateController implements IMessageHandler {
cellVM = this.alterCellVM(cellVM, showInputs, !collapseInputs);

if (cellVM) {
if (isMonaco) {
cellVM.useQuickEdit = false;
}

const newList = [...this.state.cellVMs];
// Make sure to use the same array so our entire state doesn't update
if (position && position >= 0) {
Expand Down
92 changes: 79 additions & 13 deletions src/datascience-ui/native-editor/nativeEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
private stateController: NativeEditorStateController;
private initialCellDivs: (HTMLDivElement | null)[] = [];
private debounceUpdateVisibleCells = debounce(this.updateVisibleCells.bind(this), 100);
private pressedDOnce = false;

constructor(props: INativeEditorProps) {
super(props);
Expand Down Expand Up @@ -281,68 +282,114 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
}
}

// tslint:disable-next-line: cyclomatic-complexity
private keyDownCell = (cellId: string, e: IKeyboardEvent) => {
// tslint:disable-next-line: cyclomatic-complexity max-func-body-length
private keyDownCell = async (cellId: string, e: IKeyboardEvent) => {
switch (e.code) {
case 'ArrowUp':
this.pressedDOnce = false;
if (this.state.focusedCell === cellId && e.editorInfo && e.editorInfo.isFirstLine && !e.editorInfo.isSuggesting) {
this.arrowUpFromCell(cellId, e);
} else if (!this.state.focusedCell) {
this.arrowUpFromCell(cellId, e);
}
break;

case 'ArrowDown':
this.pressedDOnce = false;
if (this.state.focusedCell === cellId && e.editorInfo && e.editorInfo.isLastLine && !e.editorInfo.isSuggesting) {
this.arrowDownFromCell(cellId, e);
} else if (!this.state.focusedCell) {
this.arrowDownFromCell(cellId, e);
}
break;

case 'Escape':
this.pressedDOnce = false;
if (this.state.focusedCell && e.editorInfo && !e.editorInfo.isSuggesting) {
this.escapeCell(this.state.focusedCell, e);
}
break;

case 'y':
this.pressedDOnce = false;
if (!this.state.focusedCell && this.state.selectedCell) {
e.stopPropagation();
this.stateController.changeCellType(this.state.selectedCell, 'code');
}
break;

case 'm':
this.pressedDOnce = false;
if (!this.state.focusedCell && this.state.selectedCell) {
e.stopPropagation();
this.stateController.changeCellType(this.state.selectedCell, 'markdown');
}
break;

case 'l':
this.pressedDOnce = false;
if (!this.state.focusedCell && this.state.selectedCell) {
e.stopPropagation();
this.stateController.toggleLineNumbers(this.state.selectedCell);
}
break;

case 'o':
this.pressedDOnce = false;
if (!this.state.focusedCell && this.state.selectedCell) {
e.stopPropagation();
this.stateController.toggleOutput(this.state.selectedCell);
}
break;

case 'Enter':
this.pressedDOnce = false;
if (e.shiftKey) {
this.submitCell(cellId, e);
this.submitCell(cellId, e, true);
} else if (e.ctrlKey) {
this.submitCell(cellId, e, false);
} else if (e.altKey) {
this.submitCell(cellId, e, false);
this.stateController.insertBelow(cellId, true);
} else {
this.enterCell(cellId, e);
}
break;

case 'd':
if (this.pressedDOnce) {
this.stateController.deleteCell(cellId);
this.pressedDOnce = false;
} else {
this.pressedDOnce = true;
}
break;
case 'a':
this.pressedDOnce = false;
if (this.state.focusedCell === cellId && e.editorInfo && e.editorInfo.isLastLine && !e.editorInfo.isSuggesting) {
this.stateController.insertAbove(cellId, true);
} else if (!this.state.focusedCell) {
this.stateController.insertAbove(cellId, true);
}
break;
case 'b':
this.pressedDOnce = false;
if (this.state.focusedCell === cellId && e.editorInfo && e.editorInfo.isLastLine && !e.editorInfo.isSuggesting) {
this.stateController.insertBelow(cellId, true);
} else if (!this.state.focusedCell) {
this.stateController.insertBelow(cellId, true);
}
break;
case 'j':
this.pressedDOnce = false;
if (this.state.focusedCell === cellId && e.editorInfo && e.editorInfo.isFirstLine && !e.editorInfo.isSuggesting) {
this.arrowUpFromCell(cellId, e);
} else if (!this.state.focusedCell) {
this.arrowUpFromCell(cellId, e);
}
break;
case 'k':
this.pressedDOnce = false;
if (this.state.focusedCell === cellId && e.editorInfo && e.editorInfo.isFirstLine && !e.editorInfo.isSuggesting) {
this.arrowDownFromCell(cellId, e);
} else if (!this.state.focusedCell) {
this.arrowDownFromCell(cellId, e);
}
break;
default:
this.pressedDOnce = false;
break;
}
}
Expand All @@ -361,7 +408,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
}
}

private submitCell = (cellId: string, e: IKeyboardEvent) => {
private submitCell = (cellId: string, e: IKeyboardEvent, moveToNextCell: boolean) => {
let content: string | undefined ;
const cellVM = this.findCellViewModel(cellId);

Expand All @@ -382,7 +429,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
}

// If this is not the edit cell, move to our next cell
if (cellId !== Identifiers.EditCellId) {
if (cellId !== Identifiers.EditCellId && moveToNextCell) {
const nextCell = this.getNextCellId(cellId);
if (nextCell) {
this.stateController.selectCell(nextCell, undefined);
Expand Down Expand Up @@ -439,6 +486,7 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
}

private clickCell = (cellId: string) => {
this.pressedDOnce = false;
const focusedCell = cellId === this.state.focusedCell ? cellId : undefined;
this.stateController.selectCell(cellId, focusedCell);
}
Expand Down Expand Up @@ -472,6 +520,24 @@ export class NativeEditor extends React.Component<INativeEditorProps, IMainState
// }
// }

// private pasteFromClipboard = (cellId: string) => {
// const editedCells = this.state.cellVMs;
// const index = editedCells.findIndex(x => x.cell.id === cellId) + 1;

// if (index > -1) {
// const textArea = document.createElement('textarea');
// document.body.appendChild(textArea);
// textArea.select();
// document.execCommand('Paste');
// editedCells[index].cell.data.source = textArea.value.split(/\r?\n/);
// textArea.remove();
// }

// this.setState({
// cellVMs: editedCells
// });
// }

private moveCellUp = (cellId?: string) => {
if (this.contentPanelRef.current && cellId) {
const wasFocused = this.state.focusedCell;
Expand Down
8 changes: 4 additions & 4 deletions src/datascience-ui/native-editor/nativeEditorStateController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,19 +110,19 @@ export class NativeEditorStateController extends MainStateController {
}
}

public insertAbove = (cellId?: string) => {
public insertAbove = (cellId?: string, isMonaco?: boolean) => {
const cells = this.getState().cellVMs;
const index = cells.findIndex(cvm => cvm.cell.id === cellId);
if (index >= 0) {
this.insertCell(createEmptyCell(uuid(), null), index);
this.insertCell(createEmptyCell(uuid(), null), index, isMonaco);
}
}

public insertBelow = (cellId?: string) => {
public insertBelow = (cellId?: string, isMonaco?: boolean) => {
const cells = this.getState().cellVMs;
const index = cells.findIndex(cvm => cvm.cell.id === cellId);
if (index >= 0) {
this.insertCell(createEmptyCell(uuid(), null), index + 1);
this.insertCell(createEmptyCell(uuid(), null), index + 1, isMonaco);
}
}

Expand Down

0 comments on commit 7362b25

Please sign in to comment.