Implement movement with Tab key inside Table #2529

Andres-CT98 · 2024-03-26T19:32:08Z

Description:

It is standard for accessibility and usability usage, to have the possibility to navigate a table using the tab key. The direction of the navigation can be inverted using the Shift key.

Fix

Implement as a part of SelectionPlugin navigation with Tab key inside Tables. If the key is pressed within the table, the selection marker will be positioned at the start of the next cell. In case there is no further cell to navigate to, the selection marker will be positioned before or after the whole table.

The selectBeforeImage method was changed to selectBeforeOrAfterElement to accommodate both images and tables, and both before and after positioning.

Warnings and implications

This changes should not overwrite any Tab behaviour on EditPlugin.

JiuqingSong · 2024-03-26T21:08:52Z

I tried with your change but when I press TAB, instead of jumping to next cell, it will indent the paragraph

Andres-CT98 · 2024-03-27T02:06:57Z

I tried with your change but when I press TAB, instead of jumping to next cell, it will indent the paragraph

Did you disable the Editplugin? Currently that plugin will override the Tab change.

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

JiuqingSong · 2024-03-27T17:40:08Z

I tried with your change but when I press TAB, instead of jumping to next cell, it will indent the paragraph

Did you disable the Editplugin? Currently that plugin will override the Tab change.

I see. In that case, We also need to make the change also work with EditPlugin since we can't disable it in production.

You can try to add a willHandleEventExclusively method in SelectionPlugin and if we know it is a TAB key under table (but not under list inside table), return true, then EditPlugin won't receive this event.

juliaroldi · 2024-03-27T20:18:19Z

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

                        );
                    }
