Notes: Render check boxes / checklist / todo [$50 awarded]

[mogoh]

Hello,

can you copy the feature from google keep to add check boxes?

I could imagen it like this: A note contains at the beginning of there lines:
[ ] Lorem
[x] Ipsum

Then it gets rendered as a checkbox. So notes just needs to parse the first 4 Characters of every line.

---

The $50 bounty on this issue has been claimed at Bountysource.

[stefan-niedermann]

Then it gets rendered as a checkbox. So notes just needs to parse the first 4 Characters of every line.

will not work if you have checkboxes in a ordered or an unordered (or nested) list

[mogoh]

I am not sure if I understand what you mean. As far as I understand, a note is just a text file. What list are you talking about?

[stefan-niedermann]

• [ ] list item 1
• [x] list item 2

- [ ] list item 1
- [x] list item 2

[mogoh]

Well, is it possible to use Github flavored markdown?

[MWin123]

I would appreciate checkbox support like Google Keep has. You click on the "More" button of a note and then "Show checkboxes" which basically starts a list that has checkboxes as icons.

Nextcloud Notes already supports list with - or *. Couldn't we start a list with[ ] or [x] at the beginning of a new line and replace it with a checkbox icon? Then add an onClick that changes the empty to a full checkbox (or the opposite) if that's possible.

will not work if you have checkboxes in a ordered or an unordered (or nested) list

In my opinion you could just ignore cases like that. Nested lists don't work anyway at the moment unless I got the syntax wrong.

That's the feature I'm missing most from Google Keep. It was my favorite app for simple lists like shopping lists.

[GLLM]

+1 for this one ....

I think this one would be on top of my list :)

[jancborchardt]

Yes, this would indeed be nice. We could for example render a browser checkbox over the [ ] brackets which would toggle the x inside.

[natrius]

Any update on this? Something like in github itself would be nice. I found this one

https://blog.github.com/2014-04-28-task-lists-in-all-markdown-documents/

[korelstar]

No, sorry. That's indeed a nice feature, but nobody had time for implementing, yet. Some help is very appreciated though. On the other hand, it could be advantageous to wait for #204.

[Larsene]

204 : Pen is a great alternative to simpleMDE (support for image, small popup toolbar if you need it), but it doesn't support checkbox either.

[sscholl]

+1
Same as on Google keep is appreciated

[poikilos]

If the Notes app for Nextcloud implements this feature, then a Nextcloud-based Notes app for Android/iOS could used the feature, and awesome functionality would ensue.

[pierlon]

I'd like to take this on. One issue to note, however. The editor (SimpleMDE) doesn't support checkboxes, so I'm seeing several choices:

• Extend SimpleMDE to support checkboxes
• Switch SimpleMDE with another markdown editor that supports checkboxes

I'm not sure which one to make :man_shrugging:.

[korelstar]

Nice!

Please be aware that SimpleMDE isn't maintained anymore and we plan to switch to another editor due to this (see #204). Hence, extending SimpleMDE isn't that helpful. I think we should first switch to another editor and at best, that editor supports checkboxes. But if not, it would be nice if you could extend that editor with check boxes.

In the meanwhile, you could help analyzing existing alternative editors. We already collected some in #204, but we still need to test them and compare their functionality.

[tnyeanderson]

Here we go.... no click functionality yet, but a pure CSS solution that works for list items up to two levels!

Usage

