Skip to content

Conversation

@juliaroldi
Copy link
Contributor

@juliaroldi juliaroldi commented Dec 2, 2025

Add to new Table Editor features, TableRowSelector and TableColumnSelector to select table rows or columns.
TableSelectorAndResizer

@juliaroldi juliaroldi changed the title WIP Table Row/Column Selector Dec 3, 2025
@juliaroldi juliaroldi marked this pull request as ready for review December 3, 2025 17:24
if (rect) {
const zoomScale = editor.getDOMHelper().calculateZoomScale();
const createElementData = getInsertElementData(rect, isRowSelector);
const div = createElement(createElementData, document) as HTMLDivElement;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do not use global document

const zoomScale = editor.getDOMHelper().calculateZoomScale();
const createElementData = getInsertElementData(rect, isRowSelector);
const div = createElement(createElementData, document) as HTMLDivElement;
div.id = isRowSelector ? ROW_SELECTOR_ID : COLUMN_SELECTOR_ID;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be careful, it is allowed to have multiple instances of editor on the same page. So do not use const id, but combine with editor id. We have a utility function to help do that. ensureUniqueId You may want to create a util in DOMHelper to help do this.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually I didn't see you use this ID to query the DIV anywhere else, so you can remove it

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is used for unit test only, it is not needed to make the feature work.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, you can use a separate function to create this DIV, then mock it in test case so you can get that DIV in test code.

Adding ID here causes it appears in dev code and in production, others may write code to rely on it. And that may not work if there are multiple editor instances in the same page.

Copy link
Collaborator

@JiuqingSong JiuqingSong Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For example, (in a separate file)

export function createHelperDiv() {
   return ...;
}

In this file:

const div = createHelperDiv();

In test code:

const div = document.createElement('div');
spyOn(createHelperDiv, 'createHelperDiv').and.returnValue(div);

isRow: isRowSelector,
};

(anchorContainer || document.body).appendChild(div);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here, do not use global document

Comment on lines 21 to 25
export const ROW_SELECTOR_ID = 'rowSelector';
/**
* @internal
*/
export const COLUMN_SELECTOR_ID = 'columnSelector';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove them if not really used

@BryanValverdeU
Copy link
Contributor

Cool feature, I am noticing a conflict with the insert Rows and Columns, looks like they do not appear now

@juliaroldi
Copy link
Contributor Author

juliaroldi commented Dec 15, 2025

Cool feature, I am noticing a conflict with the insert Rows and Columns, looks like they do not appear now
Thanks, Bryan. I made a fix so the features don't overlay.
TableSelectorAndResizer

