Markdown implementation

[daGrevis]

Are there any plans for Markdown implementation?

This is how I see it:

There are two options:

1. Plain Markdown,
2. Parsed Markdown that's just HTML (there are few Markdown parsers in JavaScript already);

If user clicks, lets say, "bold" button when it's option #1 -- selected text is wrapped in "**". If he clicks the same button when #2 option is selected, then the same happens, plus, new text is parsed and displayed.

Are there any plans for it? Maybe to create plugin that do it?

[orefalo]

+10 that would be nice indeed

[html5cat]

Agreed, there's a surprising lack for good Markdown editing tools. Not sure when, but this will definitely happen. Thanks for the suggestions!

[orefalo]

I remember a project on github that provided a set of rules to convert the typical html output of editor such as redactor into markdown. will try to find it

got it -> https://github.com/leeoniya/reMarked.js

not sure if it's the right way to go...

[html5cat]

Thanks @orefalo, that would be handy!

[treefitty]

I'd also love to see this integrated as it's the only thing stopping us from using this impressive project

[tehnorm]

+1 for this - an awesome markdown based editor would be tops!

[vjpr]

+1

[daGrevis]

Well, anyone wants to contribute or wut? Lets write down initial requirements and start work, shall we? :)

[ShawnMcCool]

+1

[alexkravets]

+1

[Madd]

+1

[marcusgreenwood]

+1

[mattstein]

+1

[hadees]

+1

[leeoniya]

reMarked.js author here. i've got a hack night coming up next week. might take a stab at integration. in fact, this was the exact purpose for writing that lib, see the readme! redactor looks like a great fit for it too, being a clean, minimal editor.

just to be clear, this is a one-way thing like "generate markdown" or "show markdown source". you cannot then edit that markdown and expect changes back in the editor. the markdown format throws away too much info to faithfully recreate the original html just from the generated text, no matter how good a markdown parser you use.

[daGrevis]

That' just not fun... button to switch from-to Markdown is not awesome at all.

[ShawnMcCool]

My goal would be to have a visual editor that a client can use that outputs to markdown for my system. Not something that requires people to know basic markdown tags and then be able to preview it. We already have that.

[leeoniya]

@daGrevis what you're asking for is called a WYSIWYM, not a WYSIWYG editor. there are plenty that already exist for markdown.

http://pushingkarma.com/projects/jquery-wysiwym/ http://mouapp.com/

and others...

http://joncom.be/experiments/markdown-editor/edit/ http://dillinger.io/ http://markdownpad.com/ http://markable.in/editor/ https://github.com/adam-p/markdown-here http://codemirror.net/mode/gfm/index.html

these editors have 3 purposes

1. for people who already know and write markdown with keyboard only
2. people learning markdown who need to use mouse and click buttons
3. when a better representation is not available

in a browser, it is truly and utterly pointless to make an editor that has html buttons for manipulating markdown text. why?! you have html available! which is a far cleaner and more readable format. not only that, but you already have a full visual editor for it that you're working in. the whole point of markdown is either to write without taking your hands off the keyboard and reducing keystrokes (compared to html) and/or to create a still-readable text-only presentations for storage or plain text email.

if you want this interactivity feature added just because it's "fun" and "awesome", you may have to do it yourself.

IMHO

[leeoniya]

@ShawnMcCool that's exactly the point.

[hadees]

I understand there are technical challenges but what I really want is something where the power users could switch to markdown in the editor and make changes then switch back. I just think markdown is nicer to use then a WYSIWYG but I know that, at least on my site, there will be a lot of users who just won't get it which is why I need a default WYSIWYG editor.

[daGrevis]

The way I see it...

You type in "bold", but you don't see "bold" — you see bold.

There is no "preview", because preview is instant. The source of it is still in Markdown.

I know it's a technical challenge, but I think it's worth the trouble.

