1 files changed, 90 insertions, 0 deletions
diff --git a/web_src/js/markup/tasklist.js b/web_src/js/markup/tasklist.js
new file mode 100644
index 0000000..375810d
--- /dev/null
+++ b/web_src/js/markup/tasklist.js
@@ -0,0 +1,90 @@
+import {POST} from '../modules/fetch.js';
+import {showErrorToast} from '../modules/toast.js';
+
+const preventListener = (e) => e.preventDefault();
+
+/**
+ * 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.
+ */
+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.hasAttribute('data-editable')) {
+        return;
+      }
+
+      checkbox.setAttribute('data-editable', 'true');
+      checkbox.addEventListener('input', async () => {
+        const checkboxCharacter = checkbox.checked ? 'x' : ' ';
+        const position = parseInt(checkbox.getAttribute('data-source-position')) + 1;
+
+        const rawContent = container.querySelector('.raw-content');
+        const oldContent = rawContent.textContent;
+
+        const encoder = new TextEncoder();
+        const buffer = encoder.encode(oldContent);
+        // Indexes may fall off the ends and return undefined.
+        if (buffer[position - 1] !== '['.codePointAt(0) ||
+          buffer[position] !== ' '.codePointAt(0) && buffer[position] !== 'x'.codePointAt(0) && buffer[position] !== 'X'.codePointAt(0) ||
+          buffer[position + 1] !== ']'.codePointAt(0)) {
+          // Position is probably wrong.  Revert and don't allow change.
+          checkbox.checked = !checkbox.checked;
+          throw new Error(`Expected position to be space, x or X and surrounded by brackets, but it's not: position=${position}`);
+        }
+        buffer.set(encoder.encode(checkboxCharacter), position);
+        const newContent = new TextDecoder().decode(buffer);
+
+        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 = editContentZone.getAttribute('data-update-url');
+          const context = editContentZone.getAttribute('data-context');
+          const contentVersion = editContentZone.getAttribute('data-content-version');
+
+          const requestBody = new FormData();
+          requestBody.append('ignore_attachments', 'true');
+          requestBody.append('content', newContent);
+          requestBody.append('context', context);
+          requestBody.append('content_version', contentVersion);
+          const response = await POST(updateUrl, {data: requestBody});
+          const data = await response.json();
+          if (response.status === 400) {
+            showErrorToast(data.errorMessage);
+            return;
+          }
+          editContentZone.setAttribute('data-content-version', data.contentVersion);
+          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;
+    }
+  }
+}