Revamped workings of WYSIWYG code blocks

[bookstack] / resources / js / wysiwyg / config.js

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 7fa3b0f26522abc2cbb43cbfc0b51775051f9175..1b3b6e7b572053989cc4babebee20b6d4a4778d8 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -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,