Added WYSIWYG tasklist clicking ability

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');
+            }
+        });
+    }
 }
 
 /**

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 {