Any way to support a checkbox style list?

[SnidelyWhiplash]

trafficstars

Hello, I've just started integrating your lib into my app and so far it has been the best option for a rich content editor in RN I have found, great job!

I'm wondering if there's a way we can insert a "checkbox" style list, eg:

• [ ] another thing
• [ ] one more
• [ ] some item

I've tried adding my own button with a handler like: this.editor.insertHTML('<input type="checkbox" />') and it inserts it, but always at the current cursor position (makes sense) and it also leaves the cursor in a weird offset location after insertion.

Then I tried: this.editor.insertHTML('<ul class="checkboxes"><li></li></ul>') in hopes that i could just style that UL differently (which I think might work) but the problem with that approach is that it ends up highlighting the default "insertBulletList" editor button instead of my custom button.

Both my approaches seem hacky, so I was wondering if anyone had a more legitimate solution for something like this?

Thanks!

[SnidelyWhiplash]

Also, FWIW, it seems that if you wrap the checkbox input with <span contenteditable="false"> .... </span> then it will allow you to toggle the checkboxes without entering edit mode, while clicking anywhere else will engage the editor, which I think is the preferred UX.

[SnidelyWhiplash]

Hey @stulip I can offer a $100 bounty on this if you're willing/able to prioritize it. This would be a huge win for our implementation. Cheers!

[stulip]

Sorry, this function is very difficult to implement, I am really trying.

[SnidelyWhiplash]

Thanks @stulip, I'm happy to help test it out along the way! Will try the latest (work in progress) commit and see if I can help debug too.

[cristianoccazinsp]

Also looking for this. Don't really need to be an interactive checkbox, but it would be cool to have a replacement for the <ul> that uses a checkbox style.

[stulip]

@SnidelyWhiplash @cristianoccazinsp 1.6.0 has been released, the checkbox list function has been added, and there are currently some detailed problems, which will not affect the use.

[SnidelyWhiplash]

Hi @stulip, sorry for the delay, busy with holidays. I'll test the latest release now – judging by what's on the demo page it already looks very promising! Thanks a bunch for tackling this, I'll report back soon. Cheers!

[SnidelyWhiplash]

Hey @stulip thanks again for putting some serious effort into this feature. It feels really close! I'll outline a couple bugs here (imo in order of priority), they're reproducible on the demo as well.

1. If you have a bunch of text (formatted or not) and then enter a newline and hit "insert checkbox", it will indent everything above it and insert the checkbox at the very top, essentially "checkboxing" everything
2. Sometimes I think the contenteditable="false" is getting removed from the wrapper span around the checkbox. I haven't been able to consistently reproduce this, but it does happen.
3. If you have some formatted text at the end of a checkboxed line (eg, [ ] *bold text*) and then hit Enter, it will insert a newline with a checkbox, which is good. But if you hit Enter again it will insert a newline but leaves an empty checkbox line at the end of the checkbox list.
4. If you have three lines in a row of plaintext, highlight them, and then hit "insert checkbox" it only converts the first line to a checkbox element. With <ul> and <ol> it will convert all of the selected lines to a checkbox (this is more of a minor issue)

I will keep testing, I think there was one other small thing that I can't recall at the moment. Thanks again so much for helping, this is honestly very close to working great! The bounty still stands, and in fact my boss said I can bump it to $200, possibly a bit more if we can get it all working smoothly (Venmo or PayPal preferred).

Thanks again!

[SnidelyWhiplash]

Hey @stulip, hope you're doing well! I just wanted to see if you saw my comment above, we're really hoping to incorporate checklists into our project and it's so close to perfect!

As mentioned above, we're happy to help finance this feature as much as we can (we're a startup of just three friends working from home, so we don't have a ton but we want to help).

If you're curious, we're currently using this library in production (without checklists atm) here --> https://wribbn.com It's available in the "Notes" section once you save an item to a list.

[SnidelyWhiplash]

Hello @stulip I know it's been a while and I'm sure you're busy, but I wanted to bump this again on the off-chance you'd be willing to take another look at implementing this feature. Happy to negotiate a bit more on price if that helps. Thank you!

[stulip]

I'm very sorry, but I'm looking for some time recently to study and study.