Font color and font background color throw error while having buttons in the main toolbar and the balloon toolbar

[illia-stv]

Suggested merge commit message (convention)

Fix (font): Font color and font background should work in both the main toolbar and the balloon toolbar. Closes #15580.

MINOR BREAKING CHANGE (font): colorSelectorView property will no longer accessible from ColorUI plugin in @ckeditor/ckeditor5-font/src/ui/colorui.ts .

---

Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

[illia-stv]

You could easily reproduce the problem by following next steps:

• in font-color.js in manual test in Font package import BalloonToolbar from @ckeditor/ckeditor5-ui
• add into plugin's array BalloonToolbar
• add into config also balloonToolbar: [ 'bold', 'italic', 'fontColor' ]
• run manual test and change color by contextual balloon and error will be reproduced

[pszczesniak]

Could you create a manual test that covers that case? You can place it in tests/manual/tickets/ISSUE_ID - it will be easier to test for everyone and issue will have reference in manual test.

Other than that - solution looks 👍

[pszczesniak]

👍

[mmotyczynska]

Unfortunately, this is not the correct way to fix this bug.

The staticColorsGrid in our case is undefined for a reason. We need to fix it so that it's not undefined.

What happens (current implementation):
If we add more than one toolbar button with the font color (can be in the same toolbar, no need to create a separate toolbar), then in the colorui only the last reference to colorSelectorView is stored in this line:

ckeditor5/packages/ckeditor5-font/src/ui/colorui.ts

Line 126 in 3bfed6d

this.colorSelectorView = addColorSelectorToDropdown( {

In other words, if we have two font color buttons in a toolbar, then the first colorSelectorView is created and stored in this.colorSelectorView, and then the second one is created and overrides the first one.

In this case, we have two views, but only one has a reference in colorui (which is wrong). This is an old regression introduced in ckeditor/ckeditor5-font#39. I don't think anyone noticed it until now, because it's a very rare use case to have the same button twice.

The solution would be to change the line above back to const colorSelectorView and update the rest of the code accordingly, along with the tests that fail.

[mmotyczynska]

Please correct the test so that it actually verifies the fix.