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

Revamped workings of WYSIWYG code blocks

Browse Source 
Code blocks in tinymce could sometimes end up exploded into the sub
elements of the codemirror display.
This changes the strategy to render codemirror within the shadow dom of
a custom element while preserving the normal pre/code DOM structure.

Still a little instability when moving/adding code blocks within details
blocks but much harder to break things now.
This commit is contained in:
Dan Brown
2022-02-09 19:24:27 +00:00
parent 2b46b00f29
commit 2b3726702d
7 changed files with 216 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -210,16 +210,6 @@ 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}
@ -230,8 +220,6 @@ export function build(options) {
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 {
@ -254,10 +242,17 @@ export function build(options) {
statusbar: false,
menubar: false,
paste_data_images: false,
extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],doc-root',
extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*]',
automatic_uploads: false,
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]",
custom_elements: 'doc-root,code-block',
valid_children: [
"-div[p|h1|h2|h3|h4|h5|h6|blockquote|code-block]",
"+div[pre|img]",
"-doc-root[doc-root|#text]",
"-li[details]",
"+code-block[pre]",
"+doc-root[code-block]"
].join(','),
plugins: gatherPlugins(options),
imagetools_toolbar: 'imageoptions',
contextmenu: false,