bustle / mobiledoc-kit

A toolkit for building WYSIWYG editors with Mobiledoc
https://bustle.github.io/mobiledoc-kit/demo/
MIT License
1.55k stars 151 forks source link

idea: WYSIWYG markdown editor #450

Open eguitarz opened 8 years ago

eguitarz commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

Prerequisites for this feature:

eguitarz commented 8 years ago

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

Emphasis

Lists

Links

Images

Code

Blockquotes

bantic commented 8 years ago

@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 commented 5 years ago

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