Wednesday 5 June 2013

Adding MarkdownDeep browser-based Markdown 'Edit and Preview' capabilities to TeamMentor (and editing an TM Article)

After Adding MarkDown support to TeamMentor using MarkDownDeep, where I got MarkdownDeep to work on the backend (ie server-side markdown transformation), the next step was to add client-side viewing and editing (i.e browser-side markdown transformation).

Although there is a MarkdownDeep NuGet package with the client-side coed, I wanted to put the files in a specific location, so I manually added the html, JS and CSs files into the TM’s Javascript folder:

image

Then I created a Markdown controller, with the ability to fetch an article from TM’s database

image

and 3 methods to:
  • show a rendered article,
  • show the MarkdownDeep editor
  • save the changes
image

To see this in action, I'm going to use this TM Article:

image

whose content is already in Markdown format

image

Next if I open the page: http://localhost:3187/Markdown/Viewer?articleId=dbca5b87-2fb0-462e-a16f-c0bd06e27abe (which triggers the Viewer method from the MarkdownController) I will get this nice markdown transformation of the dbca5b87-2fb0-462e-a16f-c0bd06e27abe article

image

Then if I click on the Edit button,  the page: http://localhost:3187/Markdown/Editor?articleId=dbca5b87-2fb0-462e-a16f-c0bd06e27abe will open (which triggers the Editor method from the MarkdownController) and I will get this nice browser-based editor and client-side markdown transformation of the dbca5b87-2fb0-462e-a16f-c0bd06e27abe article

image

What is really cool about this editor (which you can see in action at the TopTen Sofware MarkdownDeep ‘Try It’ page) is the Real time preview:

image

which provides Markdown syntax help

... for bold:

image

… for links

image
image

… for numbered lists:

image
image

… for bullet lists

image

… for same-line Pre-formatted text (like source code-sample)

image

… for multi-line Pre-formatted text

image

note: the 'code format' is done by wrapping the multiple lines of code in a <PRE> tag (which can be prettified using prettify.js (like what already happens in TM)

image

What is great about Markdown and MarkdownDeep, is how mature and powerful it is.

In addition to the examples shown above, so see more options click on the ‘How to Format’ link:

image

... and  this in-browser-popup-window will open:

image

... where you can see a lot more Markdown options:

image

Like the ability to create tables:

image

Note: the html transformation above (in the /Markdown/Editor/{id}) was done using Javascript on the client, and the one below (in the /Markdown/Viewer/{id}) was done using C# on the server:

image

I’m pretty happy with this, and an quite excited that we will very soon be able to create TM articles in Markdown and be able to migrate the current HTML articles into Markdown.

The next step is to add MarkdownDeep support to the TeamMentor backend (i.e. TeamMentor.CoreLib) and start thinking about how to use it to replace the current WYSIWUG HTML editor (which really doesn't work well)