UX Spec: Consistent Markdown Editor
Important links
Figma design: MM-56713 Consistent markdown formatting controls
Overview
Mattermost has established keyboard shortcuts and formatting controls in the center channel message input and the reply input. These controls and shortcuts increase efficiency, productivity and clarity in the messaging experience.
However, other parts of the app that should have the same capabilities are lacking the same controls and expected shortcuts.
It’s recommended that we provide this functionality in the following places - in priority order:
Must haves
Inline message editor
in the center channel
in the RHS
in the Threads view
Drafts, Scheduled messages inline editor
Edit channel header modal
Nice to haves
Playbook run status update modal
Playbook status update template editor
Playbook description editor
Playbook summary editor
Playbook retrospective template editor / Playbook run retrospective
Markdown editors in the Channels Product
Editing messages
The first priority would be to offer the standard controls in the inline editing input.
Align with user’s active state of the formatting bar
If the user has the formatting bar hidden in the main message input, then we should honor this preference in the edit mode. If the user has the formatting bar showing in the main message input, then we should also carry that preference over in the edit mode.
Keyboard shortcuts
We should offer the same standardized keyboard shortcuts that are currently offered in the main message input as well.
Must haves
Bold -
Command
B
Italic -
Command
I
Link -
Command
Option
K
- orCommand
K
if something is selectedStrikethrough -
Shift
X
Nice to haves:
Code -
Command
Option
C
Bulleted List -
Shift
Option
7
Numbered List -
Shift
Option
8
Quote -
Shift
Option
9
In the RHS and Threads context
The above controls should also be available in the RHS and Threads view context.
Editing the channel header
In the modal for editing the channel header, we should also offer the standardized controls outlined above for formatting and keyboard shortcuts.
Markdown editors in the Playbooks Product
In each of the contexts below, we should offer the formatting bar controls for these markdown editors along with the keyboard controls outlined above.
Playbook run status updates
Playbook status update template
Playbook description
Playbook summary
Retrospective template