Add more Markdown-style shortcuts to format content

[tomdyson]

I love draftail's markdown-style shortcut for starting lists with " - ". Would it be possible to do something similar for code formatting, i.e. start a new block with "```" or inline with "`"?

[thibaudcolas]

It's very simple to implement if the shortcut is at the start of the line. (title styles, code block, blockquote). I experimented with it for title levels, but wasn't entirely convinced by the behavior. To revisit!

[thibaudcolas]

Here is what this could look like for heading levels:

Note that the #s before the actual title text are removed from the block when the heading marker is complete (when a space is entered afterwards). Does this look good? I assume we don't want any of the Markdown formatting syntax to end up stored in the text.

The behaviour on undo also has to be defined – whether it preserves the heading marker or not. Preserving:

Not preserving:

Personally I think "not preserving" would be better, although it means that if people mistype while entering these they'll have to retype from the start of the line.

For code blocks, this is a bit more problematic because the "code block" Markdown marker is one line above the actual formatting. It feels a bit strange to use the triple tick as a "start of the line" marker, although it could still be useful:

For inline styles (bold, italic, code, strikethrough) this is another story.

[tomdyson]

I love this!

Does this look good? I assume we don't want any of the Markdown formatting syntax to end up stored in the text.

Yes, I agree it shouldn't end up stored in the text.

Personally I think "not preserving" would be better

I think I agree with this.

For code blocks, this is a bit more problematic because the "code block" Markdown marker is one line above the actual formatting. It feels a bit strange to use the triple tick as a "start of the line" marker

This doesn't feel strange in the demo, but I'd like to try it out to confirm the experience.

[thibaudcolas]

@tomdyson I've made this available at https://www.draftail.org/ The available markers are:

draftail/lib/api/constants.js

Lines 215 to 228 in 968fd65

	export const BEFORE_INPUT_MAP = {
	'* ': BLOCK_TYPE.UNORDERED_LIST_ITEM,
	'- ': BLOCK_TYPE.UNORDERED_LIST_ITEM,
	'1. ': BLOCK_TYPE.ORDERED_LIST_ITEM,
	// TODO Potentially to be commented out again.
	// See https://github.com/springload/draftail/issues/53
	'# ': BLOCK_TYPE.HEADER_ONE,
	'## ': BLOCK_TYPE.HEADER_TWO,
	'### ': BLOCK_TYPE.HEADER_THREE,
	'#### ': BLOCK_TYPE.HEADER_FOUR,
	'##### ': BLOCK_TYPE.HEADER_FIVE,
	'###### ': BLOCK_TYPE.HEADER_SIX,
	'``` ': BLOCK_TYPE.CODE,
	};

When trying the code block one you'll most likely run into #104.

If you want to try all of the formats, go to https://www.draftail.org/examples to find editors that have everything enabled.

[thibaudcolas]

@tomdyson I see that Dropbox Paper also uses those shortcuts so I've added all of the ones above, changing the code block one to not need a space (like in Paper). Also added one for blockquotes (> ), and HRs (---, taken from Paper).

Paper also supports Markdown-style syntax for inline styles (bold, italic, code, strikethrough) which it would be nice to implement as well. Finally, it does some character replacements (--- inside of other text becomes —, -- becomes –, smartquotes) which I'm not sure what to think of.

[davelab6]

The character replacements are a great idea and I'm hoping you'll adopt them :)

For advanced users who may want to toggle this off, a toolbar toggle could work, or, simply access to the html source (which I use in a vanilla forums based forum override the typography enhancements when I occasionally don't want them)

[thibaudcolas]

@davelab6 thanks for taking the time to comment here. I actually ended up opening a separate issue just for this at #113. If you want to help pushing this forward, it would be nice to get help reviewing what other editors are doing in this area (more info in the issue).

It's harder to build something that's not "one size fits all" (with configuration beyond what's doable in the code), so if that's deemed necessary this is less likely to be implemented sooner rather than later, but I guess we can have that discussion.