Make tasklist checkboxes clickable (#15791)

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Lauris BH <lauris@nix.lv>

diff --git a/modules/markup/markdown/goldmark.go b/modules/markup/markdown/goldmark.go
index ad77177db439af4fa316ccc9753bb1481a037831..f1c259f82429d97db69ff082edd2913d937cb758 100644 (file)
--- a/modules/markup/markdown/goldmark.go
+++ b/modules/markup/markdown/goldmark.go
@@ -384,18 +384,19 @@ func (r *HTMLRenderer) renderTaskCheckBoxListItem(w util.BufWriter, source []byt
                } else {
                        _, _ = w.WriteString("<li>")
                }
-               end := ">"
-               if r.XHTML {
-                       end = " />"
+               _, _ = w.WriteString(`<input type="checkbox" disabled=""`)
+               segments := node.FirstChild().Lines()
+               if segments.Len() > 0 {
+                       segment := segments.At(0)
+                       _, _ = w.WriteString(fmt.Sprintf(` data-source-position="%d"`, segment.Start))
                }
-               var err error
                if n.IsChecked {
-                       _, err = w.WriteString(`<input type="checkbox" disabled="" checked=""` + end)
-               } else {
-                       _, err = w.WriteString(`<input type="checkbox" disabled=""` + end)
+                       _, _ = w.WriteString(` checked=""`)
                }
-               if err != nil {
-                       return ast.WalkStop, err
+               if r.XHTML {
+                       _, _ = w.WriteString(` />`)
+               } else {
+                       _ = w.WriteByte('>')
                }
                fc := n.FirstChild()
                if fc != nil {

diff --git a/modules/markup/markdown/markdown_test.go b/modules/markup/markdown/markdown_test.go
index 46a380aa6c2ee6f9ee9ee46b3a8a2922974487ba..76c6d28d07b7d126115b5f8ae156bc33db94e7a5 100644 (file)
--- a/modules/markup/markdown/markdown_test.go
+++ b/modules/markup/markdown/markdown_test.go
@@ -166,9 +166,9 @@ func testAnswers(baseURLContent, baseURLImages string) []string {
 <p>(from <a href="https://www.markdownguide.org/extended-syntax/" rel="nofollow">https://www.markdownguide.org/extended-syntax/</a>)</p>
 <h3 id="user-content-checkboxes">Checkboxes</h3>
 <ul>
-<li class="task-list-item"><input type="checkbox" disabled=""/>unchecked</li>
-<li class="task-list-item"><input type="checkbox" disabled="" checked=""/>checked</li>
-<li class="task-list-item"><input type="checkbox" disabled=""/>still unchecked</li>
+<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="434"/>unchecked</li>
+<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="450" checked=""/>checked</li>
+<li class="task-list-item"><input type="checkbox" disabled="" data-source-position="464"/>still unchecked</li>
 </ul>
 <h3 id="user-content-definition-list">Definition list</h3>
 <dl>

diff --git a/modules/markup/sanitizer.go b/modules/markup/sanitizer.go
index 9f336d8330d094a35683506f4e4efc2751ef95b9..0e05ddb085e2959c54f27e2467b82879e6d2b25e 100644 (file)
--- a/modules/markup/sanitizer.go
+++ b/modules/markup/sanitizer.go
@@ -43,7 +43,7 @@ func ReplaceSanitizer() {
 
        // Checkboxes
        sanitizer.policy.AllowAttrs("type").Matching(regexp.MustCompile(`^checkbox$`)).OnElements("input")
-       sanitizer.policy.AllowAttrs("checked", "disabled").OnElements("input")
+       sanitizer.policy.AllowAttrs("checked", "disabled", "data-source-position").OnElements("input")
 
        // Custom URL-Schemes
        if len(setting.Markdown.CustomURLSchemes) > 0 {

diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl
index c55da8576e185a38f2b3a762e0c37d5a612fcde0..86e314dc50756c0c2b9db368654e3b0bf2249afc 100644 (file)
--- a/templates/repo/diff/comments.tmpl
+++ b/templates/repo/diff/comments.tmpl
@@ -51,7 +51,7 @@
                        </div>
                </div>
                <div class="ui attached segment comment-body">
-                       <div class="render-content markup">
+                       <div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
                        {{if .RenderedContent}}
                                {{.RenderedContent|Str2html}}
                        {{else}}

diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 35c7cdd7a2c3014d5acb604a78e036b302f78128..00ce61921d0e6cbaeb83cd5d37eebffe24f2ccd5 100644 (file)
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -57,7 +57,7 @@
                                                </div>
                                        </div>
                                        <div class="ui attached segment comment-body">
-                                               <div class="render-content markup">
+                                               <div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission $.IsIssuePoster}}data-can-edit="true"{{end}}>
                                                        {{if .Issue.RenderedContent}}
                                                                {{.Issue.RenderedContent|Str2html}}
                                                        {{else}}

diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl
index 77757207cf2e98ebe0629f0a5f038cb33e925bf5..53005cc82032ba476174508b15087bec2be7159b 100644 (file)
--- a/templates/repo/issue/view_content/comments.tmpl
+++ b/templates/repo/issue/view_content/comments.tmpl
@@ -64,7 +64,7 @@
                                        </div>
                                </div>
                                <div class="ui attached segment comment-body">
-                                       <div class="render-content markup">
+                                       <div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
                                                {{if .RenderedContent}}
                                                        {{.RenderedContent|Str2html}}
                                                {{else}}
@@ -552,7 +552,7 @@
                                                                                                                </div>
                                                                                                        </div>
                                                                                                        <div class="text comment-content">
-                                                                                                               <div class="render-content markup">
+                                                                                                               <div class="render-content markup" {{if or $.Permission.IsAdmin $.HasIssuesOrPullsWritePermission (and $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
                                                                                                                {{if .RenderedContent}}
                                                                                                                        {{.RenderedContent|Str2html}}
                                                                                                                {{else}}

diff --git a/web_src/js/index.js b/web_src/js/index.js
index a01bd6ca08bc7248bd31198eb73807c0aa6688f2..c3d74b1395bd79d0cdfaf891e9675c961be7fa21 100644 (file)
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -21,8 +21,8 @@ import {createCodeEditor, createMonaco} from './features/codeeditor.js';
 import {initMarkupAnchors} from './markup/anchors.js';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {initStopwatch} from './features/stopwatch.js';
-import {renderMarkupContent} from './markup/content.js';
 import {showLineButton} from './code/linebutton.js';
+import {initMarkupContent, initCommentContent} from './markup/content.js';
 import {stripTags, mqBinarySearch} from './utils.js';
 import {svg, svgs} from './svg.js';
 
@@ -52,7 +52,7 @@ function initCommentPreviewTab($form) {
     }, (data) => {
       const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
-      renderMarkupContent();
+      initMarkupContent();
     });
   });
 
@@ -82,7 +82,7 @@ function initEditPreviewTab($form) {
       }, (data) => {
         const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
-        renderMarkupContent();
+        initMarkupContent();
       });
     });
   }
@@ -1108,7 +1108,8 @@ async function initRepository() {
               dz.emit('submit');
               dz.emit('reload');
             }
-            renderMarkupContent();
+            initMarkupContent();
+            initCommentContent();
           });
         });
       } else {
@@ -1481,7 +1482,7 @@ function initWikiForm() {
             wiki: true
           }, (data) => {
             preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
-            renderMarkupContent();
+            initMarkupContent();
           });
         };
 
