Skip to content

Commit

Permalink
fix table navigation on tab
Browse files Browse the repository at this point in the history
  • Loading branch information
Shpileva Yuliya committed Jul 19, 2023
1 parent d0c059d commit 8c31939
Show file tree
Hide file tree
Showing 2 changed files with 247 additions and 2 deletions.
5 changes: 3 additions & 2 deletions modules/keyboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,8 +451,9 @@ Keyboard.DEFAULTS = {
},
tab: {
key: 'tab',
handler(range, context) {
if (context.format.table) return true;
handler(range, { format }) {
if (format.tableCellLine || format.tableHeaderCellLine
|| format.tableHeaderCell || format.table) return true;
this.quill.history.cutoff();
const delta = new Delta()
.retain(range.index)
Expand Down
244 changes: 244 additions & 0 deletions test/unit/modules/keyboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import Keyboard, { SHORTKEY, normalize } from '../../../modules/keyboard';
import { Range } from '../../../core/selection';
import Quill from '../../../core/quill';
import TableLite from '../../../modules/table/lite';

describe('Keyboard', function () {
describe('match', function () {
Expand Down Expand Up @@ -257,4 +260,245 @@ describe('Keyboard', function () {
quillMock.root.addEventListener = nativeAddEventListener;
});
});

describe('tab navigation on main table', function () {
const markup = `
<table>
<thead>
<tr>
<th><p>head1</p></th>
<th><p>head2</p></th>
<th><p>head3</p></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>data1</p></td>
<td><p>data2</p></td>
<td><p>data3</p></td>
</tr>
<tr>
<td><p>data1</p></td>
<td><p>data2</p></td>
<td><p>data3</p></td>
</tr>
</tbody>
</table>
`;

it('should select next cell on tab click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(18);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(24));
});

it('should select next cell in second row if cursor in the last cell of first row on tab click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(30);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(36));
});

it('should select previous cell on tab + shift click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(31);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
shiftKey: true,
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(29));
});

it('should select previous cell on first row if cursor in the first cell of second row on tab + shift click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(38);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
shiftKey: true,
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(35));
});

it('should select next cell in header on tab click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(0);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(6));
});

it('should select previous cell in header on tab + shift click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(8);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
shiftKey: true,
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(5));
});
});

describe('tab navigation on lite table', function () {
beforeAll(function () {
Quill.register({ 'modules/table': TableLite }, true);
});
const markup = `
<table>
<thead>
<tr>
<th><p>head1</p></th>
<th><p>head2</p></th>
<th><p>head3</p></th>
</tr>
</thead>
<tbody>
<tr>
<td><p>data1</p></td>
<td><p>data2</p></td>
<td><p>data3</p></td>
</tr>
<tr>
<td><p>data1</p></td>
<td><p>data2</p></td>
<td><p>data3</p></td>
</tr>
</tbody>
</table>
`;

it('should select next cell on tab click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(18);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(24));
});

it('should select next cell in second row if cursor in the last cell of first row on tab click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(30);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(36));
});

it('should select previous cell on tab + shift click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(31);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
shiftKey: true,
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(29));
});

it('should select previous cell on first row if cursor in the first cell of second row on tab + shift click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(38);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
shiftKey: true,
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(35));
});

it('should select next cell in header on tab click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(0);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(6));
});

it('should select previous cell in header on tab + shift click', function () {
const quill = this.initialize(Quill, markup, this.container, {
modules: {
table: true,
},
});
quill.setSelection(8);
const keydownEvent = new KeyboardEvent('keydown', {
key: 'tab',
shiftKey: true,
});

quill.root.dispatchEvent(keydownEvent);
expect(quill.getSelection()).toEqual(new Range(5));
});
});
});

0 comments on commit 8c31939

Please sign in to comment.