Closed
Description
Overview
After dogfooding the composer legend, we re-grouped internally on our requirements and goals regarding formatting and CIDER, and converged on a 'formatting bar'.
MVP
- Selecting a word reveals the formatting bar
- Hovering over a button reveals a tooltip with action & keyboard shortcut
- Clicking an action applies syntax, displayed in plaintext so we don’t need to support rich text in the composer, and users can learn syntax over time
- Applying formatting persists the selection, so users can then apply multiple pieces of formatting, or easily delete the whole selection
- Show keyboard shortcut per OS (i.e. CMD vs CTRL)
- Don’t use green accent colour to highlight text as it’s visually strong and demeans when we do want to use it—better to not override (deferring to the OS pref.)
- Code block & Quotes insert line breaks before & after to better visually represent how the message will be rendered
- Use latest redrawn icons from Zeplin
Nice to have
-
If syntax exists, clicking an action should remove it. Ideally, this would:
-
Support removing syntax from words in the middle of formatting
-
Represent state in the action bar when the caret/selections are within formatted text
If this turns out to be a huge development endeavour, we can break it out of this issue and file for future.
Notes
- Unsure of keyboard shortcuts for strikethrough & code blocks, if we don’t have them don’t display keyboard shortcuts?
- (Now updated in zeplin) Icons hastily put together to unblock dev, need to iterate on them to also look good in dark mode, match stroke widths of other icons etc