idea: WYSIWYG markdown editor

[eguitarz]

Would it be possible make mobiledoc-editor supports markdown via postEditor? It doesn't require preview window, we can render it directly inside the editor when user typed a markdown syntax tailing with whitespace. The idea is from https://www.typora.io/

The difficult part is deletion. When deleting a rendered text, can we recover it to markdown'ed text rather than delete it?
e.g.

In editor we typed italic text with markdown syntax, and it rendered correctly.

markdown

When hit delete, it should be able to recover markdown syntax than deleting last character of italic text,

markdown (preferred)

markdow (not preferred)

[bantic]

@eguitarz Neat idea! This is probably theoretically possible with mobiledoc-kit at the moment, but would be fairly challenging. The onTextInput method (docs) will allow you to detect markdown-style input. There isn't a direct hook for deletion yet in mobiledoc-kit, though. It would be possible to hack around this using the cursorDidChange, didUpdate, or postDidChange hooks to detect when a deletion will/did occur. But this points to the need for a first-class willDelete hook or similar that you could use to detect when the user is about to delete into (i.e. delete the last character of) a marker, and optionally remove the markup from that marker and update its (plain) text.
There is also some discussion of augmenting the the onTextInput hook to be called whenever the text changes (e.g. for deletions as well as additions of text) in #404.

[eguitarz]

Prerequisites for this feature:

• Added range, direction and unit to delete hook #455 Added range, direction and unit to delete hook
• Is there an easy way to set editor's edit-state in postEditor? #457 Is there an easy way to set editor's edit-state in postEditor?
  UPDATE: (Used requestAnimationFrame for work around)
• find matched section range on text input?  #458 find matched section range on text input?

[eguitarz]

I'm going to create a repo for minimal markdown extension - https://github.com/eguitarz/ember-mobiledoc-md

Current plan is to make it as an ember addon (a mixin). @bantic, if you think there's a better approach to extend mobiledoc editor or anything I missed here, please tell me.

TODOS:

Heading

• H1
• H2
• H3
• H4 (Won't support until mobiledoc does)
• H5 (Won't support until mobiledoc does)
• H6 (Won't support until mobiledoc does)

Emphasis

• em (italics, with asterisks or underscores)
• strong (bold, with asterisks or underscores)

Lists

• Unordered list (* or - or +)
• Ordered list

Links

• With link text ( I'm an inline-style link
• Hyper link only ( (https://www.google.com) )

Images

• Inline style

Code

• Won't support until mobiledoc does

Blockquotes

• blockquote

[bantic]

@eguitarz Makes sense to me. Let me know if you run into any difficulties. There are probably some other good primitives to expose that would make what you are doing easier to do. Please feel free to raise them as feature requests as you encounter the need for them.

[gustawdaniel]

It is possible markdown conversion do mobile-doc and mobile-doc to markdown with HTML elements?