search

AlexTatiyants / platen

Markdown Wordpress Editor (distributed as a Chrome packaged app)
Apache License 2.0
12 stars 4 forks source link

Use CodeMirror for the text compose area #3

Open yuvipanda opened 11 years ago

yuvipanda commented 11 years ago

Would give us better tab handling (#2) and also optional markdown syntax highlighting.

AlexTatiyants commented 11 years ago

I considered using a WISYWIG editor, but chose against it because a custom implementation gave me the most flexibility to a handle a couple of tough edge cases.

yuvipanda commented 11 years ago

CodeMirror not only would give us markdown syntax handling, it would also give us an optional vim mode. And it's purely a text editor, and not anywhere close to a WISYWIG. It might be harder to do the image drag and drop though :(

Can you tell me which edge cases using contentEditable handles?

AlexTatiyants commented 11 years ago

I ran into a complication with using contentEditable. I originally created a simple Angular directive to both annotate the control as being editable as well as publish an event in response to an edit (that directive is editable-text.js). I wanted this directive to be generic because I'm actually using it in a number of places.

This directive uses the inner text of the element for both rendering and reading the control. This works fine but only if you don't have and html formatting in the text control. However, for the main editor there is a lot of html formatting added by the browser. So I wrote another custom directive (editable-markdown.js), which uses html instead of inner text for rendering and reading, but also saves off the innerText property.

So, if CodeMirror could be integrated with this directive, that would be ideal. Otherwise, we'd need to figure out how to get the same behavior into it.

yuvipanda commented 11 years ago

https://github.com/angular-ui/ui-codemirror should work nicely too.