Interactive checklists on frontend

[mattheu]

Resolvable checklists just like github.

Read-only markdown checklists are supported as of #429 and able to be supported in the block editor via the todo-list-block plugin as of #513, but neither solution permits checking off items from the frontend.

[rmccue]

This doesn't seem to be possible with marked, but if we switch our Markdown parser to https://github.com/markdown-it/markdown-it we can use https://github.com/revin/markdown-it-task-lists

[rmccue]

• Test
• Check
• Mixed
• List
• Extras

[rmccue]

Created https://github.com/humanmade/react-tasklist for the frontend interactions. Still need to do the following:

• Parse task list out using Marked's extensions
• Attach Tasklist instance to HTML somehow (might need react-html-parser)

[rmccue]

It looks like Interweave might be a good solution for the HTML parsing, and would solve it all at once. This uses the browser's DOM implementation rather than loading a massive external library, and we can add our custom components fairly easily.

[rmccue]

Using Interweave is a little painful, but it could be worse. It doesn't let us match a whole element, only text, which seems like an oversight. That said, it'll be useful for @-mentions and similar if we want that (I do), so I'll see about giving it a try.

[jennybeaumont]

bump :)

[missjwo]

+1 This would be super useful with the Google Doc CS EMEA Notepad in terms of adding a actionables section to the notepad and have it copy across as checkboxes.

https://docs.google.com/document/d/1m7GzNeoIIW8TGnLXyv7WfXIUpmmDnHHTS-fscZO68uk/edit#

[jennybeaumont]

Would love to see this get prioritized! Hugely useful for creating task lists/actionables for notes of all kinds. (JennyW just beat me to it, but this is a really really important feature), thnx!

[svandragt]

I guess the next natural improvement would be to assign those task by mentioning a person and then a task list, to make this work effectively. Just wondering if it's useful without that.

[jennybeaumont]

Agree that would be the natural next step. Still useful without it though as we can refer back to these lists for review. Helps with visibility and team accountability (if not with individual accountability).

[smckeown]

It would be really useful to get this up-and-running. As @jennybeaumont says it helps with accountability. Sumaiya and I have started having a regular People call and a list of actions at the end of a post lets us check in on where things are. See: https://operations.hmn.md/2020/01/20/people-call-notes-20-01-2020/

[rmccue]

I'll try and get to this in the coming weeks; I invested a bunch of time into it and spun up a React component for it, but the integration turned out to be painful.

The main problem was tracking which list item was which in Markdown. However, I believe the Markdown parser we use might have been improved and provide a way to do this now (markedjs/marked#1440 and markedjs/marked#1430)

[rmccue]

The main problem was tracking which list item was which in Markdown

As it turns out, this is still a problem. However, we can at least have read-only lists, where you have to edit the post manually; at least it will display task lists correctly.

Seems like a good compromise until we can work out some way to add editable items properly.

[rmccue]

Read-only checklists are now deployed onto the HM network.

[jennybeaumont]

I would love to give this a new bump :)
The read-only checklists are a good start, but one blocker is the ability to add checklists from the admin (Gutenberg). Also, being able to check a checkbox without editing the post would be a huge plus.
(it's my birthday soon, just sayin)

[kadamwhite]

Reopening because @jennybeaumont quite rightly pointed out that #513 still doesn't support frontend editing. I'll adjust the ticket to reflect the more narrow target scope