Add command to toggle clean mode

[aphymi]

This PR resolves #1500 by adding a built-in editor command to toggle 'clean mode', i.e. the feature that hides markdown syntax like *s when not focused by the cursor.

The goal of having clean mode disabled is to have both the markdown syntax and formatting simultaneously, except for places where that would be overly repetitive (e.g. tables), in which case the syntax is prioritized.

Implementation-wise, I largely mimicked the Toggle Dark Mode command for the toggling behavior, creating a cleanMode UI option, defaulting to true. When false, almost every instance of markdown syntax being hidden is disabled, as if everything on the page was alt-clicked or highlighted. The only exception is lua directives (${...}); their behavor is unchanged whether clean mode is enabled or not.

There are, I think, two questions left in my mind before I'd call this done:

1. Should lua directives be excluded from this? The other reasonable option, I think, is giving them the same behavior as images (and other inline content), rendering both the syntax and the result. I poked at that a bit, but it behaved oddly.
2. Should the color of syntax characters change with clean mode disabled? The current --meta-color in the dark theme is a rather angry red, giving the impression that there's some kind of error with syntax characters. It'd be nice if that was less the case with clean mode disabled, where syntax characters are an expected part of the page. This can already be changed on a per-user/space basis with space styles, of course.

[MrMugame]

The darkMode example above sets a really bad precedent. I don't know what @zefhemel thinks of this, but IMO, this isn't at all how this should be done. (Also the toggleDarkMode is bad imo, it gets the option from the ui options and sets it in the clientstore). At least client.clientSystem.localSyscall should have been used.

The clientstore should be solely used to cache the option in the browser, so it persists across reloads. It should never be touched inside of here and most definitely not by constructing some new syscalls. The code in here should only look at the ui option and update accordingly. The editor plug should set that ui option. (Now this is more of a personal opinion, but I think it should also be darkMode: "system" | "dark" | "light", I think that reflects it better, but that really doesn't matter and I'm unsure if changing that may break some plug code). The vimMode option seems to do all of this properly.

This isn't your fault, I just think this should be changed. It may work right now, but that's not really an argument right here.

[aphymi]

Thank you for the explanation! I understand the flow much better with that bit of info. Reorganised it in 3ab7113; how's it look now?

[PowerUser64]

Maybe it would be good to rename this option. Clean mode might be what it's called someplace internally, but I think we might want to come up with a different name to present to users. I was confused when I saw #1500 at first - I thought "ooh, clean mode - what's that?" After seeing similar confusion in @MrMugame's comment above, I think it's not just me. Perhaps calling it something like "inline rendering" it would be more immediately obvious. Thoughts? Feel free to share other name ideas too if you think of any.

[MrMugame]

My two cents

Should lua directives be excluded from this? The other reasonable option, I think, is giving them the same behavior as images (and other inline content), rendering both the syntax and the result. I poked at that a bit, but it behaved oddly.

How did it behave? My guess would be some margin: -1em 0; problems. It's all very finicky. But overall, that behavior would seem the most intuitive to me.

Should the color of syntax characters change with clean mode disabled? The current --meta-color in the dark theme is a rather angry red, giving the impression that there's some kind of error with syntax characters. It'd be nice if that was less the case with clean mode disabled, where syntax characters are an expected part of the page. This can already be changed on a per-user/space basis with space styles, of course.

Maybe a data attribute on the html element similar to the theme, so people can style accordingly

[aphymi]

@PowerUser64

Perhaps calling it something like "inline rendering" it would be more immediately obvious. Thoughts? Feel free to share other name ideas too if you think of any.

Yeah, "clean mode" isn't necessarily intuitive; I'd be up to change that. 'inline rendering' feels too nonspecific. Maybe 'Toggle Markdown Syntax Rendering'? It's a bit of a mouthful, but it's probably the clearest option?

@MrMugame

My guess would be some margin: -1em 0; problems. It's all very finicky.

Oh! Yes, that was exactly it. Don't know how I missed that.

But overall, that behavior would seem the most intuitive to me.

Fair enough! I've added that in b1d856c. The only catch is that the rendered result still hides while you're editing the directive. Lua blocks seem to have a flash of an incorrect render every refresh before they settle down, but that gets really jittery and ugly when a refresh happens with every keystroke, so I chose to make them hide until your cursor leaves the directive.

[MrMugame]

Lua blocks seem to have a flash of an incorrect render every refresh before they settle down, but that gets really jittery and ugly when a refresh happens with every keystroke, so I chose to make them hide until your cursor leaves the directive.

That's something to consider with inlined content (![]()) in the current/"normal" mode, because it's facing the exact same problem and this also currently causes a bug with autocomplete not working. That's would be a pretty easy fix. Unsure what @zef thinks.