Skip to content

Commit

Permalink
feat(editors): add Ctrl+S combo to enhance LongText (textarea) Editor
Browse files Browse the repository at this point in the history
- user can now use `Ctrl+ENTER` or `Ctrl+s` shortcut combo to trigger a Save
  • Loading branch information
ghiscoding committed Aug 17, 2021
1 parent 5e23f99 commit 5116bbd
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 2 deletions.
44 changes: 44 additions & 0 deletions packages/common/src/editors/__tests__/longTextEditor.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,50 @@ describe('LongTextEditor', () => {
expect(editor.isValueTouched()).toBe(true);
});

it('should call the "save" method when the Ctrl+s combination event is triggered', () => {
mockItemData = { id: 1, title: 'task', isActive: true };
gridOptionMock.autoCommitEdit = true;
const spyCommit = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');

editor = new LongTextEditor(editorArguments);
editor.loadValue(mockItemData);
editor.setValue('task 2');
const spySave = jest.spyOn(editor, 'save');
const editorElm = editor.editorDomElement;

editorElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', {
key: 's',
ctrlKey: true,
bubbles: true
}));

expect(spyCommit).toHaveBeenCalled();
expect(spySave).toHaveBeenCalled();
expect(editor.isValueTouched()).toBe(true);
});

it('should call the "save" method when the Ctrl+S (uppercase S) combination event is triggered', () => {
mockItemData = { id: 1, title: 'task', isActive: true };
gridOptionMock.autoCommitEdit = true;
const spyCommit = jest.spyOn(gridStub.getEditorLock(), 'commitCurrentEdit');

editor = new LongTextEditor(editorArguments);
editor.loadValue(mockItemData);
editor.setValue('task 2');
const spySave = jest.spyOn(editor, 'save');
const editorElm = editor.editorDomElement;

editorElm.dispatchEvent(new (window.window as any).KeyboardEvent('keydown', {
key: 'S',
ctrlKey: true,
bubbles: true
}));

expect(spyCommit).toHaveBeenCalled();
expect(spySave).toHaveBeenCalled();
expect(editor.isValueTouched()).toBe(true);
});

it('should call the "cancel" method when the Escape keydown event is triggered', () => {
editor = new LongTextEditor(editorArguments);
editor.loadValue(mockItemData);
Expand Down
5 changes: 4 additions & 1 deletion packages/common/src/editors/editors.index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ export const Editors = {
/** Integer Number Editor using an input of type "number" */
integer: IntegerEditor,

/** Long Text Editor (uses a textarea) */
/**
* Long Text Editor (uses a textarea) for longer text (you can also optionally configure its size).
* When ready to Save you can click on the "Save" and/or use shortcuts (Ctrl+ENTER or Ctrl+s).
*/
longText: LongTextEditor,

/** Multiple Select editor (which uses 3rd party lib "multiple-select.js") */
Expand Down
3 changes: 2 additions & 1 deletion packages/common/src/editors/longTextEditor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,8 @@ export class LongTextEditor implements Editor {
this._isValueTouched = true;

if (!this.args.compositeEditorOptions) {
if (keyCode === KeyCode.ENTER && event.ctrlKey) {
if ((keyCode === KeyCode.ENTER && event.ctrlKey) || (event.ctrlKey && event.key.toUpperCase() === 'S')) {
event.preventDefault();
this.save();
} else if (keyCode === KeyCode.ESCAPE) {
event.preventDefault();
Expand Down
Binary file not shown.

0 comments on commit 5116bbd

Please sign in to comment.