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

WYSIWYG details: Improved usage reliability and dark mdoe styles

Browse Source
This commit is contained in:
Dan Brown
2022-02-09 11:25:22 +00:00
parent a318775cfc
commit 536ad14276
4 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -210,6 +210,16 @@ body {
}`.trim().replace('\n', '');
}
// Custom "Document Root" element, a custom element to identify/define
// block that may act as another "editable body".
// Using a custom node means we can identify and add/remove these as desired
// without affecting user content.
class DocRootElement extends HTMLDivElement {
constructor() {
super();
}
}
/**
* @param {WysiwygConfigOptions} options
* @return {Object}
@ -218,8 +228,10 @@ export function build(options) {
// Set language
window.tinymce.addI18n(options.language, options.translationMap);
// Build toolbar content
const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
// Define our custom root node
customElements.define('doc-root', DocRootElement, {extends: 'div'});
// Return config object
return {
@ -242,9 +254,10 @@ export function build(options) {
statusbar: false,
menubar: false,
paste_data_images: false,
extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*]',
extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],doc-root',
automatic_uploads: false,
valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote],+div[pre],+div[img]",
custom_elements: 'doc-root',
valid_children: "-div[p|h1|h2|h3|h4|h5|h6|blockquote|div],+div[pre],+div[img],+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|pre|img|ul|ol],-doc-root[doc-root|#text]",
plugins: gatherPlugins(options),
imagetools_toolbar: 'imageoptions',
contextmenu: false,

13
resources/js/wysiwyg/plugins-details.js
View File

@ -178,13 +178,16 @@ function setupElementFilters(editor) {
* @param {tinymce.html.Node} detailsEl
*/
function ensureDetailsWrappedInEditable(detailsEl) {
unwrapDetailsEditable(detailsEl);
detailsEl.attr('contenteditable', 'false');
const wrap = tinymce.html.Node.create('div', {detailswrap: 'true', contenteditable: 'true'});
const wrap = tinymce.html.Node.create('doc-root', {contenteditable: 'true'});
for (const child of detailsEl.children()) {
if (child.name !== 'summary') {
wrap.append(child);
}
}
detailsEl.append(wrap);
}
@ -193,11 +196,17 @@ function ensureDetailsWrappedInEditable(detailsEl) {
*/
function unwrapDetailsEditable(detailsEl) {
detailsEl.attr('contenteditable', null);
let madeUnwrap = false;
for (const child of detailsEl.children()) {
if (child.attr('detailswrap')) {
if (child.name === 'doc-root') {
child.unwrap();
madeUnwrap = true;
}
}
if (madeUnwrap) {
unwrapDetailsEditable(detailsEl);
}
}