Any chance for a mixed WYSIWYG editor?

Somebody's probably gonna kill me for this... :laughing:

Recently, in Gitlab 14.0, they introduced a new WYSIWYG editor for their wikis. According to the docs:

We use tiptap 2.0 and ProseMirror to build the Content Editor.

So I just went to test those two... specifically ProseMirror... and... :heart_eyes: amazing! It's like the kind of Markdown experience I always wanted! You write like writing MD, which is comfortable and ergonomic, and you see like seeing normal document. Similar to Mark Text somehow.

It'd be nice to see something like that in Joplin's WYSIWYG editor.

And since it seems to use the same basic technologies as Joplin, I was wondering if it woudln't be easier to just bundle that instead of maintaining own editor.

Well, don't take it as a complaint please! I love Joplin! Just... writing with that editor is not fast. At least it could have some more shortcuts like setting header or bullet lists.

Don't kill me pleease! :grin:

1 Like

Have you checked out Caleb's Rich Markdown plugin?

Haha no one is going to kill you for wanting a feature :grin: I must say here's another vote for the Rich Markdown plugin. It does just about everything you asked for in your post, plus you can tweak it even further straight from CSS (there are quite a few posts here in this forum on how to do that).

The other great thing about the Rich Markdown plugin is that it's still in active development and the developer is open to feature requests. Kudos to @CalebJohn !

Hmm not sure...

The description on Github says:

The aim of this project is to ditch the markdown viewer without trying to turn a markdown document into some kind of unholy WYSIAWYG (what you see is almost what you get).

That's more or less what I had on mind. I find md comfortable to write, but distracting when reading, so I was thinking on something that looked like a WYSIWYG, but that allowed to write like md.

So you can't switch between the md view and rendered view for those two tasks? Maybe not.

What the Rich Markdown plugin does is put css clases around the md tokens. This allows you to use css to de-emphasize the tokens and sometimes even replace them. We've now figured out how to turn the *'s that make lists into real dots using css while still having the characters be there as markdown.

I make the # marks for headings very tiny so they are not distracting but are still available for editing. I think the unholyness comes when you are trying to have a real markdown editing experience but you want to hide those # for headings completely. Of course you can do that with css. But then what happens when you want to change a h1 to a h2, etc.

Similar with * for strong. With the Rich Markdown plugin you can make those marks a light gray so they don't stick out, but when you want to edit them, you can see where they are. But if you make them disappear then they are much harder to work with.

I'll admit, Joplin is the first time (except for Discourse) that I've really used md, and I haven't tested the editor you mention in your op. But so far I find the Rich Markdown gives me what I need.

2 Likes

Right, when I need to read instructions for a recipe or pattern, I usually switch to the fully rendered version so that I don't have any distractions at all. It will even prevent me from accidentally editing the note (with three lively kitties in the house, this happens a lot more than I'd wish).

But for editing and everything else, this plug-in does everything @whitewall described. Best of all worlds in my opinion!

1 Like

@whitewall Thanks for explaining what Rich Markdown does. Really nice, @CalebJohn !

Transformation inside input fields are really hard to get right, and also tiptap is not flawless. Try inserting =example== and add an extra = at the beginning to turn it into highlighted text. It doesn't (only when you insert ==example== correctly):
tiptap-bug

I think Dynalist solves this in a better way. You only see the Markdown characters of the line you're editing:
Dynalist

I think it would be even better if the highlighted styling is also applied when the line is active, but that might be just me.

All these scenarios can easily be achieved with Rich Markdown with the 'Add additional CSS classes for enhanced customization'-option selected. Then you can hide the Markdown tokens, unless the line is active (parent div has .CodeMirror-activeline). Would that work for you @Yajo ?

1 Like

I just did a test on this and it seems to work. Please discuss here: Plugin: Rich Markdown - #199 by whitewall

Thanks for this idea!!! I don't know why no one has done this yet. Maybe there are unknown problems. Anyway, please discuss this on the thread linked to above.

2 Likes

are you aware of Typora — a markdown editor, markdown reader. it may adds some ideas on styling

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.