Where the idea in that thread is using a checkbox toggle to show/hide completed items, so that Joplin can be used as a shopping list (also reversing the checkbox action for the use case there).
As the OP points out, this could also be useful for other types of lists.
In my case, I use Joplin for weekly and monthly GTD lists, and like the idea of hiding items that are completed.
Specifically, I use Rich Markdown (so the Preview Pane is turned off, and only the Editor Pane is needed), so am applying this within the Editor Pane.
I had a working solution for short notes using the katex marker as a toggle, seeing as I don't use katex otherwise. However, I ran into a complication with a long note, as it seems Electron not only adds new elements as you scroll, but removes them from the DOM also, meaning the toggle was being removed depending on where you scrolled to.
I've since found another solution using the title of the note, which does not change.
If anyone else thinks this could be useful, you could try out adding this to userchrome.css, but note again that this is specific for using the Rich Markdown plugin (thanks and FYI, @CalebJohn) and the Editor pane.
/* Hide the completed checkboxes in the Editor pane
Instructions added to the top of the note:
*Use `[Hide x]` exactly at the end of the note title to toggle the show/hide of completed checkboxes. Remove some part of this if you don't want to hide completed checkboxes.*
*/
div:has(input[value$="[Hide x]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
display:none;
}
/* Just a visual indicator to make it clearer that completed checkboxes have been hidden in this note */
input.title-input[value$="[Hide x]"] {
color: limegreen !important;
}
Maybe this is useful for some. Happy to hear any feedback or other suggestions.
As a note, there are potential glitches with the initial Ctrl-clicking (to mark complete/incomplete) or even clicking to type after a toggle change, with the cursor being "elsewhere" - this seems to be related to the display:none on the rows and I think is an Electron thing?
If this bothers you, you could switch to visibility: hidden or opacity:0.2 which keeps the lines in the same place at least. The latter may be better as you are less likely to accidentally delete something.
Could be worth trying out both and see what you can live with. As I said, happy to hear any other suggestions for removing (but being able to turn back on) visual clutter for to-do lists.
This is from the editor that Joplin use (codemirror 5). The editor keeps track of all content inside itself and places the cursor accordingly. The editor isn't aware of content appearing/dissapearing like this and loses track of the cursor as a result. It's something that can be worked around inside of plugins, but that doesn't help CSS tricks like this unfortunately.
I went ahead and tweaked a bit more to give myself different options for when I want to completely hide or just reduce visibility and space taken up by completed checkboxes (sometimes lists are nested and the context of the completed checkboxes in the level above is needed).
Sharing as it could give others ideas for using toggles and tweaking their Editor pane how they like
/* Hide the completed checkboxes in the Editor pane
Instructions added to the top of the note:
*Use `[Hide x]` (fade out) or `[Hide y]` (display none) or `[Hide z]` (shrink) exactly at the end of the note title to toggle the show/hide of completed checkboxes. Remove some part of this if you don't want to hide completed checkboxes.*
*/
div:has(input[value$="[Hide x]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
/* Keeps the line there but blank - potentially confusing as the cursor will still place in the text and can delete/edit */
/* visibility: hidden; */
/* Better solution as you can still faintly see the text but all the focus is on what is not yet done */
opacity:0.2;
}
div:has(input[value$="[Hide y]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
/* Causes cursor jumps when toggled on/off the first time */
display:none;
}
div:has(input[value$="[Hide z]"]) + div pre.CodeMirror-line:has(span.cm-rm-checkbox.cm-property) {
font-size:10px;
line-height:0.8em;
opacity: 0.4;
}
/* Just a visual indicator to make it clearer that completed checkboxes have been hidden in this note */
input.title-input[value$="[Hide x]"] {
color: limegreen !important;
}
input.title-input[value$="[Hide y]"] {
color: orange !important;
}
/* nice teal */
input.title-input[value$="[Hide z]"] {
color: #3fa298 !important;
}
