Added test to cover export body start/end partial usage

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

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 1a38c1f597591e72674d260fec06a93b4906cc3e..52c52592cb720fab6a235a5d04ea4902cbf89515 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -2,12 +2,15 @@ import {register as registerShortcuts} from "./shortcuts";
 import {listen as listenForCommonEvents} from "./common-events";
 import {scrollToQueryString} from "./scrolling";
 import {listenForDragAndPaste} from "./drop-paste-handling";
 import {listen as listenForCommonEvents} from "./common-events";
 import {scrollToQueryString} from "./scrolling";
 import {listenForDragAndPaste} from "./drop-paste-handling";

+import {getPrimaryToolbar, registerAdditionalToolbars} from "./toolbars";

 
 import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
 import {getPlugin as getDrawioPlugin} from "./plugin-drawio";
 import {getPlugin as getCustomhrPlugin} from "./plugins-customhr";
 import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager";
 import {getPlugin as getAboutPlugin} from "./plugins-about";
 
 import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
 import {getPlugin as getDrawioPlugin} from "./plugin-drawio";
 import {getPlugin as getCustomhrPlugin} from "./plugins-customhr";
 import {getPlugin as getImagemanagerPlugin} from "./plugins-imagemanager";
 import {getPlugin as getAboutPlugin} from "./plugins-about";

+import {getPlugin as getDetailsPlugin} from "./plugins-details";
+import {getPlugin as getTasklistPlugin} from "./plugins-tasklist";

 
 const style_formats = [
     {title: "Large Header", format: "h2", preview: 'color: blue;'},
 
 const style_formats = [
     {title: "Large Header", format: "h2", preview: 'color: blue;'},


@@ -27,7 +30,6 @@ const style_formats = [
 ];
 
 const formats = {
 ];
 
 const formats = {

-    codeeditor: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div'},

     alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
     aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
     alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},
     alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-left'},
     aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-center'},
     alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'align-right'},


@@ -37,6 +39,35 @@ const formats = {
     calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}
 };
 
     calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}}
 };
 

