WYSIWYG: Added filtering of page pointer elements

For #4474

Author: ssddanbrown

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';
@@ -147,23 +148,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,7 +173,7 @@ function getSetupCallback(options) {
         });
 
         editor.on('PreInit', () => {
-            setupBrFilter(editor);
+            setupFilters(editor);
         });
 
         // Custom handler hook

resources/js/wysiwyg/filters.js

@@ -0,0 +1,41 @@
+/**
+ * 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);
+            }
+        }
+    });
+}
+
+/**
+ * Remove accidentally added pointer elements that are within the content.
+ * These could have accidentally been added via getting caught in range
+ * selection within page content.
+ * @param {Editor} editor
+ */
+function setupPointerFilter(editor) {
+    editor.parser.addNodeFilter('div', nodes => {
+        for (const node of nodes) {
+            if (node.attr('id') === 'pointer' || node.attr('class').includes('pointer')) {
+                node.remove();
+            }
+        }
+    });
+}
+
+/**
+ * Setup global default filters for the given editor instance.
+ * @param {Editor} editor
+ */
+export function setupFilters(editor) {
+    setupBrFilter(editor);
+    setupPointerFilter(editor);
+}