R&D: Add markdown formatting shortcuts in the static site editor
Problem to solve
Users familiar with Markdown shorthand can actually be slowed down by writing in a rich text or WYSIWYG text editor. While the static site editor is meant to provide a more visual editing environment, it can and should be used by all contributors.
Intended users
- Rachel (Release Manager)
- Parker (Product Manager)
- Delaney (Development Team Lead)
- Sasha (Software Developer)
Proposal
When typing in the static site editor, we should provide shortcuts to apply common formatting styles. This is a common pattern in modern rich text editors such as Dropbox Paper and Confluence. Another good example can be found here: https://tiptap.scrumpy.io/markdown-shortcuts
To trigger these shortcuts, all the user should have to do is start typing exactly how they would in Markdown and the editor should have a simple rule set to apply formatting after the user presses the space
key. To start, we'll apply formatting for:
- All header levels (
#
,##
, etc) - Unordered lists (
*
or-
) - Ordered lists (
1.
) - Todo lists
- Blockquotes (
>
) - Code blocks
- Inline code
- Bold
- Italic
- Strikethrough
- Horizontal rule
- Links
Additionally, the leading formatting would be hidden, leaving only the newly-styled text.
Inspiration
Here are some other tools that allow users to insert Markdown objects/formatting
Medium | Notion |
---|---|
medium-heading | notion-heading |
Dovetail | Dropbox Paper |
---|---|
dovetail-heading | dropbox-paper-heading |
Typora | |
---|---|
typora-heading |