1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75

import $ from 'jquery';

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);
        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');

          await $.post(updateUrl, {
            ignore_attachments: true,
            _csrf: window.config.csrfToken,
            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;
    }
  }
}