Zuunote - Markdown Editor of the Web

On one end of the spectrum we have rich-text editors. They are intuitive to most users(including me) because the experience there is "what you see is what you get," or WYSIWYG. On the other end, when I write plain texts with Markdown, I can't help but feel...free!

But each of them is an extreme that is not without its own list of costs to audiences from opposite camp.

Rich-text editors

There seems to be a disconnect between us using Markdown syntax to format texts and when we want to change them, we have to select them and edit with a toolbar.

For example, I'm making this **cat** bold. Okay now I got a bold cat. Nice. Now let's say I don't want my cat to be bold anymore. Well, having experienced that adding asterisks in certain way made it bold, I would have thought that to un-bold it, I could just backtrack by removing the asterisks. But nope, to do so, now I have to learn idiosyncratic UI and rules and keyboard shortcuts, and context-switching them.

Writing purely in Markdown

So I take solace in writing plain texts with Markdown. Everytime I do so though, I wish I never left the WYSIWYG world. Yes we got split-pane. But it's awkward and tiring to constantly track my focus left and right.

Also, Markdown editors I have used tend to perform poorer as my document grows, and the split-pane wouldn't update as smoothly as it did with shorter notes.

This is Taiping. This mountain and the waterfall on the rock-face were a backdrop to the house I grew up in. My heart is still here.

What does the intersect of rich-text editors and good old-fashioned plain-text editing look like in one coherant experience?

In Zuunote, you edit texts by adding and deleting the syntax characters — this gives an immediate connection to your writing.

So this is what I'm exploring with Zuunote: To see how far I am able to go - to sprinkle the goodness of plain-text editing on a WYSIWYG world where it seems right to me, and to do it all in a manner in terms of time-tested, simplicity, small-scale, calm, and slow - and maybe a handful of people will resonate with what comes out of all this.

〰〰 no split-pane

When you focus cursor back to Markdown-formatted texts, their syntax characters will show up.

works on headers too 〰〰

Inline codes without loose ends

One of the motivations going into this project was to make sure inline code was done right.

I spend alot of times in Slack, Jira and Confluence. They allow me to create inline code with Markdown. That's great. But when I'm editing them, my experience very often goes like this: Just when I thought I already exit it - nope, I'm still inside it; when I thought I could continue typing inside it - nope, I'm actually outside of it. At this point, I'd have had hit a combination of spacebar and left and right arrow keys in random order just to continue my writing. The reason is that the position of the cursor while against the background color of inline codes - the next character didn't show up exactly where user anticipated.

In plain-text world, the cursor dictates where characters will be. This fundamental is not lost on Zuunote even while under the influence of WYSIWYG world.

This is inline code in Zuunote. The feedback loop between perception, action, and consequences is not broken.

As in the vision of military colonies, which the utopian plan faintly resembled, its rational facade barely obscured the oceans of misery, disorder, chaos, corruption and whimsicality that went with it.

James c. ScottSeeing Like a State

Yes, we can create a code block by placing fences. But no, we can't remove it afterwards by removing the fences because we never put them back — there is the disconnect again.

In Zuunote, we put back the fences when we enter a code block. Everytime we do that, the fences, along with the content of the code block, blend into surrounding texts while keeping code block's styles and behaviours. This enables free-range plain-text editing that even crosses block's boundary. So now we get the best of both worlds: the fancy dressing and mannerism of a code block found in rich-text editors, plus the resiliency and simplicity of plain-text editing.