Basic formatting of selected text in the Content Editor

Release notes

Problem to solve

Formatting text in the new WYSIWYG content editor can be tedious when you have to move your cursor up to the toolbar for every formatting action.

Proposal

Use a tooltip or similar UI treatment that is displayed above selected text and provide basic formatting options.

We should start with:

• Bold
• Italic
• Code
• Strikethrough

Later iterations will be added to the parent epic and include additional actions you might want to perform on selected text (like creating a link) and other contextual actions on different element types (like images or tables).

Implementation Proposal

• Use bubble menu extension to position context menu next to the text.
• We can’t use the GitLab UI tooltip component directly to style the Bubble Menu. We should use the CSS classes to do that.
• Button groups work very well to organize the available formatting options in the menu.

This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.