Skip to content

Commit 6021fbf

Browse files
KN4CK3Rsilverwindlafriks
authored
Make tasklist checkboxes clickable (#15791)
Co-authored-by: silverwind <[email protected]> Co-authored-by: Lauris BH <[email protected]>
1 parent b4d1059 commit 6021fbf

File tree

9 files changed

+96
-24
lines changed

9 files changed

+96
-24
lines changed

‎modules/markup/markdown/goldmark.go

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -384,18 +384,19 @@ func (r *HTMLRenderer) renderTaskCheckBoxListItem(w util.BufWriter, source []byt
384384
} else {
385385
_, _ = w.WriteString("<li>")
386386
}
387-
end := ">"
388-
if r.XHTML {
389-
end = " />"
387+
_, _ = w.WriteString(`<input type="checkbox" disabled=""`)
388+
segments := node.FirstChild().Lines()
389+
if segments.Len() > 0 {
390+
segment := segments.At(0)
391+
_, _ = w.WriteString(fmt.Sprintf(` data-source-position="%d"`, segment.Start))
390392
}
391-
var err error
392393
if n.IsChecked {
393-
_, err = w.WriteString(`<input type="checkbox" disabled="" checked=""` + end)
394-
} else {
395-
_, err = w.WriteString(`<input type="checkbox" disabled=""` + end)
394+
_, _ = w.WriteString(` checked=""`)
396395
}
397-
if err != nil {
398-
return ast.WalkStop, err
396+
if r.XHTML {
397+
_, _ = w.WriteString(` />`)
398+
} else {
399+
_ = w.WriteByte('>')
399400
}
400401
fc := n.FirstChild()
401402
if fc != nil {

‎modules/markup/markdown/markdown_test.go

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -166,9 +166,9 @@ func testAnswers(baseURLContent, baseURLImages string) []string {
166166
<p>(from <a href="https://www.markdownguide.org/extended-syntax/" rel="nofollow">https://www.markdownguide.org/extended-syntax/</a>)</p>
167167
<h3 id="user-content-checkboxes">Checkboxes</h3>
168168
<ul>
169-
<li class="task-list-item"><input type="checkbox" disabled=""/>unchecked</li>
170-
<li class="task-list-item"><input type="checkbox" disabled="" checked=""/>checked</li>
171-
<li class="task-list-item"><input type="checkbox" disabled=""/>still unchecked</li>
169+
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="434"/>unchecked</li>
170+
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="450" checked=""/>checked</li>
171+
<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="464"/>still unchecked</li>
172172
</ul>
173173
<h3 id="user-content-definition-list">Definition list</h3>
174174
<dl>

‎modules/markup/sanitizer.go

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ func ReplaceSanitizer() {
4343

4444
// Checkboxes
4545
sanitizer.policy.AllowAttrs("type").Matching(regexp.MustCompile(`^checkbox$`)).OnElements("input")
46-
sanitizer.policy.AllowAttrs("checked", "disabled").OnElements("input")
46+
sanitizer.policy.AllowAttrs("checked", "disabled", "data-source-position").OnElements("input")
4747

4848
// Custom URL-Schemes
4949
if len(setting.Markdown.CustomURLSchemes) > 0 {

‎templates/repo/diff/comments.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
</div>
5252
</div>
5353
<div class="ui attached segment comment-body">
54-
<div class="render-content markup">
54+
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
5555
{{if .RenderedContent}}
5656
{{.RenderedContent|Str2html}}
5757
{{else}}

‎templates/repo/issue/view_content.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
</div>
5858
</div>
5959
<div class="ui attached segment comment-body">
60-
<div class="render-content markup">
60+
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission $.IsIssuePoster}}data-can-edit="true"{{end}}>
6161
{{if .Issue.RenderedContent}}
6262
{{.Issue.RenderedContent|Str2html}}
6363
{{else}}

‎templates/repo/issue/view_content/comments.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
</div>
6565
</div>
6666
<div class="ui attached segment comment-body">
67-
<div class="render-content markup">
67+
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
6868
{{if .RenderedContent}}
6969
{{.RenderedContent|Str2html}}
7070
{{else}}
@@ -552,7 +552,7 @@
552552
</div>
553553
</div>
554554
<div class="text comment-content">
555-
<div class="render-content markup">
555+
<div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
556556
{{if .RenderedContent}}
557557
{{.RenderedContent|Str2html}}
558558
{{else}}

‎web_src/js/index.js

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ import {createCodeEditor, createMonaco} from './features/codeeditor.js';
2121
import {initMarkupAnchors} from './markup/anchors.js';
2222
import {initNotificationsTable, initNotificationCount} from './features/notification.js';
2323
import {initStopwatch} from './features/stopwatch.js';
24-
import {renderMarkupContent} from './markup/content.js';
2524
import {showLineButton} from './code/linebutton.js';
25+
import {initMarkupContent, initCommentContent} from './markup/content.js';
2626
import {stripTags, mqBinarySearch} from './utils.js';
2727
import {svg, svgs} from './svg.js';
2828

@@ -52,7 +52,7 @@ function initCommentPreviewTab($form) {
5252
}, (data) => {
5353
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
5454
$previewPanel.html(data);
55-
renderMarkupContent();
55+
initMarkupContent();
5656
});
5757
});
5858

@@ -82,7 +82,7 @@ function initEditPreviewTab($form) {
8282
}, (data) => {
8383
const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
8484
$previewPanel.html(data);
85-
renderMarkupContent();
85+
initMarkupContent();
8686
});
8787
});
8888
}
@@ -1108,7 +1108,8 @@ async function initRepository() {
11081108
dz.emit('submit');
11091109
dz.emit('reload');
11101110
}
1111-
renderMarkupContent();
1111+
initMarkupContent();
1112+
initCommentContent();
11121113
});
11131114
});
11141115
} else {
@@ -1481,7 +1482,7 @@ function initWikiForm() {
14811482
wiki: true
14821483
}, (data) => {
14831484
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
1484-
renderMarkupContent();
1485+
initMarkupContent();
14851486
});
14861487
};
14871488

