Improvements to the tasklists plugin

[asmeurer]

Context

I would suggest two improvements to the tasklists plugin:

• [ ] Don't add disabled="disabled" to the checkboxes. This makes it so you can't click them. But if you are going to add a list of check boxes to a page, it would be useful if people can actually click them. Since this might not be desired in all cases, a configuration option might be useful, or some syntax to allow or disallow it.

• [ ] Add style="list-style: none; styling to the ul. This prevents the bullet point from appearing. This is how it works on GitHub, for instance

• [ ] Item 1

• [x] Item 2

Proposal

No response

Tasks and updates

No response

[welcome[bot]]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! :hugs:
If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.
If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).
Welcome to the EBP community! :tada:

[chrisjsewell]

Cheers, happy for a PR 😄

[asmeurer]

Thoughts on the disabled thing? I'm not sure how people are using this plugin if that would break someone's use-case, like if they want to show a static set of checked and unchecked boxes. For my use-case, I want to create a checklist for contributors so I want it to be checkable.

[asmeurer]

Not sure I understand how markdown-it works. I thought this would fix the second bullet point:

diff --git a/mdit_py_plugins/tasklists/__init__.py b/mdit_py_plugins/tasklists/__init__.py
index 40a6d67..d261124 100644
--- a/mdit_py_plugins/tasklists/__init__.py
+++ b/mdit_py_plugins/tasklists/__init__.py
@@ -66,6 +66,10 @@ def tasklists_plugin(
                 tokens[parent_token(tokens, i - 2)].attrSet(
                     "class", "contains-task-list"
                 )
+                tokens[parent_token(tokens, i - 2)].attrSet(
+                    "style", "list-style: none;"
+                )
+

     md.core.ruler.after("inline", "github-tasklists", fcn)

But it doesn't seem to work.

[asmeurer]

I guess there already is an enabled flag for the first point https://mdit-py-plugins.readthedocs.io/en/latest/#task-lists. I can't tell how I'm supposed to translate that to a myst conf.py flag, though.

[chrisjsewell]

I can't tell how I'm supposed to translate that to a myst conf.py flag, though

ah well that's different, for that we can add a configuration in myst-parser

[chrisjsewell]

https://github.com/executablebooks/MyST-Parser/pull/686

[asmeurer]

The second point about the bullet points can be worked around by adding

.contains-task-list {
    list-style: none;
}

to the custom.css.

[asmeurer]

Another thing I've noticed with GitHub is that the checkboxes themselves act as the bullet points. This means that all the text in that bullet is aligned to the right of the checkbox (I've converted the OP items to checkboxes to demonstrate this). The checkboxes from this extension don't work like this. They just render as a checkbox inline with the text.

I'm not clear yet what the difference is here, if it's the structure of the HTML or some CSS or something else.

[asmeurer]

Figured it out. For the correct wrapping you need

.task-list-item-checkbox {
    margin: 0 0.2em 0.25em -1.4em;
}

Don't know if these CSS things should be done here or fixed in the individual themes.