Visual editing (WYSIWYG)

(Moved from Trello; you can vote for this feature and see past discussion at https://trello.com/c/X8E1HTXM/121-wysiwyg-editing-visual-editing)

We’re going to transition to to a WYSIWYG mode as the default at some point, the question is when is the most appropriate time to do it.

Motivation

Markdown is wonderful and all, but because the switch between rendered mode and plain text happens a lot, it’s hard to position your caret precisely or select text precisely. This means that you would often need to focus on an item first to “activate” it, and then move the caret to the correct place, after the markdown “expands”. This is painful, and the WYSIWYG mode is to combat this.

Another added benefit (I know it would be controversial) is that the average user is more familiar with Medium-style WYSIWYG editor. This reduces the amount of learning the user has to do in order to use Dynalist.

  • Users should have both WYSIWYG and markdown syntax formatting.
  • Users should only have a WYSIWYG editor.
  • Markdown syntax alone is fine, if I can’t have it with the WYSIWYG editor, please add more keyboard shortcuts to compensate.
  • One way formatting via markdown, i.e. You can create things with markdown formatting but have to edit it with the WYSIWYG (which is an option throughout).

0 voters

17 Likes

I use both regularly — markdown / dual-mode and rich text / WYSIWYG — in different settings.

My ideal solution is embodied in the writing app Ulysses. It combines markdown and styling in a beautiful, intuitive, seamless, single-mode way.

Technically they do have another mode. Markdown-less rendering is available but they’ve pushed it out to the final presentation, where you can export to any one of numerous available styles when creating a final PDF / HTML / Word / etc. document. That decision works well for me; what they offer in their editing mode is perfect, until I’m finished and need to share / present to others.

At least check it out as an option if you haven’t. It’s the best implementation of single mode markdown I’ve seen.

3 Likes

Switching modes would be something that I could see myself doing.

Either that, or if I can build with Markdown and then edit with the W-editor after.

So let’s say I have a five word sentence: The middle word is code.

And I add backticks to “word”. But then I realized that I wanted to include “middle” and “is”, too. Now I could add backticks around them and then the middle three words would be formatted as code.

That might complicate things and create other problems, though.

Never used Ulysses. Is it similar to this? http://www.typora.io/#feature

Can’t imagine another single mode markdown editor. If it’s something different, we can download a demo version to check it out.

We haven’t even decided if we want Markdown or not. It really depends on our audience… Markdown is for the more geeky part of the population, eventually. We can provide markdown as an export format, of course, but not sure about offering it as an additional editing mode.

2 Likes

Oh, I thought whatever we already had was Markdown… But basically what I meant was editing modes with whatever we have and one for wyiwyg.

I meant we’re not sure if we will keep two modes. More like a single WYSIWYG editor. Think the Google Docs editor.

1 Like

I one-up this as the best solution. WYSIWYG in the editor, markdown on export if that’s your thing.

The spirit of outliners/workflowy is simplicity, smoothness, minimizing distractions (for your eyes and your brain). There’s something funky and clunky about markdown in this type of app.

1 Like

I agree with you, but I can understand some people would feel like Markdown is the smoother way to write. We suppose WYSIWYG will be the majority, so we’ll stick with that.

Also, Markdown is quite something to learn for WYSIWYG users, whereas Markdown users mostly don’t need to learn WYSIWYG. Minimizing learning is the whole point of WYSIWYG, and once you know the shortcuts, speed isn’t a problem either.

3 Likes

Markdown is clunky as it is smooth, but I’d the w-editor allows me to do things as quickly as markdown, then that’s good with me, and what you’d described seems to fit the bill. The fewer amount of cursor-dependent actions(partly from having markdown, haha), the better.

edit: added some words and letters. Yikes.

1 Like

Perfect :thumbsup: !

Similar, yes. Ulysses does retain the mark-up symbols while also displaying the style. Likely some other differences. But you get the idea.

I’ve seen this style in another iOS app called “Bear” (that just came out).

It feel like it takes a little time to get used to that. I’d rather not see the star around bold text, it’s like seeing < b >bold < /b > in HTML… maybe that’s just me :confused:.

2 Likes

I like Github’s WYSIWYG editor. Adding a link works great, as it highlights the word “url” within the parenthesis, so that way you can paste in the desired url inside it.

1 Like

My current use case needs Markdown or something similar (non-WYSIWYG) to be an option:

I’m currently importing a large amount of content from word processor files into Dynalist. I’ve written a combination of Python and Bash scripts to automate the process as much as I can. It’s easy to generate plain Markdown text (with leading tabs) which I can simply paste into Dynalist. If WYSIWYG were the only option, my scripts would need to be more complicated.

That said, for regular, non-import use, I think WYSIWYG would normally be more convenient.

PS: Once I get the major bugs worked out, I’ll share the scripts if anyone is interested.

3 Likes

Super cool! :smiley:

The “Share & Showcase” category will be perfect for that purpose!

1 Like

A button for inserting the respective Wikipedia article for a term would be nice.

1 Like

Maybe Dynalist could use something like DokuWiki’s InterWiki Syntax?

Then, to link to https://en.wikipedia.org/wiki/Outliner, we would be able to simply link to [wp>Outliner]

2 Likes

Interesting, I’ve never heard of the InterWiki links before. Is there a standard or do people just implement their own?

I don’t think there is a standard. For example, Wikipedia also supports InterWiki links, but in a different format:

1 Like