Input WYSIWYG: Fixed up some dark mode elements

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

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 89efdb8a080d0d1b283735de3bf376a49629e0e4..963e2970d341356d83f685994026ab9091790c8c 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -4,6 +4,7 @@ import {scrollToQueryString} from './scrolling';
 import {listenForDragAndPaste} from './drop-paste-handling';
 import {getPrimaryToolbar, registerAdditionalToolbars} from './toolbars';
 import {registerCustomIcons} from './icons';
+import {setupFilters} from './filters';
 
 import {getPlugin as getCodeeditorPlugin} from './plugin-codeeditor';
 import {getPlugin as getDrawioPlugin} from './plugin-drawio';
@@ -12,8 +13,9 @@ 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';
+import {handleEmbedAlignmentChanges} from './fixes';
 
-const style_formats = [
+const styleFormats = [
     {title: 'Large Header', format: 'h2', preview: 'color: blue;'},
     {title: 'Medium Header', format: 'h3'},
     {title: 'Small Header', format: 'h4'},
@@ -34,16 +36,16 @@ const style_formats = [
 ];
 
 const formats = {
-    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,iframe,video,span', classes: 'align-left'},
+    aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,iframe,video,span', classes: 'align-center'},
+    alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,iframe,video,span', classes: 'align-right'},
     calloutsuccess: {block: 'p', exact: true, attributes: {class: 'callout success'}},
     calloutinfo: {block: 'p', exact: true, attributes: {class: 'callout info'}},
     calloutwarning: {block: 'p', exact: true, attributes: {class: 'callout warning'}},
     calloutdanger: {block: 'p', exact: true, attributes: {class: 'callout danger'}},
 };
 
-const color_map = [
+const colorMap = [
     '#BFEDD2', '',
     '#FBEEB8', '',
     '#F8CAC6', '',
@@ -72,16 +74,21 @@ const color_map = [
     '#ffffff', '',
 ];
 
-function file_picker_callback(callback, value, meta) {
+function filePickerCallback(callback, value, meta) {
     // field_name, url, type, win
     if (meta.filetype === 'file') {
         /** @type {EntitySelectorPopup} * */
         const selector = window.$components.first('entity-selector-popup');
+        const selectionText = this.selection.getContent({format: 'text'}).trim();
         selector.show(entity => {
             callback(entity.link, {
                 text: entity.name,
                 title: entity.name,
             });
+        }, selectionText, {
+            searchEndpoint: '/search/entity-selector',
+            entityTypes: 'page,book,chapter,bookshelf',
+            entityPermission: 'view',
         });
     }
 
@@ -119,12 +126,12 @@ function gatherPlugins(options) {
         options.textDirection === 'rtl' ? 'directionality' : '',
     ];
 
-    window.tinymce.PluginManager.add('codeeditor', getCodeeditorPlugin(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));
+    window.tinymce.PluginManager.add('codeeditor', getCodeeditorPlugin());
+    window.tinymce.PluginManager.add('customhr', getCustomhrPlugin());
+    window.tinymce.PluginManager.add('imagemanager', getImagemanagerPlugin());
+    window.tinymce.PluginManager.add('about', getAboutPlugin());
+    window.tinymce.PluginManager.add('details', getDetailsPlugin());
+    window.tinymce.PluginManager.add('tasklist', getTasklistPlugin());
 
     if (options.drawioUrl) {
         window.tinymce.PluginManager.add('drawio', getDrawioPlugin(options));
@@ -147,29 +154,19 @@ 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', 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)}
  */
 function getSetupCallback(options) {
-    return function(editor) {
+    return function setupCallback(editor) {
+        function editorChange() {
+            if (options.darkMode) {
+                editor.contentDocument.documentElement.classList.add('dark-mode');
+            }
+            window.$events.emit('editor-html-change', '');
+        }
+
         editor.on('ExecCommand change input NodeChange ObjectResized', editorChange);
         listenForCommonEvents(editor);
         listenForDragAndPaste(editor, options);
@@ -182,15 +179,10 @@ function getSetupCallback(options) {
         });
 
         editor.on('PreInit', () => {
-            setupBrFilter(editor);
+            setupFilters(editor);
         });
 
-        function editorChange() {
-            if (options.darkMode) {
-                editor.contentDocument.documentElement.classList.add('dark-mode');
-            }
-            window.$events.emit('editor-html-change', '');
-        }
+        handleEmbedAlignmentChanges(editor);
 
         // Custom handler hook
         window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
@@ -229,7 +221,7 @@ body {
  * @param {WysiwygConfigOptions} options
  * @return {Object}
  */
-export function build(options) {
+export function buildForEditor(options) {
     // Set language
     window.tinymce.addI18n(options.language, options.translationMap);
 
@@ -268,13 +260,13 @@ export function build(options) {
             '-doc-root[doc-root|#text]',
             '-li[details]',
             '+code-block[pre]',
-            '+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div]',
+            '+doc-root[p|h1|h2|h3|h4|h5|h6|blockquote|code-block|div|hr]',
         ].join(','),
         plugins: gatherPlugins(options),
         contextmenu: false,
         toolbar: getPrimaryToolbar(options),
         content_style: getContentStyle(options),
-        style_formats,
+        style_formats: styleFormats,
         style_formats_merge: false,
         media_alt_source: false,
         media_poster: false,
@@ -282,8 +274,8 @@ export function build(options) {
         table_style_by_css: true,
         table_use_colgroups: true,
         file_picker_types: 'file image',
-        color_map,
-        file_picker_callback,
+        color_map: colorMap,
+        file_picker_callback: filePickerCallback,
         paste_preprocess(plugin, args) {
             const {content} = args;
             if (content.indexOf('<img src="file://') !== -1) {
@@ -296,12 +288,60 @@ export function build(options) {
         },
         setup(editor) {
             registerCustomIcons(editor);
-            registerAdditionalToolbars(editor, options);
+            registerAdditionalToolbars(editor);
             getSetupCallback(options)(editor);
         },
     };
 }
 
+/**
+ * @param {WysiwygConfigOptions} options
+ * @return {RawEditorOptions}
+ */
+export function buildForInput(options) {
+    // Set language
+    window.tinymce.addI18n(options.language, options.translationMap);
+
+    // BookStack Version
+    const version = document.querySelector('script[src*="/dist/app.js"]').getAttribute('src').split('?version=')[1];
+
+    // Return config object
+    return {
+        width: '100%',
+        height: '185px',
+        target: options.containerElement,
+        cache_suffix: `?version=${version}`,
+        content_css: [
+            window.baseUrl('/dist/styles.css'),
+        ],
+        branding: false,
+        skin: options.darkMode ? 'tinymce-5-dark' : 'tinymce-5',
+        body_class: 'wysiwyg-input',
+        browser_spellcheck: true,
+        relative_urls: false,
+        language: options.language,
+        directionality: options.textDirection,
+        remove_script_host: false,
+        document_base_url: window.baseUrl('/'),
+        end_container_on_empty_block: true,
+        remove_trailing_brs: false,
+        statusbar: false,
+        menubar: false,
+        plugins: 'link autolink lists',
+        contextmenu: false,
+        toolbar: 'bold italic link bullist numlist',
+        content_style: getContentStyle(options),
+        file_picker_types: 'file',
+        file_picker_callback: filePickerCallback,
+        init_instance_callback(editor) {
+            const head = editor.getDoc().querySelector('head');
+            head.innerHTML += fetchCustomHeadContent();
+
+            editor.contentDocument.documentElement.classList.toggle('dark-mode', options.darkMode);
+        },
+    };
+}
+
 /**
  * @typedef {Object} WysiwygConfigOptions
  * @property {Element} containerElement