P.S. I'm sorry I hurt you, but I really think that if we do yet-another-markdown-editor, it really need to differ; it need to be awesome!

[marcusgreenwood]

Agreed. It's effectively markdown as you type but parsed as WYSIWYG as soon as it matches or at some event (e.g. you get to line ending). Working out when to convert from markdown to WYSIWYG is probably the trickiest part to the challenge but I'm sure it could be done! :+1:

[marcusgreenwood]

Or perhaps some kind of "auto-complete" like this Github textarea has when you enter ":" so that you can explicitly select one of the markdown styles.

[hadees]

I think something that just automatically parsed everything you typed looking for markdown could be kind of error prone. What if an unsuspecting user actually wanted to type bold. I think just being able to switch back and forth would be easier to use. There are WYSIWYG editors that do this with html right now. But doing it in markdown you don't have to be as worried about users screwing up your site with bad html.

[daGrevis]

Nop, because there isn't such thing as "bad Markdown". Everything is Markdown and Markdown can't break anything; worse thing that can happen is that it does not compile to HTML. Markdown is always valid.

So you have written "bold, but then you don't want it to be bold anymore. You just press delete until cursor is right past bold and w/ next keypress it goes back to plain text and looks like "*bold".

About auto-complete... I don't see it as must-have feature — first I would like to see that text gets shown as HTML instantly.

[ShawnMcCool]

For me, markdown is a much cleaner format that I can render to any HTML that I'd like. It is hard to programatically change the formatting of HTML.

[leeoniya]

the fastest path to a syntax-styled editor would probably be to convert the html to markdown via reMarked.js, then dump the result into CodeMirror3 or rover-editor which will overlay on top of redactor. when switching back, use a full markdown > html converter like marked.js or markdown-js and dump the result back into redactor.

to save a lot of weight, you could ditch the full md > html converters (which implement their own markdown parsers also) and spend some more time to hook into codemirror's already-parsed internal markdown representation and make an HTML renderer for that lexed tree using some visitor pattern.

you would have to restrict redactor to some markdown-mode subset of features, avoiding some html,css,redactor stuff that cannot be translated back and forth and would be lost. eg: color, alignment, positioning, videos. i imagine that uniform indentation can be preserved by adding some code to recognize it in the markdown and adding the necessary css back via margin-left, as redactor currently handles this.

hookable markdown parsers/converters

• https://github.com/chjj/marked
• https://github.com/evilstreak/markdown-js

syntax-colored code editors for markdown

• http://codemirror.net/mode/gfm/index.html
• https://github.com/kasparsd/rover-editor

i think doing anything else would just be wasteful, complicated (and inferior) re-invention of the wheel. you could in theory create something that resembles a source-map that maps lexed markdown to some subset of a dom tree through an intermediate representation, like http://www.jsonml.org/ but it seems like ridiculous overkill.

that said, for dedicated client-side markdown, my favorites from everything i've searched so far would be these with a live result on the side

• markdowndeep: http://www.toptensoftware.com/markdowndeep/dingus
• codemirror: http://codemirror.net/mode/gfm/index.html
• rover-editor: https://github.com/kasparsd/rover-editor

[murphyslaw]

+1

[tnypxl]

+1

[felipellrocha]

+1

[leeoniya]

To everyone +1ing this issue, it would be more helpful to describe how you expect this feature to actually work. As I've mentioned above, it's impossible to do a conversion from HTML to markdown and back without losing all features which are unsupported by markdown but are supported in Redactor. A thousand +1s won't help resolve this impasse or move the conversation forward.

What I see immediately, is you'll have to live with a ton of markup in your markdown to retain the features like image positioning, sizing as well as paragraph text alignment and indentation. If you're interested only in authoring via markdown and giving up the extra features beyond it that Redactor supports, that would be another option.

[mattstein]

