WYSIWYG editor in Joplin

@devonzuegel if you’re still looking into this, I found a really nice editor built on CodeMirror, HyperMD it supports WYSIWYG (but has the option to show all markdown syntax), it’s definitely worth looking into giving that it supports everything Joplin needs and has the solid base of CodeMirror.

I don’t know how difficult it will be to set up given that this is a react app, but I found an example of someone integrating CodeMirror with react so it shouldn’t be impossible (also a component).

p.s. When using the demo make sure to click on “Lab” and untoggle “Hide tokens”

Cool, thanks for the rec. The demo you shared looks great. I’ll play around with it.

I’ve been playing with Slate editor, which seems powerful and extensible but requires heavy lifting to create the modules to get the behavior we’re looking for. HyperMD could be a great solution to that problem!

One idea is to store/edit notes in whatever format the person chooses. I think the Ghost blogging platform does this. They do it at the block of text level. I.e., each block has a rendering type. Each block is markdown or their own WYSIWYG format. That would add a lot of complexity to Joplin though, right?

To be frank, I'm kind of in the camp of, "just stick with markdown as it is." Anything else is going to introduce some significant compromises, I suspect. Markdown is a fast, clean, ubiquitous standard. Folks that don't like it? Um... Well... Use something else? Is that harsh? Do two panes bug you? Maybe just show the one? That's why that option is there? I just don't quite understand why this is hard. Cuz folks have to learn something new? Is that bad? Hey, once they learn markdown and how markdown editors work, that means they can work with the zillion other markdown interfaces out there, since, you know, markdown is everywhere.

Is WYSIWYG worth exploring? Yes. Of course. My contention is that markdown, in the raw, is such a refreshing usability improvement and gives you some really powerful flexibility. That's the whole reason it was developed in the first place. Folks wanting a WYSIWYG interface IMHO are somewhere on the learning- and comfort-curve with markdown. The great thing is that markdown is So. Damn. Simple. to learn. The tough part is just getting used to it.

I'm rambling. Explore away. But, folks, markdown is your friend. It really is a wonderful interface if you'd just stop fighting it. :slight_smile:

1 Like

Oh, wow, this HyperMD thing looks great.

HyperMD indeed seems to be much better than Marktext. It still makes a few mistakes, for example rendering content that should be in a PRE tag, or messing up some tables but overall it seems pretty good.

1 Like

Hi! Really needs a good editor


Sharp,php View the horror!!!

Here’s hoping HyperMD doesn’t fall pray to what I like to call the China First movement that has been sweeping Chinese projects for the last year or so.

:+1::+1::+1::+1:

Do you mean these projects tend to get closed?

Nah, they tend to go from open source to closed source, or partially closed source with licenses that mandate the use of Chinese software or that the user follow Chinese law. Look at the WPS office license for Linux - can only be installed on distor’s originating in china, or Deepin that went from a non GPL open source license to a full on EULA last year, one that went full M$… well, they did back down with the free release’s EULA after the western FOSS community reacted badly to it.

Basically, after the introduction of the social credit score, a few high profile Chinese projects changed, suddenly they weren’t MIT or GPL3, or some other open source license but private licenses that had some pro china stipulation in the license, not all, and not at the same time.

China has a large population, it doesn’t matter if the percentage of programmers is smaller or larger then it is in other countries - they have a lot of good programmers. Unfortunately things like the social score and the the draconic surveillance legislation in China make non opensource Chinese software be looked upon with suspicion.

Currently HyperMD is free, open source and under an MIT license. I just hope these things won’t get changed in the near future with a new license that’s no longer opensource and which dictates that the software can’t be used in any way that would violate Chinese laws, or only in conjunction with other China originating software. It has happened before and it might happen again.

EDIT: currently HyperMD looks like the perfect engine to rebuild Joplin around. I just don’t know if anything changes with the license if anyone would actually fork the project and keep it alive and up to date - which is sad, because I really like the HyperMD functionality

1 Like

