Release 4.8 breaks task list styling

Notice the missing “task-list-item” class on the <li> elements.

Markdown:

- [x] Task 1
- [ ] Task 2
- [ ] Task 3

Docsify 4.7.x Output:

<ul>
  <li class="task-list-item"><input type="checkbox" checked="">Task 1</li>
  <li class="task-list-item"><input type="checkbox">Task 2
  <li class="task-list-item"><input type="checkbox">Task 3
</ul>

Docsify 4.8.x Output:

<ul>
  <li><input checked="" disabled="" type="checkbox"> Task 1</li>
  <li><input disabled="" type="checkbox"> Task 2
  <li><input disabled="" type="checkbox"> Task 3
</ul>

Necessary code was deleted here (lines 299-310): https://github.com/docsifyjs/docsify/commit/a39b2147334d2ee81ed9da239c437706f56344f1#diff-d73f215ac772d2673dd8c51f24976e4eL299

[timaschew]

We should add some test cases. I saw similar problems, for instance: https://github.com/docsifyjs/docsify/issues/717

[jhildenbiddle]

Thanks for the quick reply, @timaschew.

The inline <svg> suggestion was made to address issues with styling checkboxes in a way that will work with all supported browsers. The custom checkbox demo is interesting, but it doesn’t work in all browsers (most notably IE and Edge, but also older versions of Firefox). Technically the demo shouldn’t work in any browsers because pseudo-content should only work on container elements. From MDN web docs:

Note: The pseudo-elements generated by ::before and ::after are contained by the element’s formatting box, and thus don’t apply to replaced elements such as <img>, or to <br> elements.

An <input> element is a replaced element and not a container element, so pseudo content shouldn’t render. I’m guessing the -webkit-appearance declaration makes this possible and that Firefox decided to update their behavior to match (it only works in Firefox 63+). Given the issues in IE and Edge, styling the <input> directly is a non-option if we want the presentation to be consistent across all supported browsers. Inline <svg> elements are just one solution. Another is to accept that IE and Edge task lists will look different, knowing that these engines are either changing (Edge => Chrome engine) or will no longer warrant support in the future (IE10/11). I’ll investigate options and share my $0.02 on what seems to work best.

I agree that extending the markdown parser would be the right way to implement this. I haven’t noodled with the docsify source enough to know how to implement this and still maintain the end-user’s ability to extend the markdown parser as well.