As a guilty/silent +1'er, I'll chime in: I wouldn't expect any magic conversion back and forth between HTML and Markdown, just the ability to use Markdown as a starting point. As in, an "import Markdown" button or perhaps auto-detection of pasted Markdown content that'd get converted (once!) to HTML.

My interest in this is for myself and for clients that would paste Markdown from some other source, similar to the scores of clients that paste rich text from Word and then edit with Redactor. I'm trying to encourage people to write for the web using Markdown, and smoothing the content transition into a WYSIWYG would be useful. I could also see this being questionable, so any critique is welcome!

[tnypxl]

What I see immediately, is you'll have to live with a ton of markup in your markdown to retain the features like image positioning, sizing as well as paragraph text alignment and indentation. If you're interested only in authoring via markdown and giving up the extra features beyond it that Redactor supports, that would be another option.

Then again, people who want to write in markdown probably don't care about the "extra" features to begin with. As far as I'm concerned, just some solid syntax highlighting would be just fine. All redactor needs to do is output the raw markdown. Let the tools integrating redactor handle the parsing on the front-end.

[tnypxl]

I'd checkout Scrawl for CraftCMS (checkout the gallery). But this is what I think of when I think wysiwyg editor for markdown.

[mattstein]

@tnypxl Nice editor, but this seems like it might ultimately beg the question of what Redactor aims to be. I think of it as a sophisticated WYSIWYG for HTML, which is different from a Markdown-friendly textarea with a preview pane. My preference would be for a fluid way to get Markdown into Redactor as HTML, letting Redactor do what it's best at.

Taking the potentially complex result (after further editing) and squishing it back into Markdown seems like it'd be a technical challenge and a questionable workflow, no?

[tnypxl]

@mattstein Yes, that would be a crazy workflow, I guess. Honestly I don't spend a lot of time contributing to wysiwyg editors. Then again, WYSIWYG editors are kind of nuts anyway.

[mattstein]

@tnypxl I'm certainly no WYSIWYG expert, just trying to be a bit more specific after leeoniya's invitation to expound on my "+1". I have a fearful respect for WYSIWYG editors :)

[leeoniya]

@mattstein in your case, it sounds like you wouldn't need anything beyond markdown > html (with no syntax coloring), so basically a simple marked.js import would be sufficient and I imagine very easy to add.

@tnypxl Scrawl is a WYSIWYM markdown editor. the only part that's WYSIWYG is the read-only HTML output preview pane...which again, is unidirectional. so there's a conflict here. Redactor lets you edit the output directly. With markdown, you don't do this; you only get syntax coloring of the editable part. I think the two are fundamentally different.

simply importing markdown is easy. letting people edit pasted markdown or author new markdown within a syntax-aware window is also easy. but it's unclear what people are actually +1ing.

having something like toggle button between WYSIWYM markdown and WYSIWYG html requires bidirectional conversion, which necessitates either messy markdown (with lots of markup in it), clean markdown with non-compat features stripped from it, or restricting Redactor's html mode to only markdown-compatible features.

if someone has a clear concept that everyone can get onboard with, it would go a long way towards moving this forward.

[daGrevis]

As I said before, Markdown editor with buttons.

Imagine, bold button that wraps text into **, italic that wraps into _, ability to add links and images with buttons etc..

It's a nice editor that looks great, but instead of messy HTML it gives back clean Markdown.

Here comes the hard part:

There's a option preview that somehow, using marked.js, I suppose, parses Markdown and shows the rendered HTML result. The thing I'm not clear about is the way it is showed. Is it side-by-side like socrates.io has? Is it over text, but read-only? Is it over text and editable (this should be hard)?

What do you think?

[leeoniya]

@daGrevis what you're describing is quite literally, any of the already listed WYSIWYM markdown editors.

so the question is, if you're not defining any interaction between a markdown editor's output and Redactor's normal mode, then what's the benefit here? you could just create js tabs, one for wysiwig HTML (with Redactor) and one for Markdown (with any editor you choose). You could maybe theme the markdown editor the same as Redactor.

