mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-07-16 16:22:44 +00:00
WYSIWYG details: Improved usage reliability and dark mdoe styles
This commit is contained in:
parent
a318775cfc
commit
536ad14276
|
@ -210,6 +210,16 @@ body {
|
||||||
}`.trim().replace('\n', '');
|
}`.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
|
* @param {WysiwygConfigOptions} options
|
||||||
* @return {Object}
|
* @return {Object}
|
||||||
|
@ -218,8 +228,10 @@ export function build(options) {
|
||||||
|
|
||||||
// Set language
|
// Set language
|
||||||
window.tinymce.addI18n(options.language, options.translationMap);
|
window.tinymce.addI18n(options.language, options.translationMap);
|
||||||
|
// Build toolbar content
|
||||||
const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
|
const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
|
||||||
|
// Define our custom root node
|
||||||
|
customElements.define('doc-root', DocRootElement, {extends: 'div'});
|
||||||
|
|
||||||
// Return config object
|
// Return config object
|
||||||
return {
|
return {
|
||||||
|
@ -242,9 +254,10 @@ export function build(options) {
|
||||||
statusbar: false,
|
statusbar: false,
|
||||||
menubar: false,
|
menubar: false,
|
||||||
paste_data_images: 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,
|
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),
|
plugins: gatherPlugins(options),
|
||||||
imagetools_toolbar: 'imageoptions',
|
imagetools_toolbar: 'imageoptions',
|
||||||
contextmenu: false,
|
contextmenu: false,
|
||||||
|
|
|
@ -178,13 +178,16 @@ function setupElementFilters(editor) {
|
||||||
* @param {tinymce.html.Node} detailsEl
|
* @param {tinymce.html.Node} detailsEl
|
||||||
*/
|
*/
|
||||||
function ensureDetailsWrappedInEditable(detailsEl) {
|
function ensureDetailsWrappedInEditable(detailsEl) {
|
||||||
|
unwrapDetailsEditable(detailsEl);
|
||||||
|
|
||||||
detailsEl.attr('contenteditable', 'false');
|
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()) {
|
for (const child of detailsEl.children()) {
|
||||||
if (child.name !== 'summary') {
|
if (child.name !== 'summary') {
|
||||||
wrap.append(child);
|
wrap.append(child);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
detailsEl.append(wrap);
|
detailsEl.append(wrap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -193,11 +196,17 @@ function ensureDetailsWrappedInEditable(detailsEl) {
|
||||||
*/
|
*/
|
||||||
function unwrapDetailsEditable(detailsEl) {
|
function unwrapDetailsEditable(detailsEl) {
|
||||||
detailsEl.attr('contenteditable', null);
|
detailsEl.attr('contenteditable', null);
|
||||||
|
let madeUnwrap = false;
|
||||||
for (const child of detailsEl.children()) {
|
for (const child of detailsEl.children()) {
|
||||||
if (child.attr('detailswrap')) {
|
if (child.name === 'doc-root') {
|
||||||
child.unwrap();
|
child.unwrap();
|
||||||
|
madeUnwrap = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (madeUnwrap) {
|
||||||
|
unwrapDetailsEditable(detailsEl);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -136,7 +136,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||||
}
|
}
|
||||||
|
|
||||||
details {
|
details {
|
||||||
border: 1px solid #DDD;
|
border: 1px solid;
|
||||||
|
@include lightDark(border-color, #DDD, #555);
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
padding: $-s;
|
padding: $-s;
|
||||||
}
|
}
|
||||||
|
@ -146,11 +147,13 @@ body.tox-fullscreen, body.markdown-fullscreen {
|
||||||
margin-right: -$-s;
|
margin-right: -$-s;
|
||||||
margin-bottom: -$-s;
|
margin-bottom: -$-s;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: #EEEEEE;
|
@include lightDark(background-color, #EEE, #333);
|
||||||
padding: $-xs $-s;
|
padding: $-xs $-s;
|
||||||
}
|
}
|
||||||
details[open] > summary {
|
details[open] > summary {
|
||||||
margin-bottom: 0;
|
margin-bottom: $-s;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
@include lightDark(border-color, #DDD, #555);
|
||||||
}
|
}
|
||||||
details > summary + * {
|
details > summary + * {
|
||||||
margin-top: .2em;
|
margin-top: .2em;
|
||||||
|
|
|
@ -17,6 +17,11 @@
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Default styles for our custom root nodes
|
||||||
|
.page-content.mce-content-body doc-root {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
// In editor line height override
|
// In editor line height override
|
||||||
.page-content.mce-content-body p {
|
.page-content.mce-content-body p {
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
@ -41,7 +46,7 @@ body.page-content.mce-content-body {
|
||||||
.page-content.mce-content-body details summary {
|
.page-content.mce-content-body details summary {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.page-content.mce-content-body details [detailswrap] {
|
.page-content.mce-content-body details doc-root {
|
||||||
padding: $-s;
|
padding: $-s;
|
||||||
margin-left: (2px - $-s);
|
margin-left: (2px - $-s);
|
||||||
margin-right: (2px - $-s);
|
margin-right: (2px - $-s);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user