@juliaroldi juliaroldi merged commit d11e7cf into master Dec 15, 2025
7 checks passed
@juliaroldi juliaroldi deleted the u/juliaroldi/select-rows-column branch December 15, 2025 18:05
juliaroldi added a commit that referenced this pull request Dec 29, 2025
* support RTL (#3177)

* Update ContextMenuProvider to accept event parameter and adjust related tests (#3175)

* refactor: remove deprecated features and clean up related code in CachePlugin and CopyPastePlugin (#3178)

* Add `test:fast`  for faster unit test runs (#3179)

* refactor: optimize karma configuration for improved performance

* feat: add fast karma configuration and update package.json for debugging

* refactor: streamline karma plugin declaration and update test scripts for clarity

* refactor: update test commands to use fast karma configuration

* Add support for retaining formats when splitting paragraphs on Enter/Delete/Backspace keypress (#3180)

* refactor: optimize karma configuration for improved performance

* feat: add fast karma configuration and update package.json for debugging

* refactor: streamline karma plugin declaration and update test scripts for clarity

* Add support for retaining formats when splitting paragraphs on Enter key press

- Introduced `formatsToKeep` option in `EditOptions` to specify which formats to retain.
- Updated `keyboardEnter`, `handleEnterOnParagraph`, and `splitParagraph` functions to handle the new formats.
- Enhanced tests to verify the correct behavior of format retention during paragraph splits.

* Remove unused import for handleEnterOnParagraph in keyboardEnterTest

* Remove stray backtick from splitParagraph function

* refactor: update test commands to use fast karma configuration

* feat: implement class format handling and preserve formatting on paragraph split

* feat: rename formatsToKeep to formatsToPreserveOnMerge and update related functionality

* test: update spies in keyboardDelete tests and fix format property in preserveParagraphFormat tests

* Support rowSpan equal to 0 (#3181)

* fix: handle zero colSpan and rowSpan in tableProcessor to ensure proper cell creation

* fix: correct colSpan condition in tableProcessor for accurate cell processing

* feat: add spanUntilNextSection support in table cell processing and handling

* refactor: remove spanUntilNextSection from table cell handling and related tests

* refactor: simplify rowSpan handling and improve tableProcessor tests for edge cases

* Remove unneeded changes

* Remove

* fix: update source map configuration for improved debugging accuracy (#3186)

* Support passing event to getContextMenuItems when plugin is a MixedPlugin (#3188)

* feat: enhance context menu handling to support V9 providers with event parameter

* fix: enhance isV9ContextMenuProvider to check for mixed plugins

* refactor: simplify spyOn usage for DarkColorHandler in BridgePlugin tests

* fix: enhance isV9ContextMenuProvider to validate V9 provider signature

* fix: update context menu provider check to use isMixedPluginProvider

* New getContentForCopy API (#3182)

New getContentForCopy API

* feat: add announce options for bold, italic, and underline formatting (#3194)

* feat: add announce options for bold, italic, and underline formatting; update shortcuts and tests

* refactor: update context initialization in toggleBold, toggleItalic, and toggleUnderline tests for type safety

* Address comments from review

* test: add unit tests for bold, italic, and underline shortcuts with announceFormatChange

* Add Find and Replace API and plugin (#3190)

* Add Find and Replace API and plugin

* Fix a comment

* improve

* feat: add announcements for table selection and unselection in the editor (#3195)

* feat: add announce options for bold, italic, and underline formatting; update shortcuts and tests

* refactor: update context initialization in toggleBold, toggleItalic, and toggleUnderline tests for type safety

* feat: add announcements for text selection and unselection in the editor

* refactor: simplify table selection logic by using TableSelection type in getIsSelectingOrUnselecting function

* Update packages/roosterjs-content-model-core/lib/corePlugin/selection/tableSelectionUtils.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Address comments from review

* test: add unit tests for bold, italic, and underline shortcuts with announceFormatChange

* Move functionality to a new plugin

* Fix

* Fix

* Fix comment

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix #396891 (#3199)

* Fix #396891

* improve

* improve

* first colunm (#3202)

* Fix 400434 (#3200)

* Add format when insert table (#3203)

Add the format parameter in the insertTable API, then it will be possible to insert a table with a predefined format. It can be used to add margin bottom to the table, then when a table is inserted under another their border does not overlay.

* Move graduated feature to a separate type (#3205)

* Move graduated feature to a separate type

* improve

* fix build

* Translate lineHeight normal to 120% when pasting from Word Desktop and move parsers to their own file (#3209)

* Translate lineHeight normal to 120% and move parsers to their own file

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix text to bullet issue (#3210)

* Fix text to bullet issue

* fix test

* Refactor paste source validation to use getDocumentSource (#3208)

* Refactor paste source validation to use getDocumentSource

- Updated shouldConvertToSingleImage to utilize htmlFirstLevelChildTags instead of clipboardData.
- Replaced instances of getPasteSource with getDocumentSource across various tests and implementations.
- Introduced getDocumentSource function to centralize document source determination logic.
- Added retrieveDocumentMetadata utility to extract metadata from documents.
- Ensured all related tests are updated to reflect changes in function calls and parameters.

* Refactor paste handling and add tests for negative text indent parser

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix #3171 #3184 (#3211)

* Fix #3171 #3184

* Update packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Use getPromoteLink  to verify if a link can be promoted (#3213)

Add getPromoteLink function to verify if a link can be promoted.

* [fix] Keep format on the selection marker when reconcile Text (#3220)

* [fix] Keep format on the selection marker when reconcile Text

* update ut

* update test

* [Image Edit] Fix 394371 (#3219)

Check if the selectedImage property exists when the content changed event is triggered,

* Update the Entity's format when applying format on the content inside the Entity (#3196)

* Update the Entity's format when applying format on the content inside the Entity

* fix test

* Fix Align Attribute being removed on paste for containers (#3217)

* Add wordContainerParser to handle negative margin-left values and update processPastedContentFromWordDesktop to use it

* asd

* Refactor wordContainerParser to remove unused parameters

* remove

* update

* Support cache for list (#3204)

* Support cache for list

* fix build

* improve

* add tests

* add test

* add test

* Update packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleBlockGroupChildren.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Try generate url data (#3222)

 wrap the draw image function in a try statement, if successful the image will be drawn in the canvas, if not return the data URL of the previous image

* Support Trusted publishing for npmjs (#3227)

* Support Trusted publishing for npmjs

* improve

* improve

* Fix 230556 (#3223)

* Fix 230556

* improve

* fix build and improve

* Fix: make the isSafari env include both iOS and macOS (#3215)

Co-authored-by: Liang Meng <liangmeng@microsoft.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>

* Revert "Fix: make the isSafari env include both iOS and macOS (#3215)" (#3229)

This reverts commit a5b653f.

* Fix table selection logic to handle reversed coordinates and add corresponding tests (#3228)

* Update "isSafari" detection to work across Apple platforms (#3232)

* Update Safari detection logic in createEditorCore

* Update isSafari detection in corresponding tests

* Fix #2841 (#3230)

* Fix #2841

* fix build

* fix build

* fix comment

* Fix 298633 (#3233)

* Fix #3231 (#3234)

* Fix #3231

* fix comment

* fix comments

* Table Row/Column Selector (#3221)

Add to new Table Editor features, TableRowSelector and TableColumnSelector to select table rows or columns.

* Support color transformation in table borders (#3216)

Introduce a new TransformTableBorderColor that enable border color transformation when the editor switch from light to dark mode.

* Fix ordinal superscript for numbers ending in 0 (20th, 30th, etc.) (#3241)

- Changed falsy check to explicit !== null for numericValue
- Fixes issue where 0 was treated as falsy, preventing superscript
- Affects both separate segments (linked numbers) and combined (20th) formats
- Added unit tests for 20th, 30th, and 40th to prevent regression

* Disable using global window and document (#3240)

* Add minWidth cell to insertTable (#3239)

Add a new parameter, customCellFormat, to the insertTable function to allow custom styles for tables.

* Export formatContainerProcessor for public API use (#3238)

Export formatContainerProcessor from roosterjs-content-model-dom public API
to enable users to use it in processorOverride for custom DOM-to-Model processing.
This allows customization of format container elements (e.g., blockquote) processing
without relying on internal module paths.

Co-authored-by: Jiuqing Song <jisong@microsoft.com>

* version 9.45

* bump react version

---------

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Haowen Chen <haowchen@microsoft.com>
Co-authored-by: Liang <jojo.spirit@outlook.com>
Co-authored-by: Liang Meng <liangmeng@microsoft.com>
Co-authored-by: gabesl <73849657+gabesl@users.noreply.github.com>
Co-authored-by: Dennis Chen <dennisc695@icloud.com>
JiuqingSong added a commit that referenced this pull request Jan 7, 2026
* support RTL (#3177)

* Update ContextMenuProvider to accept event parameter and adjust related tests (#3175)

* refactor: remove deprecated features and clean up related code in CachePlugin and CopyPastePlugin (#3178)

* Add `test:fast`  for faster unit test runs (#3179)

* refactor: optimize karma configuration for improved performance

* feat: add fast karma configuration and update package.json for debugging

* refactor: streamline karma plugin declaration and update test scripts for clarity

* refactor: update test commands to use fast karma configuration

* Add support for retaining formats when splitting paragraphs on Enter/Delete/Backspace keypress (#3180)

* refactor: optimize karma configuration for improved performance

* feat: add fast karma configuration and update package.json for debugging

* refactor: streamline karma plugin declaration and update test scripts for clarity

* Add support for retaining formats when splitting paragraphs on Enter key press

- Introduced `formatsToKeep` option in `EditOptions` to specify which formats to retain.
- Updated `keyboardEnter`, `handleEnterOnParagraph`, and `splitParagraph` functions to handle the new formats.
- Enhanced tests to verify the correct behavior of format retention during paragraph splits.

* Remove unused import for handleEnterOnParagraph in keyboardEnterTest

* Remove stray backtick from splitParagraph function

* refactor: update test commands to use fast karma configuration

* feat: implement class format handling and preserve formatting on paragraph split

* feat: rename formatsToKeep to formatsToPreserveOnMerge and update related functionality

* test: update spies in keyboardDelete tests and fix format property in preserveParagraphFormat tests

* Support rowSpan equal to 0 (#3181)

* fix: handle zero colSpan and rowSpan in tableProcessor to ensure proper cell creation

* fix: correct colSpan condition in tableProcessor for accurate cell processing

* feat: add spanUntilNextSection support in table cell processing and handling

* refactor: remove spanUntilNextSection from table cell handling and related tests

* refactor: simplify rowSpan handling and improve tableProcessor tests for edge cases

* Remove unneeded changes

* Remove

* fix: update source map configuration for improved debugging accuracy (#3186)

* Support passing event to getContextMenuItems when plugin is a MixedPlugin (#3188)

* feat: enhance context menu handling to support V9 providers with event parameter

* fix: enhance isV9ContextMenuProvider to check for mixed plugins

* refactor: simplify spyOn usage for DarkColorHandler in BridgePlugin tests

* fix: enhance isV9ContextMenuProvider to validate V9 provider signature

* fix: update context menu provider check to use isMixedPluginProvider

* New getContentForCopy API (#3182)

New getContentForCopy API

* feat: add announce options for bold, italic, and underline formatting (#3194)

* feat: add announce options for bold, italic, and underline formatting; update shortcuts and tests

* refactor: update context initialization in toggleBold, toggleItalic, and toggleUnderline tests for type safety

* Address comments from review

* test: add unit tests for bold, italic, and underline shortcuts with announceFormatChange

* Add Find and Replace API and plugin (#3190)

* Add Find and Replace API and plugin

* Fix a comment

* improve

* feat: add announcements for table selection and unselection in the editor (#3195)

* feat: add announce options for bold, italic, and underline formatting; update shortcuts and tests

* refactor: update context initialization in toggleBold, toggleItalic, and toggleUnderline tests for type safety

* feat: add announcements for text selection and unselection in the editor

* refactor: simplify table selection logic by using TableSelection type in getIsSelectingOrUnselecting function

* Update packages/roosterjs-content-model-core/lib/corePlugin/selection/tableSelectionUtils.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Address comments from review

* test: add unit tests for bold, italic, and underline shortcuts with announceFormatChange

* Move functionality to a new plugin

* Fix

* Fix

* Fix comment

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix #396891 (#3199)

* Fix #396891

* improve

* improve

* first colunm (#3202)

* Fix 400434 (#3200)

* Add format when insert table (#3203)

Add the format parameter in the insertTable API, then it will be possible to insert a table with a predefined format. It can be used to add margin bottom to the table, then when a table is inserted under another their border does not overlay.

* Move graduated feature to a separate type (#3205)

* Move graduated feature to a separate type

* improve

* fix build

* Translate lineHeight normal to 120% when pasting from Word Desktop and move parsers to their own file (#3209)

* Translate lineHeight normal to 120% and move parsers to their own file

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix text to bullet issue (#3210)

* Fix text to bullet issue

* fix test

* Refactor paste source validation to use getDocumentSource (#3208)

* Refactor paste source validation to use getDocumentSource

- Updated shouldConvertToSingleImage to utilize htmlFirstLevelChildTags instead of clipboardData.
- Replaced instances of getPasteSource with getDocumentSource across various tests and implementations.
- Introduced getDocumentSource function to centralize document source determination logic.
- Added retrieveDocumentMetadata utility to extract metadata from documents.
- Ensured all related tests are updated to reflect changes in function calls and parameters.

* Refactor paste handling and add tests for negative text indent parser

* Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Fix #3171 #3184 (#3211)

* Fix #3171 #3184

* Update packages/roosterjs-content-model-plugins/lib/edit/EditPlugin.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Use getPromoteLink  to verify if a link can be promoted (#3213)

Add getPromoteLink function to verify if a link can be promoted.

* [fix] Keep format on the selection marker when reconcile Text (#3220)

* [fix] Keep format on the selection marker when reconcile Text

* update ut

* update test

* [Image Edit] Fix 394371 (#3219)

Check if the selectedImage property exists when the content changed event is triggered,

* Update the Entity's format when applying format on the content inside the Entity (#3196)

* Update the Entity's format when applying format on the content inside the Entity

* fix test

* Fix Align Attribute being removed on paste for containers (#3217)

* Add wordContainerParser to handle negative margin-left values and update processPastedContentFromWordDesktop to use it

* asd

* Refactor wordContainerParser to remove unused parameters

* remove

* update

* Support cache for list (#3204)

* Support cache for list

* fix build

* improve

* add tests

* add test

* add test

* Update packages/roosterjs-content-model-dom/lib/modelToDom/handlers/handleBlockGroupChildren.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Try generate url data (#3222)

 wrap the draw image function in a try statement, if successful the image will be drawn in the canvas, if not return the data URL of the previous image

* Support Trusted publishing for npmjs (#3227)

* Support Trusted publishing for npmjs

* improve

* improve

* Fix 230556 (#3223)

* Fix 230556

* improve

* fix build and improve

* Fix: make the isSafari env include both iOS and macOS (#3215)

Co-authored-by: Liang Meng <liangmeng@microsoft.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>

* Revert "Fix: make the isSafari env include both iOS and macOS (#3215)" (#3229)

This reverts commit a5b653f.

* Fix table selection logic to handle reversed coordinates and add corresponding tests (#3228)

* Update "isSafari" detection to work across Apple platforms (#3232)

* Update Safari detection logic in createEditorCore

* Update isSafari detection in corresponding tests

* Fix #2841 (#3230)

* Fix #2841

* fix build

* fix build

* fix comment

* Fix 298633 (#3233)

* Fix #3231 (#3234)

* Fix #3231

* fix comment

* fix comments

* Table Row/Column Selector (#3221)

Add to new Table Editor features, TableRowSelector and TableColumnSelector to select table rows or columns.

* Support color transformation in table borders (#3216)

Introduce a new TransformTableBorderColor that enable border color transformation when the editor switch from light to dark mode.

* Fix ordinal superscript for numbers ending in 0 (20th, 30th, etc.) (#3241)

- Changed falsy check to explicit !== null for numericValue
- Fixes issue where 0 was treated as falsy, preventing superscript
- Affects both separate segments (linked numbers) and combined (20th) formats
- Added unit tests for 20th, 30th, and 40th to prevent regression

* Disable using global window and document (#3240)

* Add minWidth cell to insertTable (#3239)

Add a new parameter, customCellFormat, to the insertTable function to allow custom styles for tables.

* Export formatContainerProcessor for public API use (#3238)

Export formatContainerProcessor from roosterjs-content-model-dom public API
to enable users to use it in processorOverride for custom DOM-to-Model processing.
This allows customization of format container elements (e.g., blockquote) processing
without relying on internal module paths.

Co-authored-by: Jiuqing Song <jisong@microsoft.com>

* Fix Table Cell alignment for RTL (#3246)

When the cell has the text direction in RTL, invert the table cell alignment direction, so it can match the direction.

* Fix publish issue (#3253)

---------

Co-authored-by: Julia Roldi <87443959+juliaroldi@users.noreply.github.com>
Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Haowen Chen <haowchen@microsoft.com>
Co-authored-by: Liang <jojo.spirit@outlook.com>
Co-authored-by: Liang Meng <liangmeng@microsoft.com>
Co-authored-by: gabesl <73849657+gabesl@users.noreply.github.com>
Co-authored-by: Dennis Chen <dennisc695@icloud.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants