Draft-js: Building a markdown editor with Draft?

[balupton]

I love https://typora.io however it is not open-source, so spent the day looking at what could accomplish its seamless switching of markdown, content, and code blocks - and support for autocomplete.

It seems based off of https://codemirror.net/mode/gfm/index.html

For draft, I did find https://github.com/ngs/draft-js-markdown-shortcuts-plugin demo which is fairly basic.

As codemirror seems to support all the Typora features (code highlighting, multi-mode editing, markdown mode, autocomplete, etc) and even features that aren't in typora (realtime collaboration) is it feasible for draft to ever get these features?

There is a thread for syntax highlighting on this issue tracker - however it seems that the prime example there is syntax highlighting using prism rather than support for code indentation and whatnot.

There is also a thread for realtime collaboration, but seems early days.

So I'm wondering what the intended feature parity is with codemirror, and whether things like markdown editors make sense for contenteditable editors (draft, prosemirror) or should stick to code editors like codemirror that supports widgets and whatnot

[aight8]

I write down now my thoughts and experience related your issue (it covers a little bit more than your question).

Regard draft.js:
In my opinion markdown could be implemented well in draft.js - because markdown is not really complex and uses several draft.js features which becomes a big plus. The direction of draft-js-markdown-shortcuts-plugin is a good starting point.

However I'm not sure if draft.js is the best framework for everything more in this direction - when it becomes more and more complex editors/IDE's.
(I don't tested the typora product so I speak now more generally)
I would describe it this way:
draft.js is a framework which is ideal to build richtext editors from simple to medium complexity content especially focused on simply & static api, flat data structure and meta data (entities).

I would think first which functionality of draft.js the editor would really use and what could be on the roadmap. If it becomes more and more complex and you reach the limits of draft.js (just think about tables) - it could be very difficult to proceed and you end up in a big hack.

Also keep in mind that draft.js is built by facebook mainly for their product. When it differ to much from to their needs or visionary direction of draft.js, it's doubtful if it get merged.

• There was a discussion about "realtime collaboration" but it currently looks like it lands nowhere on the roadmap.
• Tree blocks with PR is pending since some month - it's future is unclear.

Maybe think about slat which is much more low level. The learning phase could pay out.
https://github.com/ianstormtaylor/slate

Especially when someone build a product (even a business) which core product is based on the editor - I would be very careful.

Just a side note. When it comes to online code editing I found https://microsoft.github.io/monaco-editor/ is one of the best and also have intelligent auto completion. Yes it's from microsoft, but check it out first ;)

However I'm happy to hear something from a facebook contributor regarding this topic.

[MarcelCutts]

If you don't mind a little bit code wiggling, this exists and works well enough for my MD<-> DraftJS needs

https://github.com/kadikraman/draftjs-md-converter