Mobile: In-editor decorations

:warning: This discussion post applies only to the mobile beta editor, which uses CodeMirror 6.

Summary

CodeMirror 6 supports HTML decorations. These can be used to add HTML checkboxes to the mobile (beta) editor!

Demo: CodeMirror Decorations
CodeMirror: A checklist (markdown) with three items. Each item has a checkbox widget to the right of the markdown for the item.

This may also allow showing rendered TEX instead of its source inside the editor. This could be similar to ViMTeX's concealing behavior in which TeX is partially rendered on lines without the cursor:


I expect TEX concealing to be significantly more work than the checkbox decorations.

Design Choices

It might make more sense to display the checkboxes in the gutter next to each item. Or perhaps it might make more sense to conceal the markdown (only show the HTML checkbox).

For example, the 'x' could be replaced with a checkbox.
Checklist, checked items only show checkboxes
The disadvantage of this is that it isn't clear whether an 'x' or a ' ' is causing the checkbox to be checked.

I would like feedback on this before implementing this in Joplin.

2 Likes

I'll start by stating my personal opinion on this. I like having a richer display of markdown, I think it makes documents easier for the eyes to parse. But I don't typically like hiding markdown characters. Markdown is meant to be clear to a user without any sort of highlighting and hiding important characters can just be confusing.

With that said, I tried your checkbox demo and it works extremely well. I'd encourage others to play around with it as well.

The above arguments don't really apply to mobile though, where it can be hard to place a cursor and edit with markdown syntax. So it would be really interesting to see how far you can take demos like the checkbox one above. I suspect checkboxes are one of the few places that you can get away with hiding the markdown in a way that doesn't result in building a WYSIWYG editor on top of markdown.

5 Likes

I think this can be quite a polarising topic, there has been comments on this kind of thing before when the app has changed.
It boils down to those who want to use markdown as code vs those who want to use a hybrid style editor.
Personally I subscribe to the "code" camp where I like to have syntax highlighting and all formatting marks shown so I can easily edit things.
However there are a lot of people that prefer the Rich Markdown, Typora/Marktext approach where the formatting marks are hidden etc.which makes it much easier to instantly read but sometimes more difficult to edit.
As @CalebJohn already said, this makes a lot more sense for mobile as well, I can certainly see the benefit in being able to quickly tick and untick items like this rather than having to open the keyboard but then again this is already possible in the main preview screen so the benefit is only provided when actively editing the note, not just marking done items. (If people hadn't noticed, as I didn't intitially, the tickboxes aren't static, you can interact with them by clicking).

There isn't a right answer here so I think it would be good to get more opinions. I guess it might be nice as an option - we don't currently have any real appearance modification in the mobile app at the moment so maybe it could be added as an optional config option.

If we were going with this option I think it is best to go with one or the other, not the mixed approach - i.e. if tickboxes are shown then then ideally we should remove all trace of the markdown leaving a bare box, if that is even possible.
I find the concept of a box inside the markdown tags is a bit confusing, the [ ] to me is a way of showing the "box" and to have a second box inside the first doesn't really work for me (it almost looks like it should be [[x]] in markdown.

It is certainly interesting and worth exploring the possibilities though, would definitely like to hear some more voices on it.

6 Likes

I personally feel that interface separation of mobile/desktop editors is inevitable.
With different screen orientation, size, touch interface/keyboard, etc, at some point, any middle ground solution might become ill-fitted for both platforms.

I agree with that. Replacing markdown tags for decorations would be very convenient for mobile use. While on desktop, armed by keyboard and extra screen space, users can prefer more control over markdown syntax (without the need to be rendered/decorated).

4 Likes

I feel like checkboxes don't need to be displayed in markdown syntax for my personal preference. I'd also agree to totally remove the markdown syntax as it happened to me too often with your demo (on mobile) that instead of ticking I got the cursor to the brackets or the hyphen. I eventually have to blame my fingers or small phone for that. I think it could play very well together with the toolbar.
For any other element I think I'm more on the pure markdown/tex side. Let's see. It is my personal preference and I might change my opinion with another convincing functional demo.

1 Like

Thank you for the feedback!!!

1 Like