Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for task list checkboxes outside p #81

Merged
merged 5 commits into from
Sep 30, 2023
Merged

Add support for task list checkboxes outside p #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f3d078
Support task list checkboxes outside `p` elements
Mr0grog Sep 3, 2023
cecef82
Use english name, not type name, in comments
Mr0grog Sep 6, 2023
3c9fb5d
Add bare checkbox in list item to tests
Mr0grog Sep 27, 2023
f0acebf
Make code more readable
Mr0grog Sep 27, 2023
81eacb8
Make `extractLeadingCheckbox` recursive
Mr0grog Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 65 additions & 33 deletions lib/handlers/li.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,43 +17,17 @@ import {phrasing} from 'hast-util-phrasing'
* mdast node.
*/
export function li(state, node) {
const head = node.children[0]
/** @type {boolean | null} */
let checked = null
/** @type {Element | undefined} */
let clone

// Check if this node starts with a checkbox.
if (head && head.type === 'element' && head.tagName === 'p') {
const checkbox = head.children[0]

if (
checkbox &&
checkbox.type === 'element' &&
checkbox.tagName === 'input' &&
checkbox.properties &&
(checkbox.properties.type === 'checkbox' ||
checkbox.properties.type === 'radio')
) {
checked = Boolean(checkbox.properties.checked)
clone = {
...node,
children: [
{...head, children: head.children.slice(1)},
...node.children.slice(1)
]
}
}
}
// If the list item starts with a checkbox, remove the checkbox and mark the
// list item as a GFM task list item.
const {cleanNode, checkbox} = extractLeadingCheckbox(node)
const checked = checkbox && Boolean(checkbox.properties.checked)

if (!clone) clone = node

const spread = spreadout(clone)
const children = state.toFlow(state.all(clone))
const spread = spreadout(cleanNode)
const children = state.toFlow(state.all(cleanNode))

/** @type {ListItem} */
const result = {type: 'listItem', spread, checked, children}
state.patch(clone, result)
state.patch(cleanNode, result)
return result
}

Expand Down Expand Up @@ -99,3 +73,61 @@ function spreadout(node) {

return false
}

/**
* If the first bit of content in an element is a checkbox, create a copy of
* the element that does not include the checkbox and return the cleaned up
* copy alongside the checkbox that was removed. If there was no leading
* checkbox, this returns the original element unaltered (not a copy).
*
* This detects trees like:
* `<li><input type="checkbox">Text</li>`
* And returns a tree like:
* `<li>Text</li>`
*
* Or with nesting:
* `<li><p><input type="checkbox">Text</p></li>`
* Which returns a tree like:
* `<li><p>Text</p></li>`
*
* @param {Readonly<Element>} node
* @returns {{cleanNode: Element, checkbox: Element | null}}
*/
function extractLeadingCheckbox(node) {
const head = node.children[0]

if (
head &&
head.type === 'element' &&
head.tagName === 'input' &&
head.properties &&
(head.properties.type === 'checkbox' || head.properties.type === 'radio')
) {
return {
cleanNode: {...node, children: node.children.slice(1)},
checkbox: head
}
}

// The checkbox may be nested in another element. If the first element has
// children, look for a leading checkbox inside it.
//
// NOTE: this only handles nesting in `<p>` elements, which is most common.
// It's possible a leading checkbox might be nested in other types of flow or
// phrasing elements (and *deeply* nested, which is not possible with `<p>`).
// Limiting things to `<p>` elements keeps this simpler for now.
if (head && head.type === 'element' && head.tagName === 'p') {
const {cleanNode: cleanHead, checkbox} = extractLeadingCheckbox(head)
if (checkbox) {
return {
cleanNode: {
...node,
children: [cleanHead, ...node.children.slice(1)]
},
checkbox
}
}
}

return {cleanNode: node, checkbox: null}
}
10 changes: 10 additions & 0 deletions test/fixtures/ol/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,14 @@
<li><p><input type="checkbox">Echo</p></li>
<li><p><input type="checkbox"><strong>Foxtrot</strong></p></li>
<li><p><input type="checkbox"> <strong>Golf</strong></p></li>
<li>
<p>
<input type="checkbox"> Hotel
</p>
</li>
<li><input type="checkbox"> India</li>
<li>
<input type="checkbox"> Juliet
</li>
<li><input type="checkbox"></li>
</ol>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a test without anything after it! Particularly without whitespace, like the current new India one

Copy link
Contributor Author

@Mr0grog Mr0grog Sep 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm, that’s an interesting edge case I didn’t think about! What would you expect for output here? The current code creates an empty task list item, e.g:

{
  type: "listItem",
  checked: false,
  children: []
}

…which renders like a normal list item, without even a checkbox (adding the Juliet item before it just so it’s clear):

* [ ] Juliet
*

(The checkbox disappears because there’s no paragraph node at the start of the children array, and that’s required to render it in mdast-util-task-list-gfm-item.)

Is that OK? This is kind of a weird situation (maybe like the things I was thinking there could be warnings about). I’m not sure thare’s any really reasonable result here.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry for the wait. Yes, I think that’s fine. I think no checkbox is rendered because a paragraph is required by GFM. And those have to be filled with something? As far as I remember?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, great, will leave this case functioning as it currently does and get the rest of this done this week. 👍

I think no checkbox is rendered because a paragraph is required by GFM. And those have to be filled with something? As far as I remember?

Yeah, that’s what’s happening. FWIW, what I was trying to get at was whether you’d want to output a different tree in this case because the above current behavior doesn’t render/outputs an invalid mdast tree. For example, putting in a non-breaking space:

* [ ] Juliet
* [ ]  

Or a comment:

* [ ] Juliet
* [ ] <!-- No text -->

Or just backing out and treating it like a checkbox in the middle of text gets treated, rather than as a task list item:

* [ ] Juliet
* \[ ]

The first two will successfully render as a checklist item when converting back to HTML; the last one does not, but matches behavior elsewhere in this module. There are lots of creative options along these lines.

BUT all of these are doing some kind of funny behavior to preserve the intent of the input. I definitely understand there are reasons you might consider the current garbage-in-garbage-out behavior better or more straightforward.

8 changes: 8 additions & 0 deletions test/fixtures/ol/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,11 @@ Quuux.
5. [ ] **Foxtrot**

6. [ ] **Golf**

7. [ ] Hotel

8. [ ] India

9. [ ] Juliet

10.
10 changes: 10 additions & 0 deletions test/fixtures/ul/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,4 +59,14 @@
<li><p><input type="checkbox">Echo</p></li>
<li><p><input type="checkbox"><strong>Foxtrot</strong></p></li>
<li><p><input type="checkbox"> <strong>Golf</strong></p></li>
<li>
<p>
<input type="checkbox"> Hotel
</p>
</li>
<li><input type="checkbox"> India</li>
<li>
<input type="checkbox"> Juliet
</li>
<li><input type="checkbox"></li>
</ul>
8 changes: 8 additions & 0 deletions test/fixtures/ul/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,3 +57,11 @@ Quuux.
* [ ] **Foxtrot**

* [ ] **Golf**

* [ ] Hotel

* [ ] India

* [ ] Juliet

*
Loading