Ideas on implementing Stack Overflow-style comments

Question

I like the Stack Overflow comment UI a great deal and I'm looking into implementing the same thing on my own website. I looked at the code and it looks like the main tool here is WMD, with the JQuery TextArea Resizer playing a supporting role.

WMD converts Markdown into HTML on the client side. That's pretty nice because it helps out with previewing but I run into a challenge when sending that to the server. If there's a validation error (say the user entered an invalid e-mail address on some other part of the comment form, or he didn't enter his name maybe), then the server responds by redisplaying the form with an error message and the form fields prepopulated. Only now the comment text is HTML, not Markdown, because the server never even saw the Markdown. But I would like it to be Markdown since that's what the user was entering.

Any ideas here?

I've considered various ideas:

• Do a server-side HTML-to-Markdown transformation. Not that excited about this idea. Seems hokey to transform from Markdown to HTML back to Markdown again, and as a user I always find it irritating when the software reformats my text/code.
• Client-side validation (to augment the server-side validation, which I would of course retain). Seems like a reasonable direction though currently I'm using reCAPTCHA on my comment forms, which means that I need to post at least the reCAPTCHA part to a server.
• Lose WMD and use MarkdownJ to transform the Markdown to HTML on the server. I'd need to look for some other mechanism for accomplishing the preview function, which I want to keep.

Ideally there'd be some way to get at the Markdown version of the text and submit that to the server in addition to the HTML, but I'm not enough of a JavaScript guy to know whether that's a real possibility.

Any suggestions appreciated.

Answer 1

I've only looked at WMD at a cursory level, but submitting the textarea to the server seems pretty straight forward - in fact, I hardly see how you could avoid it if the textarea is part of your form. As I understand it, your textarea contains markup, and WMD converts it to HTML for display in another part of your page. Simply include the textarea in the form that gets submitted and you should see it on the server side.

Answer 2

See this question: http://stackoverflow.com/questions/235224/convert-html-back-to-markdown-for-editing-in-wmd (yay for the "Related" box on the right-hand nav!).

Answer 3

I would send the data as markdown and then let the server convert it to html when the validations have passed. WMD has an option to specify the format of data it will send to the server. Just add

wmd_options = {
        //Markdown or HTML
        output: "Markdown"
    };

Before the call to wmd