Feature: WYSIWYG editing

[sedrubal]

It was great if you can edit the content directly by editing the rendered markdown like a what-you-see-is-what-you-get editor. So hackmd was usable for non hackers 😉

[jackycute]

Hi @sedrubal
We understand WYSIWYG editor is always more friendly for normal users.
But it's pretty hard to make a WYSIWYG editor for markdown.
If anyone found any good resources please comment below.
Thanks! and PR is welcomed.

[gandhiano]

Maybe something like CKEditor Markdown plugin or Hallo.js would serve the purpose?

It's definitely something that can reduce the entry barrier for non/less-tech users.

[taw00]

Though I think it is a good aspiration, markdown is So. Very. Simple. -- even for "normal humans" that personally, not that this is a vote, I think it is a red herring to pursue this unless it is stupid simple to implement, bullet proof accuracy, and most importantly, it has to render the markdown cleanly.

HTML WYSIWYG editors, to this day are total crap, and hence people generally don't use them. Granted Markdown is far FAR simpler and better defined than HTML, but... I am skeptical of the value of this. I remain open to it though.

[SISheogorath]

Before we add a WYSIWYG editor we should simply add a video as how-to. Learning markdown is something you can do in less than 10 minutes. Add such a video to HackMD takes us less than 20 Minutes. Add a whole WYSIWYG editor takes hours. And for most HackMD users it adds no benefit. Even more, I think it can make HackMD worst.

Let me show you a few 10 Minute videos to use markdown:
https://www.youtube.com/watch?v=hpAJMSS8pvs

Everything a new user needs to know in a very efficient way. Maybe we need to produce an own video for HackMD because, for example, this video is for another Markdown for another parser than HackMD uses. But there are tons of videos about markdown basics in 10 minutes on youtube. Pick one and place it. Way easier and efficient than implementing a WYSIWYG editor.

[eipiminus1]

I think it would be a huge win to have this functionality.

I agree with @taw00 in that markdown already IS dead simple and I personally prefer to write markdown directly. But I work with a couple of so called "normal humans" and I could only convince them to use markdown as the format for internal notes and quick write ups since I found Typora. I believe there are two things essential to reducing the entry barrier:

• Point and Click access to basic features (bold, headline, bullet list, etc.). A Simple toolbar should do the trick.
• No need to switch between a "source code" and a result. In my experience non-hackers have a subjective feeling of complexity as soon as they have to switch to a source code.

The toolbar should be rather simple to implement. But the WYSIWYG mode would probably be the breakthrough for adoption by my colleagues.

[robguthrie]

Slate.js popped up on my radar today. It looks like a rather compelling possible option. Not sure if it supports markdown wysiwyg though. https://github.com/ianstormtaylor/slate

…

On Mon, 17 Apr 2017 at 01:17 eipiminus1 ***@***.***> wrote: I think it would be a huge win to have this functionality. I agree with @taw00 <https://github.com/taw00> in that markdown already IS dead simple and I personally prefer to write markdown directly. But I work with a couple of so called "normal humans" and I could only convince them to use markdown as the format for internal notes and quick write ups since I found Typora <https://www.typora.io/>. I believe there are two things essential to reducing the entry barrier: - *Point and Click* access to basic features (bold, headline, bullet list, etc.). A Simple toolbar should do the trick. - No need to *switch between a "source code" and a result*. In my experience non-hackers have a subjective feeling of complexity as soon as they have to switch to a source code. The toolbar should be rather simple to implement. But the WYSIWYG mode would probably be the breakthrough for adoption by my colleagues. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#375 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAdr398UDcO7q47spqzsWrEZknvWjDKCks5rwhUFgaJpZM4MRkE0> .

[Zekt]

Hi, just want to say WYSIWYG is a huge different to "normal users", programmers are accustomed to logical rules which lead to desired output, but changing between the context is a bit annoying, and not being able to see the result directly on what is edited is more annoying, especially when the user cares a lot about the format, layout, feeling and looks of the text and paragraphs... etc., of which not usually cared about in markdown document.

And also I want to mention that(still, imo), a WYSIWYG editor with markdown support and a markdown editor are two very different things, it's more like we have to make a working WYSIWYG editor, and try to translate the output back to markdown.

[gwillem]

(I love hackmd and I use it for work and personal stuff. Thanks for making it! I hope lots of people make a financial contribution.)

IMHO adding WYSIWYG support would be the start of bloatware. You cannot optimize for two distinct groups of users simultaneously. If you try, you will end up with a sub optimal compromise in the middle. And why would you? Hackmd is perfect for the programmer/tech writer. Less techie audiences are already served by Google Docs and the like.

NB. If you are looking for a way to convert WYSIWYG-y documents into Markdown, there's the excellent Pandoc already.

[brainscript]

Maybe implementing a toolbar like the one in the GitHub Markdown editor could be added. It would allow users to experiment with these to find out how to format text and learn Markdown along the way. For more complex stuff like tables, buttons could generate an empty skeleton that the user can fill in with content, something like this:

• Click Add table
• Enter the amount of columns and rows
• Get an empty table skeleton, like this one (2x2):

?	?
?	?

Simple tools like this would be a good compromise in my opinion and pairing this with commonly used text editing shortcuts (like Ctrl+B for Bold) would help new users get into using HackMD and Markdown in general more quickly.

There's already something quite similar for Atom, tool-bar-markdown-writer, that you can install as an Atom package and try out by creating an *.md file.

[Zekt]

I forgot to mention SimpleMDE, which is a compromise between WYSIWYG and pure markdown,on which you see the result on the markdown text directly, but I can imagine some people would find it pretty annoying. To have some editing options is quite nice though.

[SISheogorath]

I think HackMD is not about to change the whole editor framework. So the discussion about toolbars etc is one that should be discussed in the codemirror repository. Or even easier: Write a plugin, file a PR and we will see what happens. Because this way HackMD can simply work like it is now until your work is done. And no-one has to rewrite a bunch of code just to fit the new editor framework.

There are already tons of plugins which add a toolbar in one or another way so simply modify them and try it. :)

[MartB]

There seems to be a toolbar in the latest builds on https://hackmd.io/features?both
I dont have that toolbar where did it come from ?