+const color_map = [
+    '#BFEDD2', '',
+    '#FBEEB8', '',
+    '#F8CAC6', '',
+    '#ECCAFA', '',
+    '#C2E0F4', '',
+
+    '#2DC26B', '',
+    '#F1C40F', '',
+    '#E03E2D', '',
+    '#B96AD9', '',
+    '#3598DB', '',
+
+    '#169179', '',
+    '#E67E23', '',
+    '#BA372A', '',
+    '#843FA1', '',
+    '#236FA1', '',
+
+    '#ECF0F1', '',
+    '#CED4D9', '',
+    '#95A5A6', '',
+    '#7E8C8D', '',
+    '#34495E', '',
+
+    '#000000', '',
+    '#ffffff', ''
+];
+

 function file_picker_callback(callback, value, meta) {
 
     // field_name, url, type, win
 function file_picker_callback(callback, value, meta) {
 
     // field_name, url, type, win


@@ -60,56 +91,12 @@ function file_picker_callback(callback, value, meta) {
 
 /**
  * @param {WysiwygConfigOptions} options
 
 /**
  * @param {WysiwygConfigOptions} options

- * @return {{toolbar: string, groupButtons: Object<string, Object>}}
- */
-function buildToolbar(options) {
-    const textDirPlugins = options.textDirection === 'rtl' ? 'ltr rtl' : '';
-
-    const groupButtons = {
-        formatoverflow: {
-            icon: 'more-drawer',
-            tooltip: 'More',
-            items: 'strikethrough superscript subscript inlinecode removeformat'
-        },
-        listoverflow: {
-            icon: 'more-drawer',
-            tooltip: 'More',
-            items: 'outdent indent'
-        },
-        insertoverflow: {
-            icon: 'more-drawer',
-            tooltip: 'More',
-            items: 'hr codeeditor drawio media'
-        }
-    };
-
-    const toolbar = [
-        'undo redo',
-        'styleselect',
-        'bold italic underline forecolor backcolor formatoverflow',
-        'alignleft aligncenter alignright alignjustify',
-        'bullist numlist listoverflow',
-        textDirPlugins,
-        'link table imagemanager-insert insertoverflow',
-        'code about fullscreen'
-    ];
-
-    return {
-        toolbar: toolbar.filter(row => Boolean(row)).join(' | '),
-        groupButtons,
-    };
-}
-
-/**
- * @param {WysiwygConfigOptions} options
- * @return {string}
+ * @return {string[]}

  */
 function gatherPlugins(options) {
     const plugins = [
         "image",
  */
 function gatherPlugins(options) {
     const plugins = [
         "image",

-        "imagetools",

         "table",
         "table",

-        "paste",

         "link",
         "autolink",
         "fullscreen",
         "link",
         "autolink",
         "fullscreen",


@@ -121,6 +108,8 @@ function gatherPlugins(options) {
         "media",
         "imagemanager",
         "about",
         "media",
         "imagemanager",
         "about",

+        "details",
+        "tasklist",

         options.textDirection === 'rtl' ? 'directionality' : '',
     ];
 
         options.textDirection === 'rtl' ? 'directionality' : '',
     ];
 


@@ -128,13 +117,15 @@ function gatherPlugins(options) {
     window.tinymce.PluginManager.add('customhr', getCustomhrPlugin(options));
     window.tinymce.PluginManager.add('imagemanager', getImagemanagerPlugin(options));
     window.tinymce.PluginManager.add('about', getAboutPlugin(options));
     window.tinymce.PluginManager.add('customhr', getCustomhrPlugin(options));
     window.tinymce.PluginManager.add('imagemanager', getImagemanagerPlugin(options));
     window.tinymce.PluginManager.add('about', getAboutPlugin(options));

+    window.tinymce.PluginManager.add('details', getDetailsPlugin(options));
+    window.tinymce.PluginManager.add('tasklist', getTasklistPlugin(options));

 
     if (options.drawioUrl) {
         window.tinymce.PluginManager.add('drawio', getDrawioPlugin(options));
         plugins.push('drawio');
     }
 
 
     if (options.drawioUrl) {
         window.tinymce.PluginManager.add('drawio', getDrawioPlugin(options));
         plugins.push('drawio');
     }
 

-    return plugins.filter(plugin => Boolean(plugin)).join(' ');
+    return plugins.filter(plugin => Boolean(plugin));

 }
 
 /**
 }
 
 /**


@@ -150,6 +141,23 @@ function fetchCustomHeadContent() {
     return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n');
 }
 
     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)}
 /**
  * @param {WysiwygConfigOptions} options
  * @return {function(Editor)}


@@ -158,13 +166,17 @@ function getSetupCallback(options) {
     return function(editor) {
         editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
         listenForCommonEvents(editor);
     return function(editor) {
         editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
         listenForCommonEvents(editor);

-        registerShortcuts(editor);

         listenForDragAndPaste(editor, options);
 
         editor.on('init', () => {
             editorChange();
             scrollToQueryString(editor);
             window.editor = editor;
         listenForDragAndPaste(editor, options);
 
         editor.on('init', () => {
             editorChange();
             scrollToQueryString(editor);
             window.editor = editor;

+            registerShortcuts(editor);
+        });
+
+        editor.on('PreInit', () => {
+            setupBrFilter(editor);

         });
 
         function editorChange() {
         });
 
         function editorChange() {


@@ -189,6 +201,25 @@ function getSetupCallback(options) {
     }
 }
 
     }
 }
 

+/**
+ * @param {WysiwygConfigOptions} options
+ */
+function getContentStyle(options) {
+    return `
+html, body, html.dark-mode {
+    background: ${options.darkMode ? '#222' : '#fff'};
+} 
+body {
+    padding-left: 15px !important;
+    padding-right: 15px !important; 
+    height: initial !important;
+    margin:0!important; 
+    margin-left: auto! important;
+    margin-right: auto !important;
+    overflow-y: hidden !important;
+}`.trim().replace('\n', '');
+}
+

 /**
  * @param {WysiwygConfigOptions} options
  * @return {Object}
 /**
  * @param {WysiwygConfigOptions} options
  * @return {Object}


@@ -198,18 +229,20 @@ export function build(options) {
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 

-    const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
+    // BookStack Version
+    const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];

 
     // Return config object
     return {
         width: '100%',
         height: '100%',
         selector: '#html-editor',
 
     // Return config object
     return {
         width: '100%',
         height: '100%',
         selector: '#html-editor',

+        cache_suffix: '?version=' + version,

         content_css: [
             window.baseUrl('/dist/styles.css'),
         ],
         branding: false,
         content_css: [
             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,
         body_class: 'page-content',
         browser_spellcheck: true,
         relative_urls: false,


@@ -218,23 +251,34 @@ export function build(options) {
         remove_script_host: false,
         document_base_url: window.baseUrl('/'),
         end_container_on_empty_block: true,
         remove_script_host: false,
         document_base_url: window.baseUrl('/'),
         end_container_on_empty_block: true,

+        remove_trailing_brs: false,

         statusbar: false,
         menubar: false,
         paste_data_images: false,
         statusbar: false,
         menubar: false,
         paste_data_images: false,

-        extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram]',
+        extended_valid_elements: 'pre[*],svg[*],div[drawio-diagram],details[*],summary[*],div[*],li[class|checked]',

         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,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[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]"
+        ].join(','),

         plugins: gatherPlugins(options),
         plugins: gatherPlugins(options),

-        imagetools_toolbar: 'imageoptions',

         contextmenu: false,
         contextmenu: false,

-        toolbar: toolbar,
-        content_style: `html, body, html.dark-mode {background: ${options.darkMode ? '#222' : '#fff'};} body {padding-left: 15px !important; padding-right: 15px !important; margin:0!important; margin-left:auto!important;margin-right:auto!important;}`,
+        toolbar: getPrimaryToolbar(options),
+        content_style: getContentStyle(options),

         style_formats,
         style_formats_merge: false,
         media_alt_source: false,
         media_poster: false,
         formats,
         style_formats,
         style_formats_merge: false,
         media_alt_source: false,
         media_poster: false,
         formats,

+        table_style_by_css: true,
+        table_use_colgroups: true,

         file_picker_types: 'file image',
         file_picker_types: 'file image',

+        color_map,

         file_picker_callback,
         paste_preprocess(plugin, args) {
             const content = args.content;
         file_picker_callback,
         paste_preprocess(plugin, args) {
             const content = args.content;


@@ -247,9 +291,7 @@ export function build(options) {
             head.innerHTML += fetchCustomHeadContent();
         },
         setup(editor) {
             head.innerHTML += fetchCustomHeadContent();
         },
         setup(editor) {

-            for (const [key, config] of Object.entries(toolBarGroupButtons)) {
-                editor.ui.registry.addGroupToolbarButton(key, config);
-            }
+            registerAdditionalToolbars(editor, options);

             getSetupCallback(options)(editor);
         },
     };
             getSetupCallback(options)(editor);
         },
     };