@@ -2732,6 +2733,7 @@ $(document).ready(async () => {
   searchRepositories();
 
   initMarkupAnchors();
+  initCommentContent();
   initCommentForm();
   initInstall();
   initArchiveLinks();
@@ -2789,7 +2791,7 @@ $(document).ready(async () => {
     initServiceWorker(),
     initNotificationCount(),
     initStopwatch(),
-    renderMarkupContent(),
+    initMarkupContent(),
     initGithook(),
     initImageDiff(),
   ]);

diff --git a/web_src/js/markup/content.js b/web_src/js/markup/content.js
index f06c9908f2856badda85ed563eb7eb53ee99e679..19b749aaabfc346498f3cbaa0517e547b2cebf99 100644 (file)
--- a/web_src/js/markup/content.js
+++ b/web_src/js/markup/content.js
@@ -1,5 +1,12 @@
 import {renderMermaid} from './mermaid.js';
+import {initMarkupTasklist} from './tasklist.js';
 
-export async function renderMarkupContent() {
+// code that runs for all markup content
+export async function initMarkupContent() {
   await renderMermaid(document.querySelectorAll('code.language-mermaid'));
 }
+
+// code that only runs for comments
+export function initCommentContent() {
+  initMarkupTasklist();
+}

diff --git a/web_src/js/markup/tasklist.js b/web_src/js/markup/tasklist.js
new file mode 100644 (file)
index 0000000..5a7291b
--- /dev/null
+++ b/web_src/js/markup/tasklist.js
@@ -0,0 +1,62 @@
+/**
+ * Attaches `input` handlers to markdown rendered tasklist checkboxes in comments.
+ *
+ * When a checkbox value changes, the corresponding [ ] or [x] in the markdown string
+ * is set accordingly and sent to the server. On success it updates the raw-content on
+ * error it resets the checkbox to its original value.
+ */
+
+const preventListener = (e) => e.preventDefault();
+
+export function initMarkupTasklist() {
+  for (const el of document.querySelectorAll(`.markup[data-can-edit=true]`) || []) {
+    const container = el.parentNode;
+    const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox]`);
+
+    for (const checkbox of checkboxes) {
+      if (checkbox.dataset.editable) return;
+      checkbox.dataset.editable = 'true';
+      checkbox.addEventListener('input', async () => {
+        const checkboxCharacter = checkbox.checked ? 'x' : ' ';
+        const position = parseInt(checkbox.dataset.sourcePosition) + 1;
+
+        const rawContent = container.querySelector('.raw-content');
+        const oldContent = rawContent.textContent;
+        const newContent = oldContent.substring(0, position) + checkboxCharacter + oldContent.substring(position + 1);
+        if (newContent === oldContent) return;
+
+        // Prevent further inputs until the request is done. This does not use the
+        // `disabled` attribute because it causes the border to flash on click.
+        for (const checkbox of checkboxes) {
+          checkbox.addEventListener('click', preventListener);
+        }
+
+        try {
+          const editContentZone = container.querySelector('.edit-content-zone');
+          const {updateUrl, context} = editContentZone.dataset;
+
+          await $.post(updateUrl, {
+            _csrf: window.config.csrf,
+            content: newContent,
+            context,
+          });
+
+          rawContent.textContent = newContent;
+        } catch (err) {
+          checkbox.checked = !checkbox.checked;
+          console.error(err);
+        }
+
+        // Enable input on checkboxes again
+        for (const checkbox of checkboxes) {
+          checkbox.removeEventListener('click', preventListener);
+        }
+      });
+    }
+
+    // Enable the checkboxes as they are initially disabled by the markdown renderer
+    for (const checkbox of checkboxes) {
+      checkbox.disabled = false;
+    }
+  }
+}