MarkdownShortcuts

Markdown typed into a rich text editor becomes the formatting it stands for, the markers disappearing, as Notion, Typora and Google Docs' autoformat do:

• blocks: at a line's start, - , * or + make a bullet item, a number and . or ) an ordered item, one to six # and a space a heading of that level, and > a quote, as soon as the space is typed. A marker the line's blocks refuse (a heading on a list item) stays text. Enter on a line of three backticks and an optional language makes the line a code block in that language, unless a code block is next to it.

• inline: a closing ** or __ makes the text since its opener bold, * or _ italic, ` ` ` inline code, ~~ struck through, and == highlighted, once the closer is typed. The opener is the nearest run of the delimiter before the closer and as long as it, at a word's start, and neither has whitespace just inside it, so snake_case, 2*3* and a * b * stay text.

Opt-in: add it to TextEditorState.editBehaviors, ahead of the line block behavior so it sees Enter first (editBehaviors.add(0, MarkdownShortcuts())). It edits on top of the typed text, so one undo gives back exactly what was typed. Nothing converts in a code block or inline code, and text typed after an inline conversion is not in its style. The styles are the state's TextEditorState.richTextStyles.