Checkbox Support In Preview Mode

[tnyeanderson]

THANK YOU EVERYONE FOR THE HARD WORK ON 3.0!

Describe the bug
Checkboxes are not rendered properly in Preview mode

To Reproduce
Create a note with checkboxes

- [ ] One
- [x] Two

Go to preview mode

Expected behavior
We should see this (essentially):

<ul>
  <li>
    <input type="checkbox" disabled>
    <label>One</label>
  </li>
  <li>
    <input type="checkbox" disabled checked>
    <label>Two</label>
  </li>
</ul>

Instead we see this (essentially):

<ul>
  <li>[ ] One</li>
  <li>[x] Two</li>
</ul>

Server (please complete the following information):

• Notes app version: 3.0.0
• Nextcloud version: 16

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tnyeanderson]

Looks like we just have to add this plugin!

https://github.com/mcecot/markdown-it-checkbox

[korelstar]

Yes, I think that's it. Just hadn't the time / prior to look at this plugin. Could you write a PR on this? That would be cool :-)

[tnyeanderson]

I'll get to work on it. Should have one ready by the end of the week if time allows!

[tnyeanderson]

We need this issue to get fixed before we implement here. Otherwise the checkboxes will be clickable which should not be possible in preview mode. There are a couple pull requests open at the moment for this issue, but I'm not sure when they will be accepted. The last activity was 4 years ago.

We will also need this one fixed because our syntax includes a hyphen. That might be fixed by this, but that PR could cause rendering weirdness as well.

It's not looking good at the moment...

[tnyeanderson]

I'm curious why we chose to use Markdown-It and not the built-in previewRender config option in EasyMDE. Seems like an unnecessary library when the functionality is already there in the editor library...

[korelstar]

Thanks for your research! 👍
I've implemented the preview mode using markdown-it, because the Nextcloud Markdown-Editor uses markdown-it, too. And that editor was often referenced in the issues, here. But I'm fine with switching to marked (this is what EasyMDE uses), if the result look similar.

[tnyeanderson]

We should definitely be using EasyMDE's preview functionality for this. See #329

[sciurius]

A year has gone by... NC had three major releases. Notes went from 3.0.0 to 3.6.0... Any progress here?
Since I make extensive use of checkboxes this issue is quite annoying.

[korelstar]

No, I've focused on other features and on fixing bugs. Would be glad if you could contribute a PR on this!