Add WYSIWYG Editor option / preview

I’m loving Supernotes, but I’m not personally a fan of markdown editing. I simply prefer a WYSIWYG style of editing. For example, when I want to make something bold, I want to highlight it and press CMD-B to make it bold. Now, that works in Supernotes of course, but then in the editor view it shows bold text. Once it renders then it removes the markdown, which is also fine. I would much rather just have the text show as bold in the editor view, without the markdown syntax. This isn’t a right or wrong, just what I prefer.

There are quite a few ways to handle this, but I think the easiest and most elegant way would be to have a way to toggle back and forth between the markdown view and the rendered view in the editor AND to be able to change the default view as a Settings option. Being able to toggle between markdown and rendered view in the editor also helps to check the output will be what you expect (without exiting editing mode). Similarly, if you are in rendered editor mode and getting weird output, it is helpful to switch to markdown view and see if there is any unexpected markdown happening.

1 Like

Hi @jtbowlin,

Thanks for your kind words. We’re very dedicated to building the best markdown (WYSIWYM) editor out there, and with a few more ergonomic and visual improvements to tasks, links and easier typographic emphasis, we think we can get there. But can totally understand the want for a WYSIWYG editor, especially if you are used to it.

Removing the markdown and just showing the WYSIWYG view can lead to many strange outlier issues, which I’m sure you’ve noticed with other editors, like how do you get out of a bold text block when you can’t see the asterisks – it becomes a guessing game (as you mentioned the weird output). This is why we’ve been reluctant about WYSIWYG editors from the start and are fans of our display / edit modes when you get used to it.

Interestingly you mentioned toggling the marks within the edit view – I feel like this will become too confusing for most users that you can toggle between display and edit view and then within edit view toggle between marks and no marks. Although I guess we could add a hidden keybind for this for “pro” users (but then this wouldn’t work on mobile). The best solution would probably be to just add this as a user preference – would this work for you? I would also be inclined to change this feature request to “Add WYSIWYG editor option”.

Hi @tobias . So what’s interesting is in this forum software, when I’m creating/editing a post, I have a markdown editor on the left, and a WYSIWYG preview on the right (after you close the similar threads message).

So when I put ** around a word to bold it, it shows the asterisks on the left pane, but shows the word in bold on the right pane. Then when I exit the editor and it renders, obviously it matches what it was showing me in the right pane preview. To me, this is kind of what I’m looking for. I want to be able to see the output without having to exit the editor.

Now, I know that creates design issues and this isn’t a must have for me, but if you can make it work in an elegant way then I think it would be useful for many more people than just myself.

Thanks for your further feedback @jtbowlin, that’s very helpful!

One of the biggest issues with a split screen editor is that it doesn’t work on small screens / mobile devices. We’ve played around with supporting this in the past but didn’t find a good enough flow that we were happy with. We will keep all of this in mind though and hopefully be able to make the editor more ergonomic for you.

Understood. Makes sense. Thanks @tobias.

1 Like

3 posts were split to a new topic: Table / Database view

Removing the markdown and just showing the WYSIWYG view can lead to many strange outlier issues, which I’m sure you’ve noticed with other editors, like how do you get out of a bold text block when you can’t see the asterisks – it becomes a guessing game (as you mentioned the weird output)

I think the bike author found an elegant solution: typing affinity

Here is a link explaining the concept: Bike: Innovative Rich Text Editing

1 Like

Hi @pomdtr,

Thanks for sharing this! Bike seems very elegantly designed indeed, however this only addresses typing with a keyboard – not on mobile.

We have some of our own improvements in the pipeline and we’re looking forward to sharing them with you soon!

I am an advocate of Markdown, but could you maybe have a view where it’s handled like Apple notes, (ie hide the asterisks and the like) whilst editing. I have several people who I share/edit cards with that are confused and it would be helpful to have a dumb-downed view (buried deep in settings)

1 Like

Hi @andrewdegi, first off welcome to the Supernotes community! :partying_face:

I’ve just merged your request with others request a WYSIWYG (What You See Is What You Get) view rather than our current editor which is WYSIWYM (What You See Is What You Mean).

We have more improvements to our editor in the pipeline (like image support) and may concatenate certain marks (like long links) in the future, so that will hopefully also ameliorate some of these issues :slight_smile: