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 :wink:

[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 notifications@github.com 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 https://github.com/hackmdio/hackmd/issues/375#issuecomment-294351364, 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 ?

[MartB]

So did hackmdio discard their community builds or why is this still not in this repo ? This combined with the lack of updates really makes me think about jumping ship to another markdown editor.

[wenzul]

What's the status here? We can also read it in the changelog...

[KrzysztofMadejski]

+1

[ccoenen]

Current state of the project will receive an announcement later this week: https://github.com/hackmdio/hackmd/issues/531#issuecomment-334106024 . Issue #531 is the place to go if you wish to discuss that.

let's keep our focus on the WYSIWYG in here.

[SISheogorath]

I actually don't see a WYSIWYG editor comming. Neither planned nor wanted. So I will close this issue as wontfix.

Of course ideas and pull requests are welcome but keep in mind we are a markdown editor and most of them don't go the WYSIWYG way. Actually I really dislike editors that go this way. If you think there has to be such a mode, feel free to reach out in this issue, but for now I'll close it.

[sedrubal]

I totally agree and I think the current solution (toolbar with the most important formatting features) is enough.

[SISheogorath]

Please notice the toolbar is not part of HackMD CE. Right now it's only available on HackMD.io and HackMD EE.

[patcon]

Please notice the toolbar is not part of HackMD CE. Right now it's only available on HackMD.io and HackMD EE.

Thanks for that clarity :) I would like to humbly propose a measure to prevent confusion around CE/EE/hackmd.io: what if there were one place where these feature choices and restrictions are explained, so that the rationale is easy to share in issues like this. Then folks like us here (who might otherwise be confused) can understand that rationale, which I genuinely trust to be well-considered!

Thanks for your consideration!

[SISheogorath]

Please check the community announcement: https://github.com/hackmdio/hackmd/issues/579

Actually there are no restrictions on CE besides the need of development by the community.

In general if you search for a more interactive place reach out on Gitter or #hackmd:matrix.org.

[ccoenen]

I would certainly want a WYSIWYG editor. But I've never ever seen such an editor that worked well in all cases, and I believe I've tested around 10 of them. So I'm cool with closing this ticket.

[patcon]

hackpad was the best wysiwyg editor imho, and the way they formatted/rendered was technically compat with markdown, though exporting as markdown was kinda de-emphasized.

My impression is that the codebase was messy though, and so the editor was not really extractable. And lots of dead forks lay in its wake:

• https://github.com/hackpad/hackpad
• https://github.com/whackpad/whackpad
• https://github.com/dropbox/hackpad

just my 2c :)

[ccoenen]

Even though this is closed, I think it is the best place to keep collecting related information. Here's a markdown WYSIWYG editor: https://nhnent.github.io/tui.editor/

[frankgerhardt]

Interesting, thank you for sharing.

[heyakyra]

I don't understand the downside to this. Wouldn't it just be a setting users can toggle so that the users like us who prefer raw markdown can type it out but average users can get a visual interface?

There is a lot of untapped potential from people who currently use overkill platforms like google docs or are stuck with mediocre text editing apps like etherpad lite.

[SISheogorath]

@thekyriarchy two things:

1. We need to maintain it. That's a lot of work and we are just a few hobbyists in HackMD CE.
2. It's not a bad thing when people you other products when it fits their needs way better. Not everyone has to use HackMD. We offer a markdown editor, so why turn it into a rich text editor? People who want a rich text editor can use LibreOffice or collabora online.

No matter what we are currently on an implementation for a toolbar which makes stuff a lot more user friendly. But I still wouldn't call people who are not willing to write markdown our target audience.

[ccoenen]

I somewhat disagree on "wanted" or "target audience". I would totaly welcome a WYSIWYG editor, but the resources needed to add and maintain one are simply not there. The closing of this ticket was also supposed to reflect "don't hold your breath" because this is not something anyone is working on right now.

[SISheogorath]

A toolbar was contributed by @okfde

See PR: https://github.com/hackmdio/codimd/pull/846

[ccoenen]

That's a good new feature, but not even remotely the same.

[cben]

Even though this is closed, I think it is the best place to keep collecting related information.

ProseMirror is a notable structured editor, that can be configured for various document schemas, including one matching markdown elements. Here's an example with bidirectional mapping — you can toggle between WYSIWYG editing and editing the source: https://prosemirror.net/examples/markdown/

[oceatoon]

Hi all we are interested in this feature as well can we activate a WYSIWIG mode in codimd ? codimd.communecter.org/ I give them the argument just learn MD but some people just can't do it , and we get called geeks ;) anyway, if something like this exists , we'de be glad to pug it in Thanks

[jackycute]

Hi all we are interested in this feature as well can we activate a WYSIWIG mode in codimd ? codimd.communecter.org/ I give them the argument just learn MD but some people just can't do it , and we get called geeks ;) anyway, if something like this exists , we'de be glad to pug it in Thanks

Hi @oceatoon, Thanks for telling us. We don't have that WYSIWIG mode now, the closest is a theme which WIP: https://github.com/hackmdio/codimd/pull/1274 BTW, we already have toolbar, maybe change the editor theme to some light color will be helpful? Markdown has been used in many place like: FB, Slack, Reddit.

[oceatoon]

Thx @jackycute I'm convinced about markdown but many people unfortunelty have lokdown syndrome of easieness :( I don't seem to have the zen version on my instance , how can I activate ? HyperMD is super cool any chance that would integrated into codimd ? it would be super to enable configuration of what type of editor we want , how could we plug such new pluggins ? is it possible ?

[jackycute]

Thx @jackycute I'm convinced about markdown but many people unfortunelty have lokdown syndrome of easieness :( I don't seem to have the zen version on my instance , how can I activate ? HyperMD is super cool any chance that would integrated into codimd ? it would be super to enable configuration of what type of editor we want , how could we plug such new pluggins ? is it possible ?

Zen mode is still under WIP as mentioned PR. HyperMD may be cool for personal usage but the experience is bad for multiple people editing since the layout will expand and shrink quite often and that's annoying. Unfortunately the current structure of the editor is not that pluggable, the realtime collaboration made it pretty coupled.