- [ ] List 1
- [x] List 2
    - [ ] List 2.1
        - [ ] This list item will still render as text :(

CSS

.cm-formatting-task {
    position: relative;
    display: inline-block;
    width: 2em;
}

.cm-formatting-task.cm-meta::before {
    content: "\2610";
    font-size: 2em;
    background: white;
    position: absolute;
}

.cm-formatting-task.cm-property::before {
    content: "\2611";
    font-size: 2em;
    background: white;
    position: absolute;
}

Paste it in the inspector-stylesheet to test it out!

JS

Click functionality works now, but codemirror doesn't see it, so the checkbox doesn't reflect the change, and the changes aren't saved :( I have to look into editing the contents of the codemirror instance programatically....

function toggle_checkbox_state (el) {
    var $el = $(el);
    switch ( $el.text() ) {
        case "[x]":
            // CHANGE: Needs to actually edit the text in a way that CodeMirror sees it
            $el.text("[ ]");
            break;
        case "[ ]":
            // CHANGE: Needs to actually edit the text in a way that CodeMirror sees it
            $el.text("[x]");
            break;
    }
}

function initialize_checkboxes () {
    $('.cm-formatting-task').off("click.toggle_checkbox").on("click.toggle_checkbox", function (event) {
        event.stopPropagation();
        event.preventDefault();
        toggle_checkbox_state(event.target)
    });
};

// CHANGE: This is inefficient. Hook into when a new checkbox is created and only initialize that one if possible
setInterval(initialize_checkboxes, 3000);

ANY OF THIS CODE CAN BE USED FOR THE SOLUTION, AND THE BOUNTY WILL BELONG TO THE PERSON/PERSONS WHO IMPLEMENT IT. I RESERVE NO RIGHTS TO THIS CODE.

Let's get this one done :)

P.S. - This will work in EasyMDE too, if we decide to go with that!

EDIT: Formatting and clarification

[tnyeanderson]

Unrelated, but this little bit of CSS increases tabsize to better differentiate list items:

.cm-tab {
    width: 2em;
}

[tnyeanderson]

Okay, fully working! I'm not familiar with the codebase, and I'm not sure where this code should go, but it will give you fully functioning checkboxes two levels deep... with click functionality!

CSS

.cm-formatting-task {
    position: relative;
    display: inline-block;
    width: 2em;
}

.cm-formatting-task.cm-meta::before {
  content: "\2610";
  font-size: 1.7em;
    background: white;
    position: absolute;
}

.cm-formatting-task.cm-property::before {
  content: "\2611";
    font-size: 1.7em;
    background: white;
    position: absolute;
}

/* Recommended tab size increase for readability */
.cm-tab {
    width: 2em;
}

JS

var cm = $('.CodeMirror')[0].CodeMirror;

function toggle_checkbox_state (el) {
    var $el = $(el);
    var doc = cm.getDoc();
    var index = $el.parents(".CodeMirror-line").index();
    var line = doc.getLineHandle(index);

    var newvalue = ( $el.text() == "[x]" ) ? "[ ]" : "[x]"

    // + 1 for some reason... not sure why
    doc.replaceRange(newvalue, {line: index, ch: line.text.indexOf('[')}, {line: index, ch: line.text.indexOf(']') + 1});

    cm.execCommand("goLineEnd");
}

function initialize_checkboxes () {
    $('.cm-formatting-task').off("click.toggle_checkbox").on("click.toggle_checkbox", function (event) {
        // Prevent double and triple clicks glitching
        $('.cm-formatting-task').off("click.toggle_checkbox");

        event.stopPropagation();
        event.preventDefault();

        toggle_checkbox_state(event.target)
    });
};


$(document).ready(function () {
    // Initialize on page load
    initialize_checkboxes();
    // Initialize when CodeMirror fires "changes" event (every time a letter is typed).
    cm.on("changes", initialize_checkboxes);
});

You can test it out in the JS console right now!

Known issues

Bugs

• Click at the very bottom of a checkbox affects the box below it (Brave/Chrome, Firefox)

Missing

• Doesn't have the "gray text/crossout line/completed items at bottom" paradigm that Keep has (though I do have some ideas)

EDIT: Again, this should be compatible with EasyMDE should we choose to use that

[iSpeeX]

Hello, you aklready did a pretty good work, nice mate !
Any news about the implementation ?

[tnyeanderson]

All the features are there now, including mobile support, but I went to fix MORE indentation issues (really gotta figure out what Atom's problem is....) and did them directly through github, so I am not able to sign the commit :( I am at work without access to Git so I'll have to wait until I get home to sign off (unless there's a way to do that through Github)?

[iSpeeX]

You edited the files directly from GitHub ?
For the rest, I can say only one thing : thank you !

[tnyeanderson]

There was one file that I edited in my last commit, because the indentation was off (don't want to mess up your pretty code!) So yes, I stupidly fixed that directly in Github, and now can't sign off until I get home...

Live and learn! Check back in about 5 hours for the signed commit :)

[korelstar]

Fixed by @tnyeanderson in #303, thank you very much! Version 2.6.0 with this functionality is just released to the app store.

@tnyeanderson Please feel free to claim the bounty on bountysource

[vpelcak]

Hello.
This unfortunately doesn't work on mobile app.

[stefan-niedermann]

@vpelcak if you mean the Android app: It is a separate project and it you can toggle the checkboxes in the view mode. Achieving the same is unfortunately quiet complex. While we have several ideas how to implement this, it will for sure take some time to find the best way and solve the issue completely.

However, let's not flood this issue as it is not relevant to it (in this repository)