From 4e6b74f2a10365c7da9f52d0a98594b337a8a27c Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Fri, 1 Sep 2023 13:50:55 +0100
Subject: [PATCH] WYSIWYG: Added filtering of page pointer elements
For #4474
---
resources/js/wysiwyg/config.js | 20 ++--------------
resources/js/wysiwyg/filters.js | 41 +++++++++++++++++++++++++++++++++
2 files changed, 43 insertions(+), 18 deletions(-)
create mode 100644 resources/js/wysiwyg/filters.js
diff --git a/resources/js/wysiwyg/config.js b/resources/js/wysiwyg/config.js
index 37b810718..d93c9644e 100644
--- 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';
@@ -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
diff --git a/resources/js/wysiwyg/filters.js b/resources/js/wysiwyg/filters.js
new file mode 100644
index 000000000..4dd600630
--- /dev/null
+++ b/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);
+}