Added wysiwyg filter to handle <br> tags within code blocks

This filters out <br> elements within code blocks and replaces them with
newlines. The editor started using <br>'s more harshley after some
configuration changes upon upgrading tinymce, in which we standardised
on forced br tags to avoid empty elements.

For #3327

diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index e75e4f7122330790b58667059025f90ff1c990d8..c32a5ffc16e3afb063fd6ff0a7e82eedc837a7fd 100644 (file)
--- a/resources/js/wysiwyg/config.js
+++ b/resources/js/wysiwyg/config.js
@@ -114,6 +114,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 = new tinymce.html.Node.create('#text');
+                newline.value = '\n';
+                node.replace(newline);
+            }
+        }
+    });
+}
+
 /**
  * @param {WysiwygConfigOptions} options
  * @return {function(Editor)}
@@ -131,6 +148,10 @@ function getSetupCallback(options) {
             window.editor = editor;
         });
 
+        editor.on('PreInit', () => {
+            setupBrFilter(editor);
+        });
+
         function editorChange() {
             const content = editor.getContent();
             if (options.darkMode) {