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
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 T
EX 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.
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.
4 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
Thanks. That looks good to me. I just jumped on Joplin leaving hopefully Evernote behind but I still do not dare take my notes life during meetings because of the checklist use case. I have been looking around now for the past 2 days to see if something is available to solve this simple use case:
a) make a list on the desk top during preparation of a meeting
b) look at the check list during the meeting and check out stuff that do not need to be address (on the mobile)
c) quickly add a new though that need to be checked later during the same meeting (on the mobile)
d) take in parallel notes about what is said scrolling up and down
Your solution come to the closest up to now to make this possible without much hassle. On my side I am not for markdown purity and would tend to your solution but possibly without even the x when checked.
Is this still in the pipeline? Or is there another approach being worked on to facilitate this? I looked already at a lot of WYSIWYG discussion but I understood that a solution like on the desktop for the mobile is not possible/reliable due to a technical barrier. So what you prototyped seems an pragmatic approach that would work for me.
Thanks again.
What you're looking for could possibly happen in the future, if things go well then within this year itself. A rich text editor(wsyiwyg) for mobile is in the list of ideas for GSOC 2024 and if someone's proposal for that idea gets selected then we can look forward to it.
Cool! Wysiwyg would be grand but what I like in the proposal here is that it is simple, does most of the job for taking notes on mobile and probably significantly easier to implement on all mobile platform.
