feat(ui): render ordered checkbox lists with numbers (#9184)

Addresses #6332.

This allows
```
1. [ ] task1
2. [ ] task2
```
to be rendered with numbers.

It also fixes a little alignment issue between items from unordered checkbox and other lists.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9184
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Ellen Εμιλία Άννα Zscheile <fogti@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Robert Wolff <mahlzahn@posteo.de>
Co-committed-by: Robert Wolff <mahlzahn@posteo.de>
This commit is contained in:
Robert Wolff 2025-09-06 16:23:06 +02:00 committed by 0ko
commit c6a2b7e0a6
2 changed files with 27 additions and 3 deletions

View file

@ -882,6 +882,27 @@ foo: bar
}
}
func TestRenderCheckList(t *testing.T) {
input := `- [ ] a
- [x] b
1. [x] a
2. [ ] b
5. [ ] e`
expected := `<ul>
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="2"/>a</li>
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="10" checked=""/>b</li>
</ul>
<ol>
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="19" checked=""/>a</li>
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="28"/>b</li>
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="37"/>e</li>
</ol>
`
res, err := markdown.RenderString(&markup.RenderContext{Ctx: git.DefaultContext}, input)
require.NoError(t, err)
assert.Equal(t, template.HTML(expected), res)
}
func TestRenderLinks(t *testing.T) {
input := ` space @mention-user${SPACE}${SPACE}
/just/a/path.bin

View file

@ -153,7 +153,7 @@
list-style-type: none;
}
.markup .task-list-item {
.markup ul .task-list-item {
list-style-type: none;
}
@ -162,11 +162,14 @@
}
.markup .task-list-item input[type="checkbox"] {
margin: 0 .3em .25em -1.4em;
vertical-align: middle;
margin: 0 .4em .25em -1.4em;
padding: 0;
}
.markup ol .task-list-item input[type="checkbox"] {
margin-left: 0;
}
.markup .task-list-item input[type="checkbox"] + p {
margin-left: -0.2em;
display: inline;