Moves editor mode switcher into bottom row
Related to Feedback: New layout for Markdown and Rich Text... (#409976 - closed) and UX for switching between Markdown or Content Ed... (#398152 - closed)
What does this MR do and why?
Changes editor layout to address the two biggest feedback aspects:
- Preview button being out of reach
- Limited available space still being a problem
To fix that, we will make the following changes:
- Moving editor mode switcher into bottom row
- Converting "Supports markdown" text into an icon
- Remove "For quick actions type /" and instead add a "Quick actions" button in the toolbar
Constraints
The Rich Text Editor is not yet available in all places. The plan is to have it available everywhere soon and we are actively working on that. Until then we need to find a design that works for all cases, but our focus is to have the best possible design for when the Rich Text editor is enabled, as the current plan is to toggle the feature flag in the next 2-3 milestones.
This new layout also doesn't completely fix the space problem, our long-term plan to deal with that is to combine multiple buttons into one dropdown button for smaller viewports.
Screenshots or screen recordings
With feature flag
| Before | After | |
|---|---|---|
| Admin Area -> Topics |  |
 |
| Issue |  |
 |
| Merge request |  |
 |
| Commit |  |
 |
| Milestone |  |
 |
Small viewport (375px) |
 |
 |
| Preview |  |
 |
Without feature flag
| Before | After | |
|---|---|---|
| Admin Area -> Topics |  |
 |
| Issue |  |
 |
| Merge request |  |
 |
| Commit |  |
 |
| Milestone |  |
 |
Small viewport (375px) |
 |
 |
| Preview |  |
 |
How to set up and validate locally
Feature.enable(:content_editor_on_issues)MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.