+                } else if (key == 'TabLeft' || key == 'TabRight') {
+                    const revrse = key == 'TabLeft';


nit: just small typo

If RTL is enabled, should the behavior be same or should we invert the keys?

Good question, It works the same both ways. In an HTML Table, the order of the cells is the same in RTL and LTR. This tab change works on a 2D representation of the HTML table where the cursor is.

…u/acampostams/table-tab-movement

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts

…u/acampostams/table-tab-movement

* code suport * markdown * adjust * demo site * WIP * fix code pen * fix demo site * Handle Tab key on whole table selection or last cell on Edit Plugin (#2536) * Implement indent whole table * implement tab on last cell new row * add Table selection and single cell handling * export clearSelectedCells * undefined check, simplify * add tests * add test for list in table edge case * Fix seelection on void element (#2551) * port hyphen * Implement movement with Tab key inside Table (#2529) * implement tab movement, tests * remove unused variable * fix name, normalisation, add test * fix wrong parethesis * restore normalizePos * fix tests * add formatTextSegmentBeforeSelectionMarker * Improve backspace on list (#2555) * fix selection with ctrl+a * refactor code using formatTextSegmentBeforeSelectionMarkerTest * remove getLinkSegment * Set default format in demo site (#2559) * clean demo site * clean * Enable selecting image when the only element in the range is an Image (#2554) * init * Address comment * Reuse isReverted from Range Selection * Fix build * Fix build * Unselect image when Up or Down, or it remains selected * remove unneeded changes and improve name of tests * Update --------- Co-authored-by: Julia Roldi <[email protected]> * fix markdown plugin * Port Hyperlink plugin (#2560) * Port Hyperlink plugin * improve --------- Co-authored-by: Bryan Valverde U <[email protected]> * export formatTextSegmentBeforeSelectionMarker * fix build * Prevent ScrollTop to be lost when the focus is done to the editor (#2564) * init * init --------- Co-authored-by: Julia Roldi <[email protected]> * Fix 265959: extra empty line generated when get plain text (#2566) Co-authored-by: Bryan Valverde U <[email protected]> * Fix #2500 Hyperlink misses color (#2570) * Fix #2500 * fix test * Update version.json * mac shortcuts * fix test --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: Jiuqing Song <[email protected]>

* code suport * markdown * adjust * demo site * WIP * fix code pen * fix demo site * Handle Tab key on whole table selection or last cell on Edit Plugin (#2536) * Implement indent whole table * implement tab on last cell new row * add Table selection and single cell handling * export clearSelectedCells * undefined check, simplify * add tests * add test for list in table edge case * Fix seelection on void element (#2551) * port hyphen * Implement movement with Tab key inside Table (#2529) * implement tab movement, tests * remove unused variable * fix name, normalisation, add test * fix wrong parethesis * restore normalizePos * fix tests * add formatTextSegmentBeforeSelectionMarker * Improve backspace on list (#2555) * fix selection with ctrl+a * refactor code using formatTextSegmentBeforeSelectionMarkerTest * remove getLinkSegment * Set default format in demo site (#2559) * clean demo site * clean * Enable selecting image when the only element in the range is an Image (#2554) * init * Address comment * Reuse isReverted from Range Selection * Fix build * Fix build * Unselect image when Up or Down, or it remains selected * remove unneeded changes and improve name of tests * Update --------- Co-authored-by: Julia Roldi <[email protected]> * fix markdown plugin * Port Hyperlink plugin (#2560) * Port Hyperlink plugin * improve --------- Co-authored-by: Bryan Valverde U <[email protected]> * export formatTextSegmentBeforeSelectionMarker * fix build * Prevent ScrollTop to be lost when the focus is done to the editor (#2564) * init * init --------- Co-authored-by: Julia Roldi <[email protected]> * Fix 265959: extra empty line generated when get plain text (#2566) Co-authored-by: Bryan Valverde U <[email protected]> * Fix #2500 Hyperlink misses color (#2570) * Fix #2500 * fix test * mac shortcuts * fix test * restore selection (#2577) * fix: on webkit-based applications, when the selection is empty, focus will cause the window to scroll to the top (#2571) Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> * Port PickerPlugin (#2569) * Port PickerPlugin * fix buid * Improve * fix build * Improve * Improve * add test * Improve * adjust image * fix test * fixes * remove * Preserve reverted selection info in Content Model (#2580) * Preserve reverted selection info in Content Model * improve * fix empty text * trigger Events * Allow Shift+Delete to Cut (#2585) * Allow Shift+Delete to Cut * improve * change source * fix build * Fix #2584: Safari context menu event causes selection to be expanded (#2588) * Fix #2584: Safari context menu event causes selection to be expanded * fix test * Port AnnouncePlugin step 1: refactor list number code (#2589) * test * refactor * fix demo site * Select image after inserting it (#2593) * Focus image after insertion * Revert "Focus image after insertion" This reverts commit 887c9e5. * Use setSelection * Port AnnouncePlugin Step 2: Add announce core API (#2591) * Port AnnouncePlugin step 1: refactor list number code * Port AnnouncePlugin step 2 --------- Co-authored-by: Bryan Valverde U <[email protected]> * WIP * custom replace * Fix table mover selector (#2596) * fix edge case tables and trigger contentchanged * revert event * trigger autolink * wip * Port AnnouncePlugin step 3: Add announce features for list and table (#2592) * Port AnnouncePlugin step 1: refactor list number code * Port AnnouncePlugin step 2 * Port AnnouncePlugin ste 3 * add test * Fix #2575 Entity delimiter cursor moving (#2581) * Preserve reverted selection info in Content Model * Entity delimiter cursor moving (#2575) * improve * Add test * add test * update main version * Fix difference with master * Allow customizability for table editors (#2603) * init * Simplify type callback * Also allow using Ctrl-Shift-Z on Windows (#2607) * Also allow using Ctrl-Shift-Z on Windows * Fix failing test * Fix broken test * Fix failing test * Keep and deprecate old ShortcutRedoMacOS * Remove test not needed anymore * Fix test * Try fix setFormatTest * Fix merge issues --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Andres-CT98 <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Rain-Zheng <[email protected]> Co-authored-by: 庄黛淳华 <[email protected]> Co-authored-by: florian-msft <[email protected]>

* code suport * markdown * adjust * demo site * WIP * fix code pen * fix demo site * Handle Tab key on whole table selection or last cell on Edit Plugin (#2536) * Implement indent whole table * implement tab on last cell new row * add Table selection and single cell handling * export clearSelectedCells * undefined check, simplify * add tests * add test for list in table edge case * Fix seelection on void element (#2551) * port hyphen * Implement movement with Tab key inside Table (#2529) * implement tab movement, tests * remove unused variable * fix name, normalisation, add test * fix wrong parethesis * restore normalizePos * fix tests * add formatTextSegmentBeforeSelectionMarker * Improve backspace on list (#2555) * fix selection with ctrl+a * refactor code using formatTextSegmentBeforeSelectionMarkerTest * remove getLinkSegment * Set default format in demo site (#2559) * clean demo site * clean * Enable selecting image when the only element in the range is an Image (#2554) * init * Address comment * Reuse isReverted from Range Selection * Fix build * Fix build * Unselect image when Up or Down, or it remains selected * remove unneeded changes and improve name of tests * Update --------- Co-authored-by: Julia Roldi <[email protected]> * fix markdown plugin * Port Hyperlink plugin (#2560) * Port Hyperlink plugin * improve --------- Co-authored-by: Bryan Valverde U <[email protected]> * export formatTextSegmentBeforeSelectionMarker * fix build * Prevent ScrollTop to be lost when the focus is done to the editor (#2564) * init * init --------- Co-authored-by: Julia Roldi <[email protected]> * Fix 265959: extra empty line generated when get plain text (#2566) Co-authored-by: Bryan Valverde U <[email protected]> * Fix #2500 Hyperlink misses color (#2570) * Fix #2500 * fix test * mac shortcuts * fix test * restore selection (#2577) * fix: on webkit-based applications, when the selection is empty, focus will cause the window to scroll to the top (#2571) Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> * Port PickerPlugin (#2569) * Port PickerPlugin * fix buid * Improve * fix build * Improve * Improve * add test * Improve * adjust image * fix test * fixes * remove * Preserve reverted selection info in Content Model (#2580) * Preserve reverted selection info in Content Model * improve * fix empty text * trigger Events * Allow Shift+Delete to Cut (#2585) * Allow Shift+Delete to Cut * improve * change source * fix build * Fix #2584: Safari context menu event causes selection to be expanded (#2588) * Fix #2584: Safari context menu event causes selection to be expanded * fix test * Port AnnouncePlugin step 1: refactor list number code (#2589) * test * refactor * fix demo site * Select image after inserting it (#2593) * Focus image after insertion * Revert "Focus image after insertion" This reverts commit 887c9e5. * Use setSelection * Port AnnouncePlugin Step 2: Add announce core API (#2591) * Port AnnouncePlugin step 1: refactor list number code * Port AnnouncePlugin step 2 --------- Co-authored-by: Bryan Valverde U <[email protected]> * WIP * custom replace * Fix table mover selector (#2596) * fix edge case tables and trigger contentchanged * revert event * trigger autolink * wip * Port AnnouncePlugin step 3: Add announce features for list and table (#2592) * Port AnnouncePlugin step 1: refactor list number code * Port AnnouncePlugin step 2 * Port AnnouncePlugin ste 3 * add test * Fix #2575 Entity delimiter cursor moving (#2581) * Preserve reverted selection info in Content Model * Entity delimiter cursor moving (#2575) * improve * Add test * add test * Allow customizability for table editors (#2603) * init * Simplify type callback * Also allow using Ctrl-Shift-Z on Windows (#2607) * Also allow using Ctrl-Shift-Z on Windows * Fix failing test * Fix broken test * Fix failing test * Keep and deprecate old ShortcutRedoMacOS * Remove test not needed anymore * Wip * add span * fix test * changes * remove code * fixes * fixes * Hide watermark when input with IME (#2611) * Updated watermark property access modifier to protected (#2614) * Move Content Model type files into contentModel folder (#2602) * Fix 262779 (#2600) * Add undo snapshot when mouse down if there is new content after last undo snapshot (#2604) * Fix #2601 allow customization when convert from content model to plain text (#2605) * Fix #2601 allow customization when convert from content model to plain text * Improve * fix test * fix build * Scroll caret into view when call formatContentModel (#2617) * Perf step 0: Do not allow getting connected model (#2615) * Perf: Do not allow getting connected model * fix build * fix build * debug firefox options (#2620) * Updated isModelEmptyFast to consider changed indentation as not empty string (#2625) * Updated isModelEmptyFast * Tests fix * Add parameter to Disable table edit features (#2624) * disableFeatures, renaming * Export Table Feature Ids * Modify and create tests * move Id to respective feature, add tests, cleanup * export feature names * TableEditFeatureName * Implement Table Movement (#2599) * isNodeEditor * domHelper test * implementation and test fix * fix undefined * isNodeEditor * implement live focus, restore initial selection on cancel * broswer drag and drop attempt * use getNodePositionFromEvent, add move cursor while dragging * restore class * fix import * restore DOMHelper * remove unneeded snapshots and checks, add copy feature * cleanup * fix merge * cursor change on copy, remove onEditorCreated * fix disposal issue * removed unused forEach, * export formatInsertPointWithContentModel * use formatInsertPointWithContentModel for table movement * reorder function * Add tests for table movement * optimisations and exports for testing * restore final table selection after move * added test * fix and add more tests * comments, remove copy feature, fix tests * fix test * fix test * implement disable movement * Do not apply Table selection if table is not editable (#2628) * Fix #2633 `scrollCaretIntoView` causes unexpected scroll (#2634) * Fix #2633 * add comment * Added tableCellSelectionBackgroundColor option (#2640) * Added tableCellSelectionBackgroundColor option * Fixed a test * Tests fix * Tests fix * Add dark color handling for table and image selection (#2647) * Added tableCellSelectionBackgroundColor option * Fixed a test * Tests fix * Tests fix * Add dark color check * Add more tests * Updated login and tests * Functionality update * Update checks * Added transparent options test * Code review fixes * Fix cursor jump issue when applying Gboard suggestions (#2638) * fix cursor issue * resolve comment --------- Co-authored-by: Jiuqing Song <[email protected]> * Content Model Cache improvement - Step 1: Introduce Readonly types and mutate utility (#2629) * Readonly types (3rd try * Improve * fix build * Improve * improve * Improve * Add shallow mutable type * improve * Improve * improve * improve * add test * improve * improve * improve * test * test * link preview * remove auto format plugin code * Content Model Cache improvement - Step 2: Prepare utility functions (#2641) * Readonly types (3rd try * Improve * fix build * Improve * improve * Improve * Add shallow mutable type * improve * Improve * improve * improve * add test * Readonly types step 2 * add test * Improve * improve * improve * improve * Improve * fix test * improve * Content Model Cache improvement - Step 3: Let creators accept readonly types (#2642) * Readonly types (3rd try * Improve * fix build * Improve * improve * Improve * Add shallow mutable type * improve * Improve * improve * improve * add test * Readonly types step 3 * improve * improve * improve * Content Model Cache improvement - Step 4: Port "readonly" functions (#2643) * Readonly types (3rd try * Improve * fix build * Improve * improve * Improve * Add shallow mutable type * improve * Improve * improve * improve * add test * Readonly types step 2 * Readonly types step 3 * Readonly type step 4 * add test * Improve * improve * improve * improve * improve * Improve * improve * fix test * improve * Fix Table first column (#2652) * create Table Options button for demo * fix setFirstColumnFormat * fix dependency * restore background color check for first column * remove logs, move TableOptionsMenuItemStringKey, isHeader * remove import * Content Model Cache improvement - Step 5: Port roosterjs-content-model-dom package (#2648) * Readonly types (3rd try * Improve * fix build * Improve * improve * Improve * Add shallow mutable type * improve * Improve * improve * improve * add test * Readonly types step 2 * Readonly types step 3 * Readonly type step 4 * add test * Improve * improve * improve * Readonly types step 5: dom package * add change * improve * improve * Improve * improve * fix test * Improve * fix build * improve * Optimise content model table fetching for Table Edit Plugins (#2656) * optimise cmTable fetching * create getCMTableFromTable * Fix normalisation and First Column issues (#2657) * optimise cmTable fetching * First Column not apply to very first cell * fix normalisation * fix first cell color for First Column * fix and add test * fix test * fix tests * fix test and hasHeaderRow case * reorder rows * bump * bump --------- Co-authored-by: Júlia Roldi <[email protected]> Co-authored-by: Julia Roldi <[email protected]> Co-authored-by: Jiuqing Song <[email protected]> Co-authored-by: Bryan Valverde U <[email protected]> Co-authored-by: Rain-Zheng <[email protected]> Co-authored-by: 庄黛淳华 <[email protected]> Co-authored-by: florian-msft <[email protected]> Co-authored-by: vhuseinova-msft <[email protected]>

Andres-CT98 added 2 commits March 26, 2024 13:18

implement tab movement, tests

89a0415

remove unused variable

588c064

Andres-CT98 marked this pull request as ready for review March 26, 2024 19:37

juliaroldi reviewed Mar 27, 2024

View reviewed changes

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts Show resolved Hide resolved

juliaroldi reviewed Mar 27, 2024

View reviewed changes

Andres-CT98 added 3 commits April 1, 2024 13:53

fix name, normalisation, add test

25e6cc5

Merge branch 'master' of https://github.com/microsoft/roosterjs into …

caaf1a9

…u/acampostams/table-tab-movement

Merge branch 'master' of https://github.com/microsoft/roosterjs into …

0be9655

…u/acampostams/table-tab-movement

JiuqingSong reviewed Apr 2, 2024

View reviewed changes

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts Show resolved Hide resolved

packages/roosterjs-content-model-core/lib/corePlugin/selection/SelectionPlugin.ts Outdated Show resolved Hide resolved

Andres-CT98 added 4 commits April 2, 2024 11:05

fix wrong parethesis

f8f7a08

Merge branch 'master' of https://github.com/microsoft/roosterjs into …

3617e3a

…u/acampostams/table-tab-movement

restore normalizePos

97d6519

Merge branch 'master' of https://github.com/microsoft/roosterjs into …

371ebd4

…u/acampostams/table-tab-movement

JiuqingSong approved these changes Apr 2, 2024

View reviewed changes

Andres-CT98 merged commit 182ed16 into master Apr 2, 2024
7 checks passed

Andres-CT98 deleted the u/acampostams/table-tab-movement branch April 2, 2024 23:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement movement with Tab key inside Table #2529

Implement movement with Tab key inside Table #2529

Andres-CT98 commented Mar 26, 2024

JiuqingSong commented Mar 26, 2024

Andres-CT98 commented Mar 27, 2024

JiuqingSong commented Mar 27, 2024

juliaroldi Mar 27, 2024

juliaroldi Mar 27, 2024

Andres-CT98 Mar 27, 2024 •

edited

Loading

Implement movement with Tab key inside Table #2529

Implement movement with Tab key inside Table #2529

Conversation

Andres-CT98 commented Mar 26, 2024

Description:

Fix

Warnings and implications

JiuqingSong commented Mar 26, 2024

Andres-CT98 commented Mar 27, 2024

JiuqingSong commented Mar 27, 2024

juliaroldi Mar 27, 2024

Choose a reason for hiding this comment

juliaroldi Mar 27, 2024

Choose a reason for hiding this comment

Andres-CT98 Mar 27, 2024 • edited Loading

Choose a reason for hiding this comment

Andres-CT98 Mar 27, 2024 •

edited

Loading