Demarcate.js 2.0 - a major refresh
demarcate.js is an "in-place" editor for Markdown that is free and open source. It is designed to be a text editor which integrated directly into the browser and lets you edit in a what-you-see-is-what-you-get (WYSIWYG) way. When you are finished editing - HEY PRESTO! - without having to type any Markdown you have a properly formatted Markdown document.
demarcate.js is available on github.
Issues with version 1.x.x
demarcate.js was an experiment which grew out of my desire for a browser text editor that could easily push out Markdown. However version 1.x.x did have some issues:
- mobile browsers weren't supported
- the UI was a bit clunky to use
- the UI code was a bit ugly
- it required jQuery and showdown to operate
With this in mind I embarked on a review of demarcate.js.
Its editing, 2.0
The first thing I decided was that the clunky textarea based editing had to go. It required a lot of hackish code to resize the
textarea based on formatting, and needed a lot of DOM editing and removal. I decide to use the contentEditable feature that virtually all modern browsers (including mobile browsers) support. This allows a much richer UI and through use of a few shortcut keys can be made to work closely to a "desktop" word processor.
In working on Blitz Logger recently I've had to think a lot about modularity. One of the upsides of this is that I've had a bit more practice. demarcate.js now exposes a single
parse function which is used to convert the HTML DOM into Markdown. This parser self-registers against the demarcate library and is a separate object in its own right. This makes it much easier now to override the Markdown parser with a custom one such as the jQuery based parser from version 1.1.4 or even perhaps a restructured text one?
Demarcate.js 2.0 is nearly ready for release. You can have a look at the develop branch on github or try it out here: http://dev.williamhart.info/tap . In the meantime, feel free to submit any issues you find, request features Tweet to @wlhart, or even submit a pull request with a new parser!