Update content on checkbox change.

Author: KN4CK3R

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 {

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 {

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 $.IsSigned (eq $.SignedUserID .PosterID))}}data-can-edit="true"{{end}}>
 			{{if .RenderedContent}}
 				{{.RenderedContent|Str2html}}
 			{{else}}

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}}

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}}

web_src/js/index.js

@@ -19,6 +19,7 @@ import initServiceWorker from './features/serviceworker.js';
 import initTableSort from './features/tablesort.js';
 import {createCodeEditor, createMonaco} from './features/codeeditor.js';
 import {initMarkupAnchors} from './markup/anchors.js';
+import initMarkupTasklist from './markup/tasklist.js';
 import {initNotificationsTable, initNotificationCount} from './features/notification.js';
 import {initStopwatch} from './features/stopwatch.js';
 import {renderMarkupContent} from './markup/content.js';
@@ -2733,6 +2734,7 @@ $(document).ready(async () => {
   searchRepositories();
 
   initMarkupAnchors();
+  initMarkupTasklist();
   initCommentForm();
   initInstall();
   initArchiveLinks();

web_src/js/markup/tasklist.js

@@ -0,0 +1,47 @@
+/**
+ * Attaches `change` 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.
+ */
+export default function initMarkupTasklist() {
+  $(`.render-content.markup[data-can-edit='true']`).parent().each((_, container) => {
+    const $container = $(container);
+    const $checkboxes = $container.find(`.task-list-item input:checkbox`);
+
+    $checkboxes.on('change', async (ev) => {
+      const $checkbox = $(ev.target);
+      const checkboxCharacter = $checkbox.is(':checked') ? 'x' : ' ';
+      const position = parseInt($checkbox.data('source-position')) + 1;
+
+      const $rawContent = $container.find('.raw-content');
+      const oldContent = $rawContent.text();
+      const newContent = oldContent.substring(0, position) + checkboxCharacter + oldContent.substring(position + 1);
+
+      if (newContent !== oldContent) {
+        $checkboxes.prop('disabled', true);
+
+        try {
+          const $contentZone = $container.find('.edit-content-zone');
+          const url = $contentZone.data('update-url');
+          const context = $contentZone.data('context');
+
+          await $.post(url, {
+            _csrf: window.config.csrf,
+            content: newContent,
+            context,
+          });
+
+          $rawContent.text(newContent);
+        } catch (e) {
+          $checkbox.prop('checked', !$checkbox.is(':checked'));
+
+          console.error(e);
+        } finally {
+          $checkboxes.prop('disabled', false);
+        }
+      }
+    });
+
+    $checkboxes.prop('disabled', false);
+  });
+}