Home / GitHub Page

WYSIWYG editor in Joplin

ProseMirror is a lovely looking component, lauded by the author of CodeMirror for being super fast and flexible.

1 Like

I’ve been playing with a few different WYSIWG markdown editors today (including the ones noted above), and the one that’s cleanest and also has the functionality I personally prefer is Slate’s “Markdown Preview” demo: https://www.slatejs.org/#/markdown-preview

Would love to get your reactions to it! One thing I particularly like about it is that it doesn’t hide the markdown characters upon render, it simply adds the styling around it, which makes it very easy to see where the styles came from.

1 Like

I must have not give mark down a try but I find it so distracting, annoying and bloated to have two windows for writing the note. I don’t understand what’s the point in such a messy GUI, could please someone enlight me?
Also, please (very OT, but must be a silly problem just of mine), where should I look for issue related to the Android app? Is it a different program?
Thanks

1 Like

Joplin is a note taking app with its primary focus on notes and being able to sync between several different OS and devices while using your own cloud system.
If you want a text processor, use Word or some other crap. Notes are usually text. For people who like to style their text, there’s markdown that renders text into something more presentable.
Why do you think that professional typesetting is done in LaTeX and not some shitty WYSIWYG word processor?

For my part I seriously dislike anything that includes invisible format and styling markers, like WYSIWYG word processors. But that’s a personal choice. If a WYSIWYG editor ever made it into Joplin, I would only hope it’s a choice and not mandatory.

I don’t understand what you are trying to say. You can create a topic for Android questions here in the support category of the forum. “Different program”? Hmm, yes, or do you run desktop apps on Android? As I said, I’m not sure what you mean. Can you please elaborate?

I’m with you on this! What I have in mind is a formatter that doesn’t remove the styling markers. For instance my ideal would be that "You can **bold** and _italicize_ text" would render as “You can **bold** and _italicize_ your text” (rather than the conventional WYSIWYG that would render it as “You can bold and italicize text”).

I agree with this too. :blush:

2 Likes

We can discuss this forever, I think we’re hitting a religious point of view here.
Notes are text (usually as you say) but text can be then embellished or formatted for easier reading/understanding/whatever, otherwise it just looks like a big pile of words. I don’t want a text processor and nor Joplin isn’t a typesetting program.
Notes are whatever I want to make with them, that’s how I hand write notes (fair example I guess).
I’ll give a try to the markdown way to write notes… any link/tutorial that would suggest? Thank you!

I have to disagree with you there tessus. horisonbrave is right, the app has a messy GUI, especially for a markdown, text only note taking app. There’s an entire toolbar of WYSIWYG buttons that is completly pointless in a markdown editor. We need to have the preview window open to see what the end result will be - which is distracting and wasteful of space, etc.

Personally, if markdown is fundamental to the core identity of Joplin I like devonzuegel’s idea. There aren’t many markdown editors that do what she proposes, but those that do have a following for that very reason. Just using a live preview in a different window has not, is not and will never be the preferred way of viewing markdown. If might be ok if you’re designing a site but for note taking it’s just wasteful.

Again, I don’t need to see the final render, but actually giving me an idea of what I’m doing as opposed to just color changes would be a lot more welcomed.

I found this one online which seems decent https://guides.github.com/features/mastering-markdown/

I think maybe you’ve misunderstood @tessus it seems that you’re both advocating for markdown (WYSIWYG or otherwise) .

This is also my preferred implementation of WYSIWYG. Using something like ProseMirror that transforms markdown into invisible tags almost defeats the purpose.
What would be ideal would be to have 3 options; plain text (as it is now), WYSIWYG with markdown characters as @devonzuegel suggested (this is my personal favorite option), and WYSIWYG without visible markdown (like how typora does it). Picking any one of these 3 is going to guarantee that there will be complaints on the forum.

1 Like

Just a quick summary of my tests:

  • Marktext: Good editor but poor Markdown rendering. A simple test is to paste any README.md from GitHub in the editor and many things aren’t right. HTML sometimes is rendered, sometimes not. Images aren’t are the correct size, links are broken inside tables, etc. I think it’s good if you only use this editor and create your own notes from it, because then you can work around its quirks, but it’s not good if you want to consume content from other sources (like imported from Evernote, or from the clipper), which is needed for Joplin.

  • ProseMirror: There’s a Markdown mode, but I think it’s also a bit too simple for our needs. It’s good to add on a website to quickly input some text but again not robust enough to handle more complex content with tables, HTML, etc.

