fix checkboxes after comment edit

Author: silverwind

web_src/js/index.js

@@ -19,11 +19,10 @@ 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';
 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';
 
@@ -53,7 +52,7 @@ function initCommentPreviewTab($form) {
     }, (data) => {
       const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
-      renderMarkupContent();
+      initMarkupContent();
     });
   });
 
@@ -83,7 +82,7 @@ function initEditPreviewTab($form) {
       }, (data) => {
         const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
-        renderMarkupContent();
+        initMarkupContent();
       });
     });
   }
@@ -1109,7 +1108,8 @@ async function initRepository() {
               dz.emit('submit');
               dz.emit('reload');
             }
-            renderMarkupContent();
+            initMarkupContent();
+            initCommentContent();
           });
         });
       } else {
@@ -1482,7 +1482,7 @@ function initWikiForm() {
             wiki: true
           }, (data) => {
             preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
-            renderMarkupContent();
+            initMarkupContent();
           });
         };
 
@@ -2734,7 +2734,7 @@ $(document).ready(async () => {
   searchRepositories();
 
   initMarkupAnchors();
-  initMarkupTasklist();
+  initCommentContent();
   initCommentForm();
   initInstall();
   initArchiveLinks();
@@ -2792,7 +2792,7 @@ $(document).ready(async () => {
     initServiceWorker(),
     initNotificationCount(),
     initStopwatch(),
-    renderMarkupContent(),
+    initMarkupContent(),
     initGithook(),
     initImageDiff(),
   ]);

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 async function initCommentContent() {
+  initMarkupTasklist();
+}

web_src/js/markup/tasklist.js

@@ -1,16 +1,18 @@
 /**
  * Attaches `input` handlers to markdown rendered tasklist checkboxes in comments.
+ * The code assumes the checkbox will be initially disabled by the markdown renderer.
+ *
  * 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 default function initMarkupTasklist() {
-  for (const el of document.querySelectorAll(`.markup[data-can-edit='true']`) || []) {
+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]`);
+    const checkboxes = el.querySelectorAll(`.task-list-item input[type=checkbox][disabled]`);
 
     for (const checkbox of checkboxes) {
       checkbox.addEventListener('input', async () => {