Desktop: Resolves #11663: Improve Rich Text Editor toolbar structure

[j-scheitler1]

Desktop: Resolves #11663: Improved TinyMCE Toolbar Structure (Rich Text) v3

This pull request refactors the TinyMCE toolbar configuration in Joplin’s desktop application to improve button accessibility and appearance when users resize the notes window.

Key Changes:

Decoupled formattingExtras buttons: Removed unnecessary grouping to prevent duplicate dropdowns.
Modified TinyMCE toolbar structure: Placed buttons individually in the toolbar for better visibility.
Applied CSS adjustments: Fixed height inconsistencies for the forecolor button to keep uniform height.

Before

After

[j-scheitler1]

I have read the CLA Document and I hereby sign the CLA

[personalizedrefrigerator]

Thank you for working on this!

There's a failing integration test:

 ➤ YN0000: [@joplin/app-desktop]: 
➤ YN0000: [@joplin/app-desktop]:     TimeoutError: locator.click: Timeout 30000ms exceeded.
➤ YN0000: [@joplin/app-desktop]:     Call log:
➤ YN0000: [@joplin/app-desktop]:       - waiting for locator('.rli-editor').getByRole('button', { name: 'Code Block' })
➤ YN0000: [@joplin/app-desktop]: 
➤ YN0000: [@joplin/app-desktop]: 
➤ YN0000: [@joplin/app-desktop]:       172 | 		await editor.richTextEditor.click();
➤ YN0000: [@joplin/app-desktop]:       173 |
➤ YN0000: [@joplin/app-desktop]:     > 174 | 		await editor.toggleCodeBlockButton.click();
➤ YN0000: [@joplin/app-desktop]:           | 		                                   ^
➤ YN0000: [@joplin/app-desktop]:       175 | 		const codeEditor = editor.richTextCodeEditor;
➤ YN0000: [@joplin/app-desktop]:       176 | 		await codeEditor.waitFor();
➤ YN0000: [@joplin/app-desktop]:       177 |
➤ YN0000: [@joplin/app-desktop]: 
➤ YN0000: [@joplin/app-desktop]:         at /home/runner/work/joplin/joplin/packages/app-desktop/integration-tests/richTextEditor.spec.ts:174:38
➤ YN0000: [@joplin/app-desktop]: 
➤ YN0000: [@joplin/app-desktop]:     attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
➤ YN0000: [@joplin/app-desktop]:     test-results/richTextEditor-richTextEdi-2d9a7--disable-it-in-code-dialogs-retry1/trace.zip
➤ YN0000: [@joplin/app-desktop]:     Usage:
➤ YN0000: [@joplin/app-desktop]: 
➤ YN0000: [@joplin/app-desktop]:         yarn playwright show-trace test-results/richTextEditor-richTextEdi-2d9a7--disable-it-in-code-dialogs-retry1/trace.zip
➤ YN0000: [@joplin/app-desktop]: 

This particular test can be run locally with yarn test-ui richTextEditor -g "code dialogs" from packages/app-desktop. The -g includes a substring of the test name to run and the richTextEditor is the name of the test suite.

I suspect that this is because the "code block" button has been moved to the overflow menu. If so, increasing the window size for end-to-end tests might help.

[j-scheitler1]

@personalizedrefrigerator thank you for the guidance on fixing this, it should be good to go now!

[personalizedrefrigerator]

This looks good to me! (I've updated the pull request title so that it can be parsed by the CHANGELOG generator).