Side-by-side edit and preview of Markdown files

[dereks]

I would like to edit Markdown files with the ACE editor, incl. syntax highlighting:

https://ace.c9.io/

...and then see the rendered HTML results in real time using Markdown-it:

https://markdown-it.github.io/

This is how the Realms wiki does it, and it's awesome:

https://dl.dropboxusercontent.com/u/13941904/screenshots/realms/2.png

(Realms uses ACE and Markdown-it.)

I am willing to help code it up, but I would need some onboarding help. I'm also willing to pay a bounty for this.

Thank you!

[psolom]

This one is based on #85 and #87.

[psolom]

Partially commented wiithin related issue #87.

Just to recap:

I believe CodeMirror is able to meet your requirements and it's possible to integrate it with a side-by-side editor. However the implementation of this feture is time consuming and I have other stuff in my todo list. If you want to implement this feature then I would gladly accept your pull request.

Leaving this issue open for some time as a reminder of the possible feature implementation.

[dereks]

Hi! I've been working hard on this feature. Here are some screenshots.

As you edit the file in the side-by-side CodeMirror editor, the markdown is rendered into HTML in real time (with each keystroke). This gives the user an instant preview of the rendered markdown (like Realms-Wiki). Clicking "Save" saves the file to the connector.

I'll submit a pull request shortly. (I just merged in the latest dev branch, so it should be up-to-date.) I've only tested it lightly under Chrome, so I encourage more testing and a detailed code review. I'd like to make this feature robust. Thanks!

[psolom]

Wow! Looks great.
Seems you did a really good job.
Would be great if you will test it for other browsers.
Looking forward you to polish it and submit a PR.

[dereks]

There was one minor bugfix for Firefox. In Firefox, <img src="" ...> shows a broken image due to invalid src, but <img data-bind="attr: {src: null}" > does not show the broken image icon. Fixed and pushed.

[dereks]

(I seem to have lost a github comment somehow...? I thought I had posted these screenshots already.)

I added a default "DirIndex" file name for rendering, either above or below the dir list contents (by config):

Here the Markdown is rendered below the file list:

[psolom]

Released in v2.3.0