Make it work for in any comment block

Author: Jan Lohage

web_src/js/markdown/checkboxes.js

@@ -1,52 +1,52 @@
+const checkboxMarkdownPattern = /\[[ x]]/g;
+
 /**
- * Affects first comment of issue page only!
- *
- * Attaches `change` handlers to the markdown rendered checkboxes.
+ * Attaches `change` handlers to markdown rendered 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 initMarkdownCheckboxes() {
-  const $segment = $('.page-content.issue .comment.first .segment');
-  const $checkboxes = $segment.find('.render-content.markdown input:checkbox');
-  const $rawContent = $segment.find('.raw-content');
-
-  const url = $segment.find('.edit-content-zone').data('update-url');
-  const context = $segment.find('.edit-content-zone').data('context');
+  $('.comment .segment').each((_, segment) => {
+    const $segment = $(segment);
+    const $checkboxes = $segment.find('.render-content.markdown input:checkbox');
 
-  const checkboxMarkdownPattern = /\[[ x]]/g;
+    const onChange = async (ev, cbIndex) => {
+      const $cb = $(ev.target);
+      const checkboxMarkdown = $cb.is(':checked') ? '[x]' : '[ ]';
 
-  const enableAll = () => $checkboxes.removeAttr('disabled');
-  const disableAll = () => $checkboxes.attr('disabled', 'disabled');
+      const $rawContent = $segment.find('.raw-content');
+      const oldContent = $rawContent.text();
+      const newContent = oldContent.replace(checkboxMarkdownPattern, replaceNthMatchWith(cbIndex, checkboxMarkdown));
 
-  const onChange = async (ev, cbIndex) => {
-    const $cb = $(ev.target);
-    const checkboxMarkdown = $cb.is(':checked') ? '[x]' : '[ ]';
+      if (newContent !== oldContent) {
+        disableAll($checkboxes);
 
-    const oldContent = $rawContent.text();
-    const newContent = oldContent.replace(checkboxMarkdownPattern, replaceNthMatchWith(cbIndex, checkboxMarkdown));
+        try {
+          const url = $segment.find('.edit-content-zone').data('update-url');
+          const context = $segment.find('.edit-content-zone').data('context');
 
-    if (newContent !== oldContent) {
-      disableAll();
+          await submit(newContent, url, context);
+          $rawContent.text(newContent);
+        } catch (e) {
+          $cb.prop('checked', !$cb.is(':checked'));
 
-      try {
-        await submit(newContent, url, context);
-        $rawContent.text(newContent);
-      } catch (e) {
-        $cb.prop('checked', !$cb.is(':checked'));
-
-        console.error(e);
-      } finally {
-        enableAll();
+          console.error(e);
+        } finally {
+          enableAll($checkboxes);
+        }
       }
-    }
-  };
+    };
 
-  enableAll();
-  $checkboxes.each((cbIndex, cb) => {
-    $(cb).on('change', (ev) => onChange(ev, cbIndex));
+    enableAll($checkboxes);
+    $checkboxes.each((cbIndex, cb) => {
+      $(cb).on('change', (ev) => onChange(ev, cbIndex));
+    });
   });
 }
 
+function enableAll ($checkboxes) { $checkboxes.removeAttr('disabled') }
+function disableAll ($checkboxes) { $checkboxes.attr('disabled', 'disabled') }
+
 function submit (content, url, context) {
   const csrf = window.config.csrf;
 
@@ -57,7 +57,6 @@ function submit (content, url, context) {
   });
 }
 
-
 function replaceNthMatchWith(n, replaceWith) {
   let matchIndex = 0;