@@ -2732,6 +2733,7 @@ $(document).ready(async () => {
27322733
searchRepositories();
27332734

27342735
initMarkupAnchors();
2736+
initCommentContent();
27352737
initCommentForm();
27362738
initInstall();
27372739
initArchiveLinks();
@@ -2789,7 +2791,7 @@ $(document).ready(async () => {
27892791
initServiceWorker(),
27902792
initNotificationCount(),
27912793
initStopwatch(),
2792-
renderMarkupContent(),
2794+
initMarkupContent(),
27932795
initGithook(),
27942796
initImageDiff(),
27952797
]);

‎web_src/js/markup/content.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import {renderMermaid} from './mermaid.js';
2+
import {initMarkupTasklist} from './tasklist.js';
23

3-
export async function renderMarkupContent() {
4+
// code that runs for all markup content
5+
export async function initMarkupContent() {
46
await renderMermaid(document.querySelectorAll('code.language-mermaid'));
57
}
8+
9+
// code that only runs for comments
10+
export function initCommentContent() {
11+
initMarkupTasklist();
12+
}

‎web_src/js/markup/tasklist.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* Attaches `input` handlers to markdown rendered tasklist checkboxes in comments.
3+
*
4+
* When a checkbox value changes, the corresponding [ ] or [x] in the markdown string
5+
* is set accordingly and sent to the server. On success it updates the raw-content on
6+
* error it resets the checkbox to its original value.
7+
*/
8+
9+
const preventListener = (e) => e.preventDefault();
10+
11+
export function initMarkupTasklist() {
12+
for (const el of document.querySelectorAll(`.markup[data-can-edit=true]`) || []) {
13+
const container = el.parentNode;
14+
const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox]`);
15+
16+
for (const checkbox of checkboxes) {
17+
if (checkbox.dataset.editable) return;
18+
checkbox.dataset.editable = 'true';
19+
checkbox.addEventListener('input', async () => {
20+
const checkboxCharacter = checkbox.checked ? 'x' : ' ';
21+
const position = parseInt(checkbox.dataset.sourcePosition) + 1;
22+
23+
const rawContent = container.querySelector('.raw-content');
24+
const oldContent = rawContent.textContent;
25+
const newContent = oldContent.substring(0, position) + checkboxCharacter + oldContent.substring(position + 1);
26+
if (newContent === oldContent) return;
27+
28+
// Prevent further inputs until the request is done. This does not use the
29+
// `disabled` attribute because it causes the border to flash on click.
30+
for (const checkbox of checkboxes) {
31+
checkbox.addEventListener('click', preventListener);
32+
}
33+
34+
try {
35+
const editContentZone = container.querySelector('.edit-content-zone');
36+
const {updateUrl, context} = editContentZone.dataset;
37+
38+
await $.post(updateUrl, {
39+
_csrf: window.config.csrf,
40+
content: newContent,
41+
context,
42+
});
43+
44+
rawContent.textContent = newContent;
45+
} catch (err) {
46+
checkbox.checked = !checkbox.checked;
47+
console.error(err);
48+
}
49+
50+
// Enable input on checkboxes again
51+
for (const checkbox of checkboxes) {
52+
checkbox.removeEventListener('click', preventListener);
53+
}
54+
});
55+
}
56+
57+
// Enable the checkboxes as they are initially disabled by the markdown renderer
58+
for (const checkbox of checkboxes) {
59+
checkbox.disabled = false;
60+
}
61+
}
62+
}

0 commit comments

Comments
 (0)