webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Changed to a psuedo-style approach for tasklist in wysiwyg

Browse Source
This commit is contained in:
Dan Brown
2022-03-19 17:12:56 +00:00
parent f991948c49
commit 65dd7ad1e9
3 changed files with 58 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/wysiwyg/config.js
View File

@ -207,7 +207,7 @@ export function build(options) {
statusbar: false,
menubar: false,
paste_data_images: false,
extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*],li[class]',
extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*],li[class|checked]',
automatic_uploads: false,
custom_elements: 'doc-root,code-block',
valid_children: [

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

@ -1,60 +1,27 @@
/**
* @param {Editor} editor
*/
function defineTaskListCustomElement(editor) {
const doc = editor.getDoc();
const win = doc.defaultView;
class TaskListElement extends win.HTMLElement {
constructor() {
super();
// this.attachShadow({mode: 'open'});
//
// const input = doc.createElement('input');
// input.setAttribute('type', 'checkbox');
// input.setAttribute('disabled', 'disabled');
//
// if (this.hasAttribute('selected')) {
// input.setAttribute('selected', 'selected');
// }
//
// this.shadowRoot.append(input);
// this.shadowRoot.close();
}
}
win.customElements.define('task-list-item', TaskListElement);
}
/**
* @param {Editor} editor
* @param {String} url
*/
function register(editor, url) {
// editor.on('NewBlock', ({ newBlock}) => {
// ensureElementHasCheckbox(newBlock);
// });
function register(editor, url) {
editor.on('PreInit', () => {
defineTaskListCustomElement(editor);
editor.parser.addNodeFilter('li', function(elms) {
for (const elem of elms) {
if (elem.attributes.map.class === 'task-list-item') {
replaceTaskListNode(elem);
editor.parser.addNodeFilter('li', function(nodes) {
for (const node of nodes) {
if (node.attributes.map.class === 'task-list-item') {
parseTaskListNode(node);
}
}
});
// editor.serializer.addNodeFilter('li', function(elms) {
// for (const elem of elms) {
// if (elem.attributes.map.class === 'task-list-item') {
// ensureNodeHasCheckbox(elem);
// }
// }
// });
editor.serializer.addNodeFilter('li', function(nodes) {
for (const node of nodes) {
if (node.attributes.map.class === 'task-list-item') {
serializeTaskListNode(node);
}
}
});
});
@ -63,57 +30,38 @@ function register(editor, url) {
/**
* @param {AstNode} node
*/
function replaceTaskListNode(node) {
const taskListItem = new tinymce.html.Node.create('task-list-item', {
});
function parseTaskListNode(node) {
// Force task list item class
node.attr('class', 'task-list-item');
// Copy checkbox status and remove checkbox within editor
for (const child of node.children()) {
if (node.name !== 'input') {
taskListItem.append(child);
if (child.name === 'input') {
if (child.attr('checked') === 'checked') {
node.attr('checked', 'checked');
}
child.remove();
}
}
node.replace(taskListItem);
}
// /**
// * @param {Element} elem
// */
// function ensureElementHasCheckbox(elem) {
// const hasCheckbox = elem.querySelector(':scope > input[type="checkbox"]') !== null;
// if (hasCheckbox) {
// return;
// }
//
// const input = elem.ownerDocument.createElement('input');
// input.setAttribute('type', 'checkbox');
// input.setAttribute('disabled', 'disabled');
// elem.prepend(input);
// }
/**
* @param {AstNode} elem
* @param {AstNode} node
*/
function ensureNodeHasCheckbox(elem) {
// Stop if there's already an input
if (elem.firstChild && elem.firstChild.name === 'input') {
return;
function serializeTaskListNode(node) {
const isChecked = node.attr('checked') === 'checked';
node.attr('checked', null);
const inputAttrs = {type: 'checkbox', disabled: 'disabled'};
if (isChecked) {
inputAttrs.checked = 'checked';
}
const input = new tinymce.html.Node.create('input', {
type: 'checkbox',
disabled: 'disabled',
});
if (elem.firstChild) {
elem.insert(input, elem.firstChild, true);
} else {
elem.append(input);
}
const checkbox = new tinymce.html.Node.create('input', inputAttrs);
checkbox.shortEnded = true;
node.firstChild ? node.insert(checkbox, node.firstChild, true) : node.append(checkbox);
}
/**
* @param {WysiwygConfigOptions} options
* @return {register}