Thanks for the info, it makes sense. I guess the Chinese gov would love to cut access to GitHub but they can’t do this now as their dev depend on it, and they can’t clone it either like they did for Facebook, YouTube, etc. Maybe they are trying other angles to discourage Chinese users from contributing or indeed locking down their contributions behind weird licenses.

I tried it, but it’s not the same. The ideal option is https://www.tiny.cloud/docs/demo/tinydrive/ And it’s completely free.
I dream that v joplin former editor

What? are you joking?

I was visiting the forums to look for a solution for the same issue you wrote and am happy that it not only me thinking this is necessary. Knowing that markdown is useful for many people, probably the major base of this application, it’s still not easy to understand people insisting on using the markdown to people who are not interested in or doesn’t need it.

Sometimes it is better to say that some of us don’t like the nerd way of doing simple things, like making a word bold in their notes by adding two asterikses to each side of the word. I migrated from Evernote to look for an open-source, reliable solution to it but after using Joplin for a while I remembered why it is not easy to get used to open source software. Because their creators and user bases usually are geeks preferring the sophisticated ways when it comes to UI rather than the practical and friendly ones.

2 Likes

Heh, to each his own, I guess. The point is many of us find Evernote's way annoying and cumbersome. That was one of the big reasons I wanted to leave it - I hated the editor. Markdown is so simple and always so clear. :smiley:

(Of course, I'm not saying it wouldn't be best to have the option to use one or the other.)

Is it really a big problem to have WYSWIG functionality?
I used Tomboy on Ubuntu for nearly 10 years and it is just easy and the notes look good with the direct formatting. There are shortcuts for most functions like formatting text, strikethrough, etc.
If there was a functional Android app, i haven’t switched, but that is an important thing.
Tomboy indicator shows the last notes in the dropdown, that is another fine feature, btw.

I think most users like to have styled notes and for me the legibility is most important, which is not with markdown, because there are symbols and things that has nothing to do with the content of my note. That is really diversionary…

The existing toolbar honestly isn’t bad.

We only need to add some hooks to the viewer mode so that selection/cursor location works properly with the editor buttons and typing (and cut/copy/paste). This would bring functionality on the viewer mode to be similar to common text editors (and Apple notes) and would satisfy the editing needs of most people; Viewer mode could become the default. Power users could go into the editor mode for more control.

Coding details: I haven’t dug into it too much yet, but concretely what I envision is from the document we can send back more than just window.getSelection().toString(). Specifically if the Markdown renderer can add an ID to distinguish each section rendered, then in the IPC code we can parse window.getSelection().getRangeAt(0) looking for these IDs and send the resulting data back to NoteText in order to determine which areas were selected in the original Markdown source and make appropriate edits for all the editing tools.

1 Like

I use the clipper frequently to grab web pages. One of the problems I had with Evernote, is that sometimes it would clip more than I wanted, and it was impossible to get rid of what I didn’t want. Sometimes trying to do it, ended up eliminating stuff I wanted. Now with Joplin, and Markdown, it is easy because I can see exactly what I’ve got and how it got there and how to get rid of it.

I don’t have a problem typing with wysiwyg, but sometimes I have a problem correcting problems with it. It is difficult for me to understand the problem with pressing Ctrl-B to bold something and then typing what I want with the asterisks there as opposed to not having the asterisks there.

But, I would like an editor more like Typora (which I sometimes use as an external editor). Mostly I like it because it does in one pane what Joplin needs two panes for and the extra pane is a pain.

i totally get your point, but the WYSIWYG doens’t have to replace markdown.
I thought of an “option” to switch on WYSIWYG editing in first place and markdown in split window…
Let’s say, just want the Layout view to be editable with shortcuts for formatting, etc…

Can you explain to me what a wysiwyg editor has that Typora doesn’t have which is important? For me, MD is clearly the way to go, but perfection would be having one pane which shows both the MD and the formatted text. That way I get clearly demarked sections and bullet lists for easy review, but also the code when needed without having to have two separate sections.

I have clients who would find the MD layout section too Geeky, and confusing and would have a hard time understanding that they couldn’t type in the pretty section, but I think if these can be combined into one pane the problem gets solved.