Page Comparison

...

• Bold

• Italic

• Strikethrough

• Headings

• Links

• Code formatting

• Quote

• Bulleted Lists

• Numbered Lists

• Help (shows current message help in new window)

• Preview

Behavior for each of the controls

Tooltips

• When hovering over one of the formatting buttons, tooltips (with shortcuts if applicable) show after a user has hovered for 800 ms.

• NOTE: there is a separate ticket to complete the UI for displaying shortcuts in tooltips

...

Headings Button

...

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

...

...

Preview Button

• Default off

• When on, shows the rendered preview of the markdown so you can see what the result of your markdown will be before sending

• When on, disables all editing controls in the formatting bar

...

Responsive Width Behaviour

• As the component’s width gets narrower, the formatting controls collapse in to a ••• icon button

• When the ••• button is clicked it triggers a popout menu with the additional controls

...

<424px wide: Shows only Bold, Italic, Link. The rest are collapsed to the ‘More’ button. No divider lines.

...

424 - 543px wide: Shows only Bold, Italic, Strikethrough, Headings, Link. The rest are collapsed to the ‘More’ button. NOTE: No divider lines are shown.

...

NOTE:

...

>600px wide: Shows all controls and includes divider lines.

Mobile Web View

Coming soon…

Shortcuts

The following shortcuts are currently implemented. See the Future Proposed Enhancements page for additional proposed shortcuts.

...

Format

...

Mac

...

Windows

...

Bold

...

⌘ B

...

Ctrl B

...

Italic

...

⌘ I

...

Ctrl I

Behavior for applying formatting

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

Bold, Italic, Strikethrough Buttons

• 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 in the middle of a word, surround the word with the formatting characters (e.g. **word**. The cursor remains in the middle of the word (e.g. **wo|rd**)

• 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 a line, add the markdown formatting characters after the last word. The cursor is placed in between the opening and closing characters. (e.g. **|** )

Headings Button

• When clicked, the formatting controls are temporarily replaced with the heading options (H1-H6)

  • Tooltips display here as well after a user has hovered for 800 ms

...

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

• When the cursor is anywhere else, add the heading characters (e.g. ## ) to the beginning of the current line. The cursor remains where it was.

• When text is selected, add the heading characters (e.g. ## ) to the beginning of the current line. The text remains selected.

...

Link Button

• When the cursor is at the beginning of an empty message draft, add [](url) to the message draft. The cursor is placed in between the []. (e.g. [|](url) )

• When text is selected, add [](url), but the selected text is placed within the [] (e.g. [selected text](url)). The original text remains selected

• When the cursor is at the beginning of a word, add [](url), but the nearby word is placed within the [] (e.g. [selected text](url)). The cursor remains at the beginning of the word (e.g. [|word](url)

• When the cursor is in the middle of a word, add [](url), but the nearby word is placed within the [] (e.g. [selected](url)). The cursor remains in the middle of the word (e.g. [select|ed](url))

• When the cursor is at the end of a word (that is not the last word),add [](url), but the nearby word is placed within the [] (e.g. [selected](url)). The cursor remains at the end of the word (e.g. [selected|](url))

• When the cursor is at the end of the last word in a line, add [](url) to the message draft. The cursor is placed in between the []. (e.g. [|](url) )

Code Button

• When the cursor is on a blank line with no text, insert the code block characters (3 ticks)

• When text is selected, surround the selected text with single ` characters (e.g. `selected text`). The text remains selected.

• If more than one line of text is selected, surround the selected text with ``` characters (e.g. ```selected text here```). The text remains selected.

• When the cursor is at the beginning of a word, surround the word with the single ` 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 (but is not the last word), surround the word with the single ` characters (e.g. `word`). The cursor is placed at the end of the word (`word|`)

• When the cursor is at the end of the last word in a line, add ` characters with the cursor in between (e.g. `|`)

Quotes Button

• When the cursor is at the beginning of an empty message draft, add the quote character (e.g. > ). The cursor is placed after the quote character (e.g. > | )

• When the cursor is anywhere else, add the quote character (e.g. > ) to the beginning of the current line. The cursor remains where it was.

• When text is selected, add the quote character (e.g. > ) to the beginning of the current line. The text remains selected.

• When multiple lines are selected only add the the > to the first line - unless there is a blank line between. If there is a blank line add another > for each paragraph separated by a blank line

Bulleted

...

List Button

• When the cursor is at the beginning of an empty message draft, add the bullet character (e.g. - ). The cursor is placed after the character (e.g. - | )

• When the cursor is anywhere else, add the bullet character (- ) to the beginning of the current line. The cursor remains where it was.

• When text is selected, add the bullet character (- ) to the beginning of the current line. The text remains selected.

• When multiple lines are selected, add the bullet character (- ) to each of the selected lines

Numbered

...

List Button

• When the cursor is at the beginning of an empty message draft, add the numbered list characters (e.g. 1. ). The cursor is placed after the characters (e.g. 1. | )

• When the cursor is anywhere else, add the bullet character (1. ) to the beginning of the current line. The cursor remains where it was.

• When text is selected, add the bullet character (1. ) to the beginning of the current line. The text remains selected.

• When multiple lines are selected, add the bullet character (1. ) to each of the selected lines and sequence the numbers

Preview Button

• Default off

• When on, shows the rendered preview of the markdown so you can see what the result of your markdown will be before sending

• When on, disables all editing controls in the formatting bar

...

Responsive Width Behaviour

• As the component’s width gets narrower, the formatting controls collapse in to a ••• icon button

• When the ••• button is clicked it triggers a popout menu with the additional controls

...

<424px wide: Shows only Bold, Italic, Link. The rest are collapsed to the ‘More’ button. No divider lines.

...

424 - 543px wide: Shows only Bold, Italic, Strikethrough, Headings, Link. The rest are collapsed to the ‘More’ button. NOTE: No divider lines are shown.

...

544 - 600px wide: Shows Bold, Italic, Strikethrough, Headings, Link, Code, Quote, Bulleted List, Numberd List. The rest are collapsed to the ‘More’ button. NOTE: No divider lines are shown.

...

>600px wide: Shows all controls and includes divider lines.

...

Mobile Web View

Coming soon…

...

Shortcuts

The following shortcuts are currently implemented. See the Future Proposed Enhancements page for additional proposed shortcuts.