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 db6a621
Show file tree
Hide file tree
Showing 2 changed files with 252 additions and 2 deletions.
6 changes: 4 additions & 2 deletions modules/keyboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,8 +451,10 @@ Keyboard.DEFAULTS = {
},
tab: {
key: 'tab',
handler(range, context) {
if (context.format.table) return true;
handler(range, { format }) {
const isInTable = format.tableCellLine || format.tableHeaderCellLine
|| format.tableHeaderCell || format.table;
if (isInTable) return true;
this.quill.history.cutoff();
const delta = new Delta()
.retain(range.index)
Expand Down
248 changes: 248 additions & 0 deletions test/unit/modules/keyboard.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
import Keyboard, { SHORTKEY, normalize } from '../../../modules/keyboard';
import { Range } from '../../../core/selection';
import Quill from '../../../core/quill';
import TableLite from '../../../modules/table/lite';
import TableMain from '../../../modules/table';

describe('Keyboard', function () {
describe('match', function () {
Expand Down Expand Up @@ -257,4 +261,248 @@ 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 the first cell in the by tab press if cursor is in the last cell of the first row', 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 last cell of the first row by tab+shift if cursor is in the first cell of the second row', 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);
});
afterAll(function () {
Quill.register({ 'modules/table': TableMain }, 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 the first cell in the by tab press if cursor is in the last cell of the first row', 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 last cell of the first row by tab+shift if cursor is in the first cell of the second row', 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 db6a621

Please sign in to comment.