How to get checkboxes?

[spark eagle]

I'd like to get little checkboxes to indicate task completion or not, like in GitHub-flavoured Markdown, and elsewhere. This is what I think should be working.

?render

#show "[ ]": square(stroke: black, size:0.9em, radius: 3pt)
#show "[x]": square(stroke: black, fill: gray, radius: 5pt)[x]
- [x] completed task
- [ ] incomplete task

[spark eagle]

But it doesn't. The ast shows the [x] and [ ] should be available to be matched on:

?ast - [x] ...

[deft flume]

    ListItem: 9 [
        ListMarker: "-",
        Space: " ",
        Markup: 7 [
            Text: "[",
            Text: "x",
            Text: "]",
            Space: " ",
            Shorthand: "...",
        ],
    ],
]```

[brisk shuttle]

I think the issue is that Typst splits them up into separate text nodes

but show rules on string will only match on each text node separately

which is an unfortunate but probably pretty hard to fix limitation

[spark eagle]

Ok, thanks for the diagnosis. I tried using the regex() operator as well with and without escaping, but I couldn’t get that to work either. Would you expect this to hit the same problem?

[brisk shuttle]

I think regex suffers from the same problem, yeah :/

[stiff dove]

Parsing isn't that hard to fix, I have PR that does it. It adds some complications, of course. But laurmaedje thinks it could be better to replace it at render-time, so things like text #text-var text again also could be replaced as a whole, so I guess it is a bit stuck there.

(see full discussion there: https://github.com/typst/typst/pull/1868. I think I would be glad to hear more opinions, by the way)

[heavy snow]

you could use list.item as a selector then do a bit of checking

?render

#show list.item: it => {
  if repr(it.body.func()) == "sequence" and it.body.children.len() >= 3 and it.body.children.at(0) == [\[] and it.body.children.at(2) == [\]] {
    list.item(if it.body.children.at(1) == [x] {
      [is checked]
    } else {
      [is not checked]
    })
  } else {
    it
  }
}
- [x] arst
- [ ] arst

[heavy snow]

Its because [x] gets split into a sequence of text and i guess the regex only works on unbroken text

[spark eagle]

?render theme=light

#show list.item: it => {
  if repr(it.body.func()) == "sequence" and it.body.children.len() >= 3 and it.body.children.at(0) == [\[] and it.body.children.at(2) == [\]] {
    list.item(if it.body.children.at(1) == [x] {
      square(size: 0.9em, stroke: black, fill: gray, radius: 2pt)[x] + it.body.children.at(4)
    } else {
      square(stroke: black, size:0.9em, radius: 2pt) + it.body.children.at(4)
    })
  } else {
    it
  }
}
- [x] figure out typst horizontal lines
- [ ] figure out typst checkboxes

[spark eagle]

I'm getting closer to a full solution, @heavy snow, but I currently don't understand how to treat content as string. And I clear fail to understand something about line breaks ...

[heavy snow]

You can't treat content as string? At least not without some preprocessing to convert the content to string. I got stuck on the line breaks too, I'm not sure why they're happening maybe use a stack?

[brisk shuttle]

Try wrapping the squares in a box

[heavy snow]

?render

#show list.item: it => {
  if repr(it.body.func()) == "sequence" and it.body.children.len() >= 3 and it.body.children.at(0) == [\[] and it.body.children.at(2) == [\]] {
    list.item(if it.body.children.at(1) == [x] {
      box(square(size: 0.9em, stroke: black, fill: gray, radius: 2pt)[x] + it.body.children.at(4))
    } else {
      box(square(stroke: black, size:0.9em, radius: 2pt) + it.body.children.at(4))
    })
  } else {
    it
  }
}
- [x] arst
- [ ] arst

[heavy snow]

nop

maybe a stack?

stack doesn't work either

could use unicode

?render

\u{2610}
\u{2612}

[heavy snow]

well they look nicer than pdf

[spark eagle]

Well, I've found a way that does work, but I'm left very confused about line breaks:

?render

#show list.item: it => {
  if repr(it.body.func()) == "sequence" and it.body.children.len() >= 3 and it.body.children.at(0) == [\[] and it.body.children.at(2) == [\]] {
    list.item(if it.body.children.at(1) == [x] {
      // square(size: 0.9em, stroke: black, fill: gray, radius: 2pt)[x ]+it.body.children.at(4)
      [\u{2612} ] + it.body.children.at(4)
    } else {
      // square(stroke: black, size:0.9em, radius: 2pt) + it.body.children.at(4)
      [\u{2610} ] + it.body.children.at(4)
    })
  } else {
    it
  }
}
- [x] figure out typst horizontal lines
- [ ] understand line breaking in \{ code segments \}