Skip to content

Commit

Permalink
Pressing Tab inside a table should select all node contents of the ne…
Browse files Browse the repository at this point in the history 
…xt cell (#2764)

* normalise position

* revert

* empty cell check

* select using children

* fix tests

* fix
  • Loading branch information
@Andres-CT98
Andres-CT98 authored Sep 5, 2024
1 parent a419832 commit 865fdc7
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 12 deletions.
12 changes: 10 additions & 2 deletions packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -559,8 +559,16 @@ class SelectionPlugin implements PluginWithState<SelectionPluginState> {
selectAll?: boolean
) {
const range = editor.getDocument().createRange();
if (selectAll) {
range.selectNodeContents(cell);
if (selectAll && cell.firstChild && cell.lastChild) {
const cellStart = cell.firstChild;
const cellEnd = cell.lastChild;
// Get first deepest editable position in the cell
const posStart = normalizePos(cellStart, 0);
// Get last deepest editable position in the cell
const posEnd = normalizePos(cellEnd, cellEnd.childNodes.length);

range.setStart(posStart.node, posStart.offset);
range.setEnd(posEnd.node, posEnd.offset);
} else {
// Get deepest editable position in the cell
const { node, offset } = normalizePos(cell, nodeOffset);
Expand Down
46 changes: 36 additions & 10 deletions packages/roosterjs-content-model-core/test/corePlugin/selection/SelectionPluginTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1272,6 +1272,10 @@ describe('SelectionPlugin handle table selection', () => {
let td4: HTMLTableCellElement;
let tr1: HTMLElement;
let tr2: HTMLElement;
let td1_text: Node;
let td2_text: Node;
let td3_text: Node;
let td4_text: Node;
let table: HTMLTableElement;
let div: HTMLElement;

Expand All @@ -1291,6 +1295,18 @@ describe('SelectionPlugin handle table selection', () => {
td3.id = 'td3';
td4.id = 'td4';

// Craete text nodes
td1_text = document.createTextNode('1');
td2_text = document.createTextNode('2');
td3_text = document.createTextNode('3');
td4_text = document.createTextNode('4');

// Add Text to each cell
td1.appendChild(td1_text);
td2.appendChild(td2_text);
td3.appendChild(td3_text);
td4.appendChild(td4_text);

tr1.appendChild(td1);
tr1.appendChild(td2);
tr2.appendChild(td3);
Expand Down Expand Up @@ -1403,11 +1419,13 @@ describe('SelectionPlugin handle table selection', () => {
};
});

const selectNodeContentsSpy = jasmine.createSpy('selectNodeContents');
const setStartSpy = jasmine.createSpy('setStart');
const setEndSpy = jasmine.createSpy('setEnd');
const collapseSpy = jasmine.createSpy('collapse');
const preventDefaultSpy = jasmine.createSpy('preventDefault');
const mockedRange = {
selectNodeContents: selectNodeContentsSpy,
setStart: setStartSpy,
setEnd: setEndSpy,
collapse: collapseSpy,
} as any;

Expand Down Expand Up @@ -1436,7 +1454,8 @@ describe('SelectionPlugin handle table selection', () => {
range: mockedRange,
isReverted: false,
});
expect(selectNodeContentsSpy).toHaveBeenCalledWith(td2);
expect(setStartSpy).toHaveBeenCalledWith(td2_text, 0);
expect(setEndSpy).toHaveBeenCalledWith(td2_text, 0);
expect(collapseSpy).not.toHaveBeenCalled();
expect(announceSpy).not.toHaveBeenCalled();
expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -1474,11 +1493,13 @@ describe('SelectionPlugin handle table selection', () => {
};
});

const selectNodeContentsSpy = jasmine.createSpy('selectNodeContents');
const setStartSpy = jasmine.createSpy('setStart');
const setEndSpy = jasmine.createSpy('setEnd');
const collapseSpy = jasmine.createSpy('collapse');
const preventDefaultSpy = jasmine.createSpy('preventDefault');
const mockedRange = {
selectNodeContents: selectNodeContentsSpy,
setStart: setStartSpy,
setEnd: setEndSpy,
collapse: collapseSpy,
} as any;

Expand Down Expand Up @@ -1508,7 +1529,8 @@ describe('SelectionPlugin handle table selection', () => {
range: mockedRange,
isReverted: false,
});
expect(selectNodeContentsSpy).toHaveBeenCalledWith(td1);
expect(setStartSpy).toHaveBeenCalledWith(td1_text, 0);
expect(setEndSpy).toHaveBeenCalledWith(td1_text, 0);
expect(collapseSpy).not.toHaveBeenCalled();
expect(announceSpy).not.toHaveBeenCalled();
expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -1546,11 +1568,13 @@ describe('SelectionPlugin handle table selection', () => {
};
});

const selectNodeContentsSpy = jasmine.createSpy('selectNodeContents');
const setStartSpy = jasmine.createSpy('setStart');
const setEndSpy = jasmine.createSpy('setEnd');
const collapseSpy = jasmine.createSpy('collapse');
const preventDefaultSpy = jasmine.createSpy('preventDefault');
const mockedRange = {
selectNodeContents: selectNodeContentsSpy,
setStart: setStartSpy,
setEnd: setEndSpy,
collapse: collapseSpy,
} as any;

Expand Down Expand Up @@ -1579,7 +1603,8 @@ describe('SelectionPlugin handle table selection', () => {
range: mockedRange,
isReverted: false,
});
expect(selectNodeContentsSpy).toHaveBeenCalledWith(td3);
expect(setStartSpy).toHaveBeenCalledWith(td3_text, 0);
expect(setEndSpy).toHaveBeenCalledWith(td3_text, 0);
expect(collapseSpy).not.toHaveBeenCalled();
expect(announceSpy).not.toHaveBeenCalled();
expect(preventDefaultSpy).toHaveBeenCalledTimes(1);
Expand All @@ -1592,6 +1617,7 @@ describe('SelectionPlugin handle table selection', () => {
getDOMSelectionSpy.and.callFake(() => {
time++;

td1.appendChild(document.createTextNode('1'));
return time == 1
? {
type: 'range',
Expand Down Expand Up @@ -1790,7 +1816,7 @@ describe('SelectionPlugin handle table selection', () => {
range: mockedRange,
isReverted: false,
});
expect(setStartSpy).toHaveBeenCalledWith(td4, 0);
expect(setStartSpy).toHaveBeenCalledWith(td4_text, 0);
expect(announceSpy).toHaveBeenCalledWith({
defaultStrings: 'announceOnFocusLastCell',
});
Expand Down

0 comments on commit 865fdc7

Please sign in to comment.