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

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 11090ce4b..1a38c1f59 100644
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -1,6 +1,6 @@
 import {register as registerShortcuts} from "./shortcuts";
 import {listen as listenForCommonEvents} from "./common-events";
-import {scrollToQueryString, fixScrollForMobile} from "./scrolling";
+import {scrollToQueryString} from "./scrolling";
 import {listenForDragAndPaste} from "./drop-paste-handling";
 
 import {getPlugin as getCodeeditorPlugin} from "./plugin-codeeditor";
@@ -16,7 +16,6 @@ const style_formats = [
     {title: "Tiny Header", format: "h5"},
     {title: "Paragraph", format: "p", exact: true, classes: ''},
     {title: "Blockquote", format: "blockquote"},
-    {title: "Inline Code", inline: "code"},
     {
         title: "Callouts", items: [
             {title: "Information", format: 'calloutinfo'},
@@ -61,24 +60,44 @@ function file_picker_callback(callback, value, meta) {
 
 /**
  * @param {WysiwygConfigOptions} options
- * @return {string}
+ * @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 strikethrough superscript subscript',
-        'forecolor backcolor',
+        'bold italic underline forecolor backcolor formatoverflow',
         'alignleft aligncenter alignright alignjustify',
-        'bullist numlist outdent indent',
+        'bullist numlist listoverflow',
         textDirPlugins,
-        'table imagemanager-insert link hr codeeditor drawio media',
-        'removeformat code about fullscreen'
+        'link table imagemanager-insert insertoverflow',
+        'code about fullscreen'
     ];
 
-    return toolbar.filter(row => Boolean(row)).join(' | ');
+    return {
+        toolbar: toolbar.filter(row => Boolean(row)).join(' | '),
+        groupButtons,
+    };
 }
 
 /**
@@ -119,16 +138,16 @@ function gatherPlugins(options) {
 }
 
 /**
- * Load custom HTML head content from the settings into the editor.
- * TODO: We should be able to get this from current parent page?
- * @param {Editor} editor
+ * Fetch custom HTML head content from the parent page head into the editor.
  */
-function loadCustomHeadContent(editor) {
-    window.$http.get(window.baseUrl('/custom-head-content')).then(resp => {
-        if (!resp.data) return;
-        let head = editor.getDoc().querySelector('head');
-        head.innerHTML += resp.data;
-    });
+function fetchCustomHeadContent() {
+    const headContentLines = document.head.innerHTML.split("\n");
+    const startLineIndex = headContentLines.findIndex(line => line.trim() === '<!-- Start: custom user content -->');
+    const endLineIndex = headContentLines.findIndex(line => line.trim() === '<!-- End: custom user content -->');
+    if (startLineIndex === -1 || endLineIndex === -1) {
+        return ''
+    }
+    return headContentLines.slice(startLineIndex + 1, endLineIndex).join('\n');
 }
 
 /**
@@ -145,7 +164,6 @@ function getSetupCallback(options) {
         editor.on('init', () => {
             editorChange();
             scrollToQueryString(editor);
-            fixScrollForMobile(editor);
             window.editor = editor;
         });
 
@@ -157,17 +175,17 @@ function getSetupCallback(options) {
             window.$events.emit('editor-html-change', content);
         }
 
-        // TODO - Update to standardise across both editors
-        // Use events within listenForBookStackEditorEvents instead (Different event signature)
-        window.$events.listen('editor-html-update', html => {
-            editor.setContent(html);
-            editor.selection.select(editor.getBody(), true);
-            editor.selection.collapse(false);
-            editorChange(html);
-        });
-
         // Custom handler hook
         window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
+
+        // Inline code format button
+        editor.ui.registry.addButton('inlinecode', {
+            tooltip: 'Inline code',
+            icon: 'sourcecode',
+            onAction() {
+                editor.execCommand('mceToggleFormat', false, 'code');
+            }
+        })
     }
 }
 
@@ -180,6 +198,8 @@ export function build(options) {
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 
+    const {toolbar, groupButtons: toolBarGroupButtons} = buildToolbar(options);
+
     // Return config object
     return {
         width: '100%',
@@ -207,7 +227,7 @@ export function build(options) {
         plugins: gatherPlugins(options),
         imagetools_toolbar: 'imageoptions',
         contextmenu: false,
-        toolbar: buildToolbar(options),
+        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;}`,
         style_formats,
         style_formats_merge: false,
@@ -217,15 +237,21 @@ export function build(options) {
         file_picker_types: 'file image',
         file_picker_callback,
         paste_preprocess(plugin, args) {
-            let content = args.content;
+            const content = args.content;
             if (content.indexOf('<img src="file://') !== -1) {
                 args.content = '';
             }
         },
         init_instance_callback(editor) {
-            loadCustomHeadContent(editor);
+            const head = editor.getDoc().querySelector('head');
+            head.innerHTML += fetchCustomHeadContent();
+        },
+        setup(editor) {
+            for (const [key, config] of Object.entries(toolBarGroupButtons)) {
+                editor.ui.registry.addGroupToolbarButton(key, config);
+            }
+            getSetupCallback(options)(editor);
         },
-        setup: getSetupCallback(options),
     };
 }