From b6be8a2bb9a640eef14e67376cbb57f999084ca9 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Sun, 20 Mar 2022 11:59:46 +0000
Subject: [PATCH] Added WYSIWYG tasklist clicking ability

---
 resources/js/wysiwyg/plugins-tasklist.js | 31 ++++++++++++++++++++++++
 resources/sass/_tinymce.scss             |  7 ++++++
 2 files changed, 38 insertions(+)

diff --git a/resources/js/wysiwyg/plugins-tasklist.js b/resources/js/wysiwyg/plugins-tasklist.js
index 4070575d9..3fbc2c1e8 100644
--- a/resources/js/wysiwyg/plugins-tasklist.js
+++ b/resources/js/wysiwyg/plugins-tasklist.js
@@ -25,6 +25,37 @@ function register(editor, url) {
 
     });
 
+    editor.on('click', function(event) {
+        const clickedEl = event.originalTarget;
+        if (clickedEl.nodeName === 'LI' && clickedEl.classList.contains('task-list-item')) {
+            handleTaskListItemClick(event, clickedEl, editor);
+        }
+    });
+
+}
+
+/**
+ * @param {MouseEvent} event
+ * @param {Element} clickedEl
+ * @param {Editor} editor
+ */
+function handleTaskListItemClick(event, clickedEl, editor) {
+    const bounds = clickedEl.getBoundingClientRect();
+    const withinBounds = event.clientX <= bounds.right
+                        && event.clientX >= bounds.left
+                        && event.clientY >= bounds.top
+                        && event.clientY <= bounds.bottom;
+
+    // Outside of the task list item bounds mean we're probably clicking the pseudo-element.
+    if (!withinBounds) {
+        editor.undoManager.transact(() => {
+            if (clickedEl.hasAttribute('checked')) {
+                clickedEl.removeAttribute('checked');
+            }  else {
+                clickedEl.setAttribute('checked', 'checked');
+            }
+        });
+    }
 }
 
 /**
diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index c4848561a..0ee3fa40b 100644
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -117,6 +117,10 @@ body.page-content.mce-content-body  {
 /**
  * Fake task list checkboxes
  */
+.page-content.mce-content-body .task-list-item {
+  margin-left: 0;
+  position: relative;
+}
 .page-content.mce-content-body .task-list-item > input[type="checkbox"] {
   display: none;
 }
@@ -130,6 +134,9 @@ body.page-content.mce-content-body  {
   margin-right: 8px;
   vertical-align: text-top;
   cursor: pointer;
+  position: absolute;
+  left: -24px;
+  top: 4px;
 }
 
 .page-content.mce-content-body .task-list-item[checked]:before {