ami/tl-vikunja
1
0
Fork 0
Code

fix(editor): make checklist indicator work again

Browse Source
This commit is contained in:
kolaente 2023-10-21 18:18:17 +02:00
parent 4f2d7b3ce2
commit 22103626b8
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
2 changed files with 80 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/helpers/checklistFromText.test.ts
View File

@ -10,48 +10,56 @@ describe('Find checklists in text', () => {
expect(checkboxes).toHaveLength(0)
})
it('should find multiple checkboxes', () => {
const text: string = `* [ ] Lorem Ipsum
* [ ] Dolor sit amet
Here's some text in between
* [x] Dolor sit amet
- [ ] Dolor sit amet`
const text: string = `
<ul data-type="taskList">
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Task</p></div>
</li>
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Another task</p>
<ul data-type="taskList">
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>subtask</p></div>
</li>
<li data-checked="true" data-type="taskItem"><label><input type="checkbox"
checked="checked"><span></span></label>
<div><p>done</p></div>
</li>
</ul>
</div>
</li>
</ul>`
const checkboxes = findCheckboxesInText(text)
expect(checkboxes).toHaveLength(4)
expect(checkboxes[0]).toBe(0)
expect(checkboxes[1]).toBe(18)
expect(checkboxes[2]).toBe(69)
expect(checkboxes[3]).toBe(90)
expect(checkboxes[0]).toBe(32)
expect(checkboxes[1]).toBe(163)
expect(checkboxes[2]).toBe(321)
expect(checkboxes[3]).toBe(464)
})
it('should find one checkbox with *', () => {
const text: string = '* [ ] Lorem Ipsum'
it('should find one unchecked checkbox', () => {
const text: string = `
<ul data-type="taskList">
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Task</p></div>
</li>
</ul>`
const checkboxes = findCheckboxesInText(text)
expect(checkboxes).toHaveLength(1)
expect(checkboxes[0]).toBe(0)
expect(checkboxes[0]).toBe(32)
})
it('should find one checkbox with -', () => {
const text: string = '- [ ] Lorem Ipsum'
it('should find one checked checkbox', () => {
const text: string = `
<ul data-type="taskList">
<li data-checked="true" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Task</p></div>
</li>
</ul>`
const checkboxes = findCheckboxesInText(text)
expect(checkboxes).toHaveLength(1)
expect(checkboxes[0]).toBe(0)
})
it('should find one checked checkbox with *', () => {
const text: string = '* [x] Lorem Ipsum'
const checkboxes = findCheckboxesInText(text)
expect(checkboxes).toHaveLength(1)
expect(checkboxes[0]).toBe(0)
})
it('should find one checked checkbox with -', () => {
const text: string = '- [x] Lorem Ipsum'
const checkboxes = findCheckboxesInText(text)
expect(checkboxes).toHaveLength(1)
expect(checkboxes[0]).toBe(0)
expect(checkboxes[0]).toBe(32)
})
})
@ -63,32 +71,60 @@ describe('Get Checklist Statistics in a Text', () => {
expect(stats.total).toBe(0)
})
it('should find one checkbox', () => {
const text: string = '* [ ] Lorem Ipsum'
const text: string = `
<ul data-type="taskList">
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Task</p></div>
</li>
</ul>`
const stats = getChecklistStatistics(text)
expect(stats.total).toBe(1)
expect(stats.checked).toBe(0)
})
it('should find one checked checkbox', () => {
const text: string = '* [x] Lorem Ipsum'
const text: string = `
<ul data-type="taskList">
<li data-checked="true" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Task</p></div>
</li>
</ul>`
const stats = getChecklistStatistics(text)
expect(stats.total).toBe(1)
expect(stats.checked).toBe(1)
})
it('should find multiple mixed and matched', () => {
const text: string = `* [ ] Lorem Ipsum
* [ ] Dolor sit amet
* [x] Dolor sit amet
- [x] Dolor sit amet
const text: string = `
<ul data-type="taskList">
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Task</p></div>
</li>
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>Another task</p>
<ul data-type="taskList">
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>subtask</p></div>
</li>
<li data-checked="false" data-type="taskItem"><label><input type="checkbox"><span></span></label>
<div><p>subtask 2</p></div>
</li>
<li data-checked="true" data-type="taskItem"><label><input type="checkbox"
checked="checked"><span></span></label>
<div><p>done</p></div>
</li>
<li data-checked="true" data-type="taskItem"><label><input type="checkbox"
checked="checked"><span></span></label>
<div><p>also done</p></div>
</li>
</ul>
</div>
</li>
</ul>`
Here's some text in between
* [x] Dolor sit amet
- [ ] Dolor sit amet`
const stats = getChecklistStatistics(text)
expect(stats.total).toBe(6)
expect(stats.checked).toBe(3)
expect(stats.checked).toBe(2)
})
})

6
src/helpers/checklistFromText.ts
View File

@ -1,5 +1,3 @@
const checked = '[x]'
interface CheckboxStatistics {
total: number
checked: number
@ -11,7 +9,7 @@ interface MatchedCheckboxes {
}
const getCheckboxesInText = (text: string): MatchedCheckboxes => {
const regex = /[*-] \[[ x]]/g
const regex = /data-checked="(true|false)"/g
let match
const checkboxes: MatchedCheckboxes = {
checked: [],
@ -19,7 +17,7 @@ const getCheckboxesInText = (text: string): MatchedCheckboxes => {
}
while ((match = regex.exec(text)) !== null) {
if (match[0].endsWith(checked)) {
if (match[1] === 'true') {
checkboxes.checked.push(match.index)
} else {
checkboxes.unchecked.push(match.index)