So as far as I can see, there’s still not a good enough candidate for WYSIWYG.

Isn’t it what the current Joplin editor does? It would highlight **bold** in a different colour, as well as # headers and other Markdown markup. In that case, isn’t the issue simply that the theme should be improved? For example, instead of rendering **bold** in blue as it does now, it should simply be rendered as bold text. Or is there something else that’s missing?

Nope, got it in one. That’s what we want, to see larger text when we use titles, to see bold when we use bold, etc. Basically, to have an actual, intuitive understanding of what we’re doing.

The current editor goes halfway to what I was talking about, it does syntax highlighting on markdown. But as you mentioned in the last sentence, we would want bold text to actually bold (including the **), headers should be larger, links should be clickable, etc. Slatejs that @devonzuegel posted does a good job with headers and bold, but not with the links.

1 Like

To me it seems pretty good! Not sure what tables you’re talking about, I can’t see any in the default example notes when installing Joplin (the “Welcome!” notebook)… how do you guys create table please, what for? wasn’t some of the pro-markdown guys saying “notes are just text”? :slight_smile:
Thanks for the insights.
PS: does Joplin want to appeal to just the nerdy/programmer type of users or to the general public just needing to take notes?

I’m very agnostic about this. I don’t care if the rendered text is in another window or not, but think that doing it in the same window will appeal to more people. The one thing that would bother me a lot however, completely overriding the one or two windows argument, is if I import a page with the clipper (or imported from evernote) and have a lot of crap at the bottom, or otherwise make a mess, that I can easily get out of it and see where things start and end so I can delete what I don’t want.

One of the many great things about Joplin is that it is fast. Fast to write, fast to render, fast to import from clipper, fast to edit junk you don’t want. I’d be very sad if I lost that.

here’s an old (and closed) similar discussion, maybe containing some good hints (or maybe not! :slight_smile: )

Last week I installed plugin “Notes by Firefox” to my firefox instance.
It has few formatting options, but his behaviour is really correct imho.
Thanks for reading me !

Would that not compromise privacy?
That’s the main point I adopted Joplin to achieve.
The markdown pane in courier font makes it unpleasant to use though, so I’ve gone back to other apps for anything I don’t need to keep private.

Hi all,

bevore I want to give some insights about my thoughts related to this topic I would like to ask all of you two things:

  1. In regards of needs the categories right and wrong are not very useful (in my opinion)
  2. This project is more or less a one man show (by Laurent), so nobody has the right of implementation of any suggested feature even if it would bring millions of user.

This said I would like to go through some points which are in my opinion not clearly expressed

  1. Why should I use markdown?
  • I think that markdown has a great advai beside ux: freedom of choice regarding the editor I use - I can replace Joplin with any other md-editor if I like to. [Joplin does have an importer for some non open standards because so many apps don’t give that freedom to there user (thanks laurent)]
  • For my in person why I prefer a md-editor is the feature-richness and so many different possible flavors which are and could be added in the future
  • For those prefer no WYSIWYG Editor: there is only one other FOSS project I know, which has a Crossplattform and freedom of choice sync feature-set similar to joplin - and carnet has no E2EE
    So in summary people probably ask for WYSIWYG just because they are in to joplin for an other reason than markdown.

I also want to repeat one point which nails why I ask for an WYSIWYG Editor:
I write many very short notes for my Task-Management and some very long notes for different purpose (talks for example). In those long notes it is hard to oriented (even at the desktop) in the md only view and in my opinion, possible - but in a distracting way - with the dual panel view.
It gets even more harder when I want to work on my long notes at the mobile phone. I don’t have the opportunity of a dual panel view and because of the size of the smartphone (even so with 6" screen size) there is no chance for me to look up what I wrote earlier in the note.

So in my opinion a WYSIWYG Editor which lefts markdown formatting tags would give my the possibility to structure my text not only for reading but also when I write and I still can quickly edit the formatting if i want to.
(In terms of structure, this is why I prefer making headlines for example bigger over the actual implementation highlight formattings with color)

I hope this is understandable from the point of grammar and vocabulary - because my English is very poor.

But I also hope this helps to understand why some of us ask for an WYSIWYG Editor.

@lauren: I’m very thankful for your app. And I would be very happy to see this coming - as I mentioned already this is your project i totally understand if you don’t want to go for a feature you don’t want to use.

Anyway without commenting it I would like to add some words from Antoine de Saint-Exupéry’s the little prince:
You become responsible, forever, for what you have tamed.

Sorry this comment got way to long ^^