UX Documentation

The ‘Advanced Text Editor’ is a feature intended to aid users who might not be used to the markdown formatting syntax.

For users who are familiar with Markdown, this feature also adds in some shortcuts (e.g. Command+B for Bold) for formatting with markdown that will help format messages more quickly.

Updates to the Message Draft Component

States

Formatting Bar Closed

The Message Draft Component has a new ‘Show formatting' button that displays next to the attachment and emoji icons.

• A tooltip shows when hovering over this button.

• When clicked, the formatting bar is opened and the button changes to the ‘active’ state (see below)

Formatting Bar Open

When the formatting bar is opened users have quick access to standard markdown formatting for their message. In addition, a Preview button is added to show a preview of what they’re formatting (similar to existing experimental preview function)

Remembering Open/Closed State

The state of the formatting bar (open/closed) will persist. The hypothesis is that this will be something users turn on once and won’t want to turn it off very often (although they can easily do so).

Default State

The formatting bar will be open by default once the feature is released.

The Formatting Bar

Controls

The following controls are displayed when the formatting bar is opened:

• Bold, Italic, Strikethrough

• Headings

• Link and Code formatting

• Quote, Bulleted Lists, Numbered Lists

• Help (shows current message help in new window)

Button Behavior

• When hovering over one of the formatting buttons, tooltips (with shortcuts if applicable) show

• For the Headings control, the formatting controls are temporarily replaced with the heading options (H1-H6)

Shortcuts

Mac

Behavior for applying formatting

Much of the behavior notes here are derived from Github’s markdown formatting bar.

Bold, Italic, Strikethrough

• When the cursor is at the beginning of an empty message draft, add the markdown formatting characters. The cursor is placed in between the opening and closing characters. (e.g. **|** )

• When text is selected, surround the selected text with the opening and closing characters (e.g. **selected text**). The text remains selected

• When the cursor is at the beginning of a word, surround the word with the formatting characters (e.g. **word**. The cursor remains at the beginning of the word (e.g. **|word**)

• When the cursor is at the end of a word (that is not the last word), surround the word with the formatting characters (e.g. **word**. The cursor remains at the end of the word (e.g. **word|**)

• When the cursor is at the end of the last word in the Message Draft, add the markdown formatting characters after the last word. The cursor is placed in between the opening and closing characters. (e.g. **|** )

Headings

• When the cursor is at the beginning of an empty message draft, add the markdown formatting characters. The cursor is placed after the heading characters (e.g. ##| )

• When text is selected, surround the selected text with the opening and closing characters (e.g. **selected text**). The text remains selected

• When the cursor is at the beginning of a word, surround the word with the formatting characters (e.g. **word**. The cursor remains at the beginning of the word (e.g. **|word**)

• When the cursor is at the end of a word (that is not the last word), surround the word with the formatting characters (e.g. **word**. The cursor remains at the end of the word (e.g. **word|**)

• When the cursor is at the end of the last word in the Message Draft, add the markdown formatting characters after the last word. The cursor is placed in between the opening and closing characters. (e.g. **|** )