mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Improved wysiwyg details/summary edit controls
- Added specific non-editable/editable filtering to make editing within box more reliable. - Updated toolbar icons and controls.
This commit is contained in:
Dan Brown
parent
9e0b8a9fb6
commit
a318775cfc
@ -6,6 +6,8 @@
|
||||
function register(editor, url) {
|
||||
|
||||
editor.ui.registry.addIcon('details', '<svg width="24" height="24"><path d="M8.2 9a.5.5 0 0 0-.4.8l4 5.6a.5.5 0 0 0 .8 0l4-5.6a.5.5 0 0 0-.4-.8ZM20.122 18.151h-16c-.964 0-.934 2.7 0 2.7h16c1.139 0 1.173-2.7 0-2.7zM20.122 3.042h-16c-.964 0-.934 2.7 0 2.7h16c1.139 0 1.173-2.7 0-2.7z"/></svg>');
|
||||
editor.ui.registry.addIcon('togglefold', '<svg height="24" width="24"><path d="M8.12 19.3c.39.39 1.02.39 1.41 0L12 16.83l2.47 2.47c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41l-3.17-3.17c-.39-.39-1.02-.39-1.41 0l-3.17 3.17c-.4.38-.4 1.02-.01 1.41zm7.76-14.6c-.39-.39-1.02-.39-1.41 0L12 7.17 9.53 4.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.03 0 1.42l3.17 3.17c.39.39 1.02.39 1.41 0l3.17-3.17c.4-.39.4-1.03.01-1.42z"/></svg>');
|
||||
editor.ui.registry.addIcon('togglelabel', '<svg height="18" width="18" viewBox="0 0 24 24"><path d="M21.41,11.41l-8.83-8.83C12.21,2.21,11.7,2,11.17,2H4C2.9,2,2,2.9,2,4v7.17c0,0.53,0.21,1.04,0.59,1.41l8.83,8.83 c0.78,0.78,2.05,0.78,2.83,0l7.17-7.17C22.2,13.46,22.2,12.2,21.41,11.41z M6.5,8C5.67,8,5,7.33,5,6.5S5.67,5,6.5,5S8,5.67,8,6.5 S7.33,8,6.5,8z"/></svg>');
|
||||
|
||||
editor.ui.registry.addButton('details', {
|
||||
icon: 'details',
|
||||
@ -17,14 +19,14 @@ function register(editor, url) {
|
||||
|
||||
editor.ui.registry.addButton('removedetails', {
|
||||
icon: 'table-delete-table',
|
||||
tooltip: 'Unwrap collapsible block',
|
||||
tooltip: 'Unwrap',
|
||||
onAction() {
|
||||
unwrapDetailsInSelection(editor)
|
||||
}
|
||||
});
|
||||
|
||||
editor.ui.registry.addButton('editdetials', {
|
||||
icon: 'tag',
|
||||
icon: 'togglelabel',
|
||||
tooltip: 'Edit label',
|
||||
onAction() {
|
||||
const details = getSelectedDetailsBlock(editor);
|
||||
@ -33,22 +35,12 @@ function register(editor, url) {
|
||||
}
|
||||
});
|
||||
|
||||
editor.ui.registry.addButton('collapsedetails', {
|
||||
icon: 'action-prev',
|
||||
tooltip: 'Collapse',
|
||||
editor.ui.registry.addButton('toggledetails', {
|
||||
icon: 'togglefold',
|
||||
tooltip: 'Toggle open/closed',
|
||||
onAction() {
|
||||
const details = getSelectedDetailsBlock(editor);
|
||||
details.removeAttribute('open');
|
||||
editor.focus();
|
||||
}
|
||||
});
|
||||
|
||||
editor.ui.registry.addButton('expanddetails', {
|
||||
icon: 'action-next',
|
||||
tooltip: 'Expand',
|
||||
onAction() {
|
||||
const details = getSelectedDetailsBlock(editor);
|
||||
details.setAttribute('open', 'open');
|
||||
details.toggleAttribute('open');
|
||||
editor.focus();
|
||||
}
|
||||
});
|
||||
@ -67,7 +59,7 @@ function register(editor, url) {
|
||||
predicate: function (node) {
|
||||
return node.nodeName.toLowerCase() === 'details';
|
||||
},
|
||||
items: 'removedetails editdetials collapsedetails expanddetails',
|
||||
items: 'editdetials toggledetails removedetails',
|
||||
position: 'node',
|
||||
scope: 'node'
|
||||
});
|
||||
@ -138,7 +130,7 @@ function setSummary(editor, summaryContent) {
|
||||
let summary = details.querySelector('summary');
|
||||
if (!summary) {
|
||||
summary = document.createElement('summary');
|
||||
details.appendChild(summary);
|
||||
details.prepend(summary);
|
||||
}
|
||||
summary.textContent = summaryContent;
|
||||
});
|
||||
@ -170,33 +162,44 @@ function unwrapDetailsInSelection(editor) {
|
||||
function setupElementFilters(editor) {
|
||||
editor.parser.addNodeFilter('details', function(elms) {
|
||||
for (const el of elms) {
|
||||
// el.attr('contenteditable', 'false');
|
||||
// console.log(el);
|
||||
// let wrap = el.find('div[detailswrap]');
|
||||
// if (!wrap) {
|
||||
// wrap = document.createElement('div');
|
||||
// wrap.setAttribute('detailswrap', 'true');
|
||||
// }
|
||||
//
|
||||
// for (const child of el.children) {
|
||||
// if (child.nodeName.toLowerCase() === 'summary' || child.hasAttribute('detailswrap')) {
|
||||
// continue;
|
||||
// }
|
||||
// wrap.appendChild(child);
|
||||
// }
|
||||
//
|
||||
// el.appendChild(wrap);
|
||||
// wrap.setAttribute('contenteditable', 'true');
|
||||
ensureDetailsWrappedInEditable(el);
|
||||
}
|
||||
});
|
||||
|
||||
editor.serializer.addNodeFilter('details', function(elms) {
|
||||
for (const summaryEl of elms) {
|
||||
summaryEl.attr('contenteditable', null);
|
||||
for (const el of elms) {
|
||||
unwrapDetailsEditable(el);
|
||||
el.attr('open', null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {tinymce.html.Node} detailsEl
|
||||
*/
|
||||
function ensureDetailsWrappedInEditable(detailsEl) {
|
||||
detailsEl.attr('contenteditable', 'false');
|
||||
const wrap = tinymce.html.Node.create('div', {detailswrap: 'true', contenteditable: 'true'});
|
||||
for (const child of detailsEl.children()) {
|
||||
if (child.name !== 'summary') {
|
||||
wrap.append(child);
|
||||
}
|
||||
}
|
||||
detailsEl.append(wrap);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {tinymce.html.Node} detailsEl
|
||||
*/
|
||||
function unwrapDetailsEditable(detailsEl) {
|
||||
detailsEl.attr('contenteditable', null);
|
||||
for (const child of detailsEl.children()) {
|
||||
if (child.attr('detailswrap')) {
|
||||
child.unwrap();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @param {WysiwygConfigOptions} options
|
||||
|
||||
@ -120,7 +120,7 @@ return [
|
||||
'show_caption' => 'Show caption',
|
||||
'constrain' => 'Constrain proportions',
|
||||
|
||||
// Images, links & embed
|
||||
// Images, links, details/summary & embed
|
||||
'source' => 'Source',
|
||||
'alt_desc' => 'Alternative description',
|
||||
'embed' => 'Embed',
|
||||
@ -131,6 +131,11 @@ return [
|
||||
'open_link' => 'Open link in...',
|
||||
'open_link_current' => 'Current window',
|
||||
'open_link_new' => 'New window',
|
||||
'insert_collapsible' => 'Insert collapsible block',
|
||||
'collapsible_unwrap' => 'Unwrap',
|
||||
'edit_label' => 'Edit label',
|
||||
'toggle_open_closed' => 'Toggle open/closed',
|
||||
'collapsible_edit' => 'Edit collapsible block',
|
||||
|
||||
// About view
|
||||
'about_title' => 'About the WYSIWYG Editor',
|
||||
|
||||
@ -37,10 +37,16 @@ body.page-content.mce-content-body {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Prevent details summary clicks {
|
||||
// Details/summary editor usability
|
||||
.page-content.mce-content-body details summary {
|
||||
pointer-events: none;
|
||||
}
|
||||
.page-content.mce-content-body details [detailswrap] {
|
||||
padding: $-s;
|
||||
margin-left: (2px - $-s);
|
||||
margin-right: (2px - $-s);
|
||||
margin-bottom: (2px - $-s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Dark Mode Overrides
|
||||
|
||||
Loading…
Reference in New Issue
Block a user