X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/f991948c4931ecf2d4e32dadc8b099207f76fa82..refs/pull/3593/head:/resources/js/wysiwyg/config.js

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index fab6a3886..66c22d98e 100644
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -62,14 +62,12 @@ function file_picker_callback(callback, value, meta) {
 
 /**
  * @param {WysiwygConfigOptions} options
- * @return {string}
+ * @return {string[]}
  */
 function gatherPlugins(options) {
     const plugins = [
         "image",
-        "imagetools",
         "table",
-        "paste",
         "link",
         "autolink",
         "fullscreen",
@@ -98,7 +96,7 @@ function gatherPlugins(options) {
         plugins.push('drawio');
     }
 
-    return plugins.filter(plugin => Boolean(plugin)).join(' ');
+    return plugins.filter(plugin => Boolean(plugin));
 }
 
 /**
@@ -114,6 +112,23 @@ function fetchCustomHeadContent() {
     return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n');
 }
 
+/**
+ * Setup a serializer filter for <br> tags to ensure they're not rendered
+ * within code blocks and that we use newlines there instead.
+ * @param {Editor} editor
+ */
+function setupBrFilter(editor) {
+    editor.serializer.addNodeFilter('br', function(nodes) {
+        for (const node of nodes) {
+            if (node.parent && node.parent.name === 'code') {
+                const newline = tinymce.html.Node.create('#text');
+                newline.value = '\n';
+                node.replace(newline);
+            }
+        }
+    });
+}
+
 /**
  * @param {WysiwygConfigOptions} options
  * @return {function(Editor)}
@@ -131,6 +146,10 @@ function getSetupCallback(options) {
             window.editor = editor;
         });
 
+        editor.on('PreInit', () => {
+            setupBrFilter(editor);
+        });
+
         function editorChange() {
             const content = editor.getContent();
             if (options.darkMode) {
@@ -194,7 +213,7 @@ export function build(options) {
             window.baseUrl('/dist/styles.css'),
         ],
         branding: false,
-        skin: options.darkMode ? 'oxide-dark' : 'oxide',
+        skin: options.darkMode ? 'tinymce-5-dark' : 'tinymce-5',
         body_class: 'page-content',
         browser_spellcheck: true,
         relative_urls: false,
@@ -207,7 +226,7 @@ export function build(options) {
         statusbar: false,
         menubar: false,
         paste_data_images: false,
-        extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*],li[class]',
+        extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*],li[class|checked]',
         automatic_uploads: false,
         custom_elements: 'doc-root,code-block',
         valid_children: [
@@ -216,10 +235,9 @@ export function build(options) {
             "-doc-root[doc-root|#text]",
             "-li[details]",
             "+code-block[pre]",
-            "+doc-root[code-block]"
+            "+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]"
         ].join(','),
         plugins: gatherPlugins(options),
-        imagetools_toolbar: 'imageoptions',
         contextmenu: false,
         toolbar: getPrimaryToolbar(options),
         content_style: getContentStyle(options),
@@ -228,6 +246,8 @@ export function build(options) {
         media_alt_source: false,
         media_poster: false,
         formats,
+        table_style_by_css: true,
+        table_use_colgroups: true,
         file_picker_types: 'file image',
         file_picker_callback,
         paste_preprocess(plugin, args) {