Bring parity between plain text / rich text editor toolbars
What does this MR do and why?
Aligns the plain text and rich text toolbars to be identical. This provides several menu items that were not available to the plain text editor, and makes it easier for customers to use their muscle memory to locate items when switching between editors.
- adds the "More options" dropdown for plain text
- removes the "Add a collapsible section" button in favor of the "More options -> Collapsible section" just like in the rich text editor
- adds the same "More options" items as the rich text editor.
- minor change to the single file markdown editor to align it better with plain text editor toolbar
References
Related to Bring parity to toolbars of the plain and rich ... (#507377 - closed)
Screenshots or screen recordings
| Plain text | Rich text |
|---|---|
 |
 |
Have also slightly changed the markdown single file editor. Since it's not written in Vue, it's more difficult to add a "More options" menu. So for now, moved the "collapsible" toolbar button to the end, where the "More options" button would be located. This makes the toolbars have parity up until the table button, and collapsible button sitting in the same place as the future more options button. Note that file upload and quick action button directly follows the table button in certain scenarios (not sure when that is, but the code is there). Which also aligns with the other toolbars.
| Before | After |
|---|---|
 |
 |
How to set up and validate locally
-
verify that the plain text editor and rich text editor have the same toolbar
- same icons
- same order of buttons
- same items/order in the "More options" menu
- there is NOT a full-screen button at the far right of the rich text editor
-
there should be no popup mentioning the new embedded views when looking at the plain text editor. This may still show when using the rich text editor (depending on whether you've dismissed it before)
-
Each item, "Embedded view", "Mermaid diagram", and "PlantUML diagram" should output an example, and they should the same between both editors
-
Go the repository and edit a markdown file using the single file editor. Only the plain text editor is available. The toolbar should look nearly identical to the comment toolbar, except there is no "More options" button. In its place is the "Add a collapsible section" button. When a "More options" is added in the future, the collapsible button will go inside the menu.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.