Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Table first column #2652

Merged
merged 11 commits into from
May 23, 2024
Merged

Fix Table first column #2652

merged 11 commits into from
May 23, 2024

Conversation

Andres-CT98
Copy link
Contributor

@Andres-CT98 Andres-CT98 commented May 21, 2024 •
edited
Loading

Description:

Applying table borders on the first column of a table where the property of 'hasFirstColumn' is set should not apply borders in some places. The First Column style should always be imposed over any border changes. Making changes to the text alignment should also not add borders.

Fix

  • Remove the check for background color override as a requirement to apply First column style and rework how borders are applied. The color is now applied on the main formatCells function.
  • setFirstColumnFormat was renamed to setFirstColumnFormatBorders and exported to use after applyTableBorderFormat. This way, First column style will be enforced even after any border changes.
  • Optimisations were made to setFirstColumnFormatBorders and setHeaderRowFormat to remove redundant checking. The functions now exit if their respective property is unset or false.
  • Remove the Table Header button from demo
  • Add a new Options button to modify the table properties: Header Row, First Column, Banded Columns, and Banded Rows

Cases tested:

  1. Insert a table
  2. Set Shading to whole table
  3. Toggle First Column
    4a. Change alignment of the second cell of the first column
    4b. Apply inner borders to first column

Before: Observe as the inner borders appear, contradicting the First Column style

After: No inner borders appear

@Andres-CT98 Andres-CT98 changed the title create Table Options button for demo Fix Table first column May 21, 2024
@Andres-CT98 Andres-CT98 marked this pull request as ready for review May 21, 2024 17:38
JiuqingSong
JiuqingSong reviewed May 23, 2024
View reviewed changes
packages/roosterjs-content-model-api/lib/publicApi/table/applyTableBorderFormat.ts Outdated Show resolved Hide resolved
packages/roosterjs-content-model-api/test/publicApi/table/applyTableBorderFormatTest.ts Show resolved Hide resolved
packages/roosterjs-content-model-api/test/publicApi/table/applyTableBorderFormatTest.ts Outdated Show resolved Hide resolved
packages/roosterjs-content-model-api/test/publicApi/table/applyTableBorderFormatTest.ts Outdated Show resolved Hide resolved
packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts
) {
// Exit early hasFirstColumn is not set
if (!format.hasFirstColumn) {
return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

Question, what if the table had first column before, then we want to use this function to remove the first column? If it just return here, will its border style remains no change?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The function is only intended to set the style, not remove it. The borders will go back to normal after any call to applyTableFormat. There is however an issue with isHeader, so that if 'First Column' is set, then unset, the cells will remain as headers. So I think change should be made in formatCells to make isHeader false for every cell, and then reapply it if hasFirstColumn or hasHeaderRow is true.

Copy link
Collaborator

Choose a reason for hiding this comment

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

Yes, that is my concern. I tried with your change, and after remove header or first column, the text remains in bold and in center. This does not happen before the change.

I don't know if that is an expected behavior, maybe confirm with Jorge.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The issue is fixed on latest build.

packages/roosterjs-content-model-dom/lib/modelApi/editing/applyTableFormat.ts Show resolved Hide resolved
packages/roosterjs-react/lib/contextMenu/types/ContextMenuItemStringKeys.ts Outdated Show resolved Hide resolved
@Andres-CT98 Andres-CT98 merged commit 2aa32f4 into master May 23, 2024
7 checks passed
@Andres-CT98 Andres-CT98 deleted the u/acampostams/fix-table-first-column branch May 23, 2024 20:03
Andres-CT98 added a commit that referenced this pull request May 24, 2024
@Andres-CT98 @juliaroldi
@JiuqingSong @BryanValverdeU @Rain-Zheng @miku1958 @florian-msft @vhuseinova-msft
Bump version 9.3.1 -> 9.4 (#2658)
10c1d9d 
* 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 <87443959+juliaroldi@users.noreply.github.com>

* fix markdown plugin

* Port Hyperlink plugin (#2560)

* Port Hyperlink plugin

* improve

---------

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

* 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 <87443959+juliaroldi@users.noreply.github.com>

* Fix 265959: extra empty line generated when get plain text (#2566)

Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>

* 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 <87443959+juliaroldi@users.noreply.github.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>

* 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 <bvalverde@microsoft.com>

* 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 <jisong@microsoft.com>

* 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 <juliaroldi@microsoft.com>
Co-authored-by: Julia Roldi <87443959+juliaroldi@users.noreply.github.com>
Co-authored-by: Jiuqing Song <jisong@microsoft.com>
Co-authored-by: Bryan Valverde U <bvalverde@microsoft.com>
Co-authored-by: Rain-Zheng <67583056+Rain-Zheng@users.noreply.github.com>
Co-authored-by: 庄黛淳华 <miku1958@users.noreply.github.com>
Co-authored-by: florian-msft <87671048+florian-msft@users.noreply.github.com>
Co-authored-by: vhuseinova-msft <98852890+vhuseinova-msft@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JiuqingSong JiuqingSong JiuqingSong approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Andres-CT98 @JiuqingSong