Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-11-24 03:42:32 +01:00
Code Issues Releases Wiki Activity

Added WYSIWYG tasklist clicking ability

Browse Source
This commit is contained in:
Dan Brown 2022-03-20 11:59:46 +00:00
parent 65dd7ad1e9
commit b6be8a2bb9
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/js/wysiwyg/plugins-tasklist.js
View File

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

7
resources/sass/_tinymce.scss
View File

@ -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 {