my point is, if your proposed markdown toggle button in Redactor not only discards the existing content but essentially switches to a full 2-pane *WYM markdown editor, what's left of "Redactor" here?

[tnypxl]

The benefit is a bigger installed-base. But that depends on whether the devs feel markdown is too niche or doesn't serve to promote the core goals and features of redactor.

[ShawnMcCool]

I have created a system that translates html to markdown and back specifically so that i could use redactor. It can be a bit dodgy to rely on just showdown.js to handle the infinite combination of transformations.

I created a big list of tests that ensures that an insane amount of structures are managed correctly. For example, * bob * won't correctly be bolded by many markdown parsers... where bob would be.

It's sort of a messy solution, switching back and forth. But, it can be done with some amount of competence if you push for it.

[leeoniya]

The benefit is a bigger installed-base.

sorry, but this ranks really low on my priority list as a potential contributor. the only thing i care about is if my contribution makes the product better. i couldn't care less about feature lists or talking points for sales pitches.

[tnypxl]

If a feature provides value for the user, you should care. Maybe it’s not important now. But it could be down the road.

[leeoniya]

If a feature provides value for the user, you should care. Maybe it’s not important now. But it could be down the road.

i'm not refering to the feature itself, but to an increased market share being the reason for adding it.

[tehnorm]

@leeoniya let me take a stab at why I would love to see markdown support for redactor and what I feel like the best experience might be.

While markdown is a simple language to use and grok for your average dev it doesn't translate well to the end user of most web apps. To that end I would prefer to give my end users a wysiwyg editor that has a cut down set of features that markdown supports. Don't need all the crazy formatting, color, font options etc. Just the simple elements. In past experiences if you are providing your users full blown html editing functionality via a wysiwyg you will at some point end up with a giant ball of mud that is html based content. Markdown lets me avoid that and for the added bonus helps sanitize my input.

So - if I was to describe the feature set I would love to see in "markdown mode" it would me something along these lines

• markdown in, markdown out
• plain text paste
• limit the editor to the operations markdown supports

Would love to hear if anyone else is thinking along the same lines?

[leeoniya]

here's what i see as best fitting into how Redactor currently works. since Redactor's raw html mode is syntax-unaware plain text, markdown mode would be the same way.

there would be a markdown-mode toggle button which would:

• disable all buttons and features in WYSIWYG that markdown cannot support
• make the raw html view read-only or remove it completely
• add an editable raw markdown view identical to the current raw html view (plain text, all buttons disabled)
• if there is already content when markdown mode is enabled, throw up a warning that all markdown-incompatible styling will be discarded.

like the current raw html mode, markdown mode cannot guarantee that the raw markdown will not change form from its original input if any editing is done in WYSISYG mode because of the necessary bidirectional conversion.

[lolmaus]

I am looking for a WYSIWYG editor identical to Redactor but with one difference. When switching to code, you see Markdown instead of HTML. Thus, editor's features are limited to the ones supported by Markdown.

This would let users input text in either WYSIWYG mode or Markdown mode, depending on their liking.

Is this thread of any help to me?

[tnypxl]

Nope. You're just going told that Markdown is too difficult to support and doesn't promote the core strengths of Redactor. I've essentially given up on Redactor supporting Markdown.

On Wed, Feb 19, 2014 at 11:10 AM, lolmaus notifications@github.com wrote:

I am looking for a WYSIWYG editor identical to Redactor but with one difference. When switching to code, you see Markdown instead of HTML. Thus, editor's features are limited to the ones supported by Markdown.

This would let users input text in either WYSIWYG mode or Markdown mode, depending on their liking.

Is this thread of any help to me?

Reply to this email directly or view it on GitHubhttps://github.com/html5cat/redactor-js/issues/2#issuecomment-35522410 .

[lolmaus]

Are there any other WYSIWYG-to-Markdown solutions?