Put less common features of the content editor in an overflow button
Problem to solve
The content editor supports many types of Markdown content and the list of supported elements is growing fast. The toolbar is only able to hold a limited number of elements. As we introduce new types of content like math, superscript, and subscript, the toolbar will get too crowded.
Proposal
Introduce an "overflow" toolbar icon that displays a list of less frequently-used elements.
For the content editor we will be using +
icon in place of the ellipsis as described in Pajamas because in the toolbar this button will signify "insert a block"
- Remove
strikethrough
from the toolbar.- It is not there in other toolbars in GitLab and it is there in the floating toolbar while text is highlighted in the Content Editor
- Also it is an action that is not used often (Toolbar usage - INTERNAL)
- Introduce overflow menu with
+
icon with following actions in the menu by default - Update sequence of toolbar buttons
- Dropdown for text style
- Bold
- Italics
- Blockquote
- Inline code
- Link
- Bulleted list
- Ordered list
- Todo list (if available)
- Image (future area for file upload)
- Details block
- Table
-
+
- Code block
- Horizontal rule
- At
SM
breakpoint and below, more actions will go into the the+
menu so the toolbar will look like- Dropdown for text style
- Bold
- Italics
- Blockquote
- Inline code
- Link
- Image (future area for file upload)
-
+
- Code block
- Details block
- Horizontal rule
- Bulleted list
- Ordered list
- Todo list (if available)
- Table
Toolbar | Toolbar - SM |
---|---|
We will explore if it is possible to add icons in the dropdown menu but if it is not possible then we will handle in a follow up.
Changes from proposal
-
Table
has a dropdown and should not be place in the overflow menu because of that for now.
Edited by Michael Le