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 {