WYSWIYG: Allowed video/embed alignment controls

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

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index a0e7156ee6866bdbecdbe9dd43f057aa26b228ff..6973db8c86d606aab1cb628d8d3f1f36ca951f81 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,6 +13,7 @@ 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 styleFormats = [
     {title: 'Large Header', format: 'h2', preview: 'color: blue;'},
@@ -34,9 +36,9 @@ const styleFormats = [
 ];
 
 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'}},
@@ -77,12 +79,13 @@ function filePickerCallback(callback, value, meta) {
     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);
     }
 
     if (meta.filetype === 'image') {
@@ -147,23 +150,6 @@ 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 = window.tinymce.html.Node.create('#text');
-                newline.value = '\n';
-                node.replace(newline);
-            }
-        }
-    });
-}
-
 /**
  * @param {WysiwygConfigOptions} options
  * @return {function(Editor)}
@@ -189,9 +175,11 @@ function getSetupCallback(options) {
         });
 
         editor.on('PreInit', () => {
-            setupBrFilter(editor);
+            setupFilters(editor);
         });
 
+        handleEmbedAlignmentChanges(editor);
+
         // Custom handler hook
         window.$events.emitPublic(options.containerElement, 'editor-tinymce::setup', {editor});
 
@@ -268,7 +256,7 @@ 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,