BUGFIX: Fix cleanupContentBeforeCommit and add test

Fix bug in the case you had multiple paragraphs and a headline and switched to autoparagrahp: false
neos · Jun 29, 2023 · bdd46a5 · bdd46a5
1 parent edbf0d6
commit bdd46a5
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 26 deletions.
diff --git a/packages/neos-ui-ckeditor5-bindings/package.json b/packages/neos-ui-ckeditor5-bindings/package.json
@@ -4,6 +4,10 @@
   "description": "Prepare CKEditor5 for the Neos CMS UI",
   "private": true,
   "main": "./src/manifest.js",
+  "scripts": {
+    "test": "yarn jest -w 2 --coverage",
+    "test:watch": "yarn jest --watch"
+  },
   "devDependencies": {
     "esbuild": "~0.17.0",
     "@neos-project/babel-preset-neos-ui": "7.3.17",
@@ -33,5 +37,8 @@
     "@neos-project/utils-helpers": "7.3.17",
     "raw-loader": "^0.5"
   },
-  "license": "GNU GPLv3"
+  "license": "GNU GPLv3",
+  "jest": {
+    "preset": "@neos-project/jest-preset-neos-ui"
+  }
 }
diff --git a/packages/neos-ui-ckeditor5-bindings/src/ckEditorApi.js b/packages/neos-ui-ckeditor5-bindings/src/ckEditorApi.js
@@ -1,31 +1,7 @@
 import debounce from 'lodash.debounce';
 import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
 import {actions} from '@neos-project/neos-ui-redux-store';
-
-// We remove opening and closing span tags that are produced by the inlineMode plugin
-/** @param {String} content */
-const cleanupContentBeforeCommit = content => {
-    // TODO: remove when this is fixed: https://github.com/ckeditor/ckeditor5/issues/401
-    if (content.match(/^<([a-z][a-z0-9]*)\b[^>]*>&nbsp;<\/\1>$/)) {
-        return '';
-    }
-
-    if (content.startsWith('<neos-inline-wrapper>') && content.endsWith('</neos-inline-wrapper>')) {
-        const contentWithoutOuterInlineWrapper = content
-            .replace(/^<neos-inline-wrapper>/, '')
-            .replace(/<\/neos-inline-wrapper>$/, '');
-
-        if (contentWithoutOuterInlineWrapper.includes('<neos-inline-wrapper>')) {
-            // in the case, multiple root paragraph elements were inserted into the ckeditor (wich is currently not prevented if the html is modified from outside)
-            // we have multiple root elements of type <neos-inline-wrapper>. We will convert all of them into spans.
-            return content
-                .replace(/<neos-inline-wrapper>/g, '<span>')
-                .replace(/<\/neos-inline-wrapper>/g, '</span>');
-        }
-        return contentWithoutOuterInlineWrapper;
-    }
-    return content;
-};
+import {cleanupContentBeforeCommit} from './cleanupContentBeforeCommit'
 
 let currentEditor = null;
 let editorConfig = {};

diff --git a/packages/neos-ui-ckeditor5-bindings/src/cleanupContentBeforeCommit.js b/packages/neos-ui-ckeditor5-bindings/src/cleanupContentBeforeCommit.js
@@ -0,0 +1,28 @@
+// We remove opening and closing span tags that are produced by the inlineMode plugin
+/** @param {String} content */
+export const cleanupContentBeforeCommit = content => {
+    // TODO: remove when this is fixed: https://github.com/ckeditor/ckeditor5/issues/401
+    if (content.match(/^<([a-z][a-z0-9]*)\b[^>]*>&nbsp;<\/\1>$/)) {
+        return '';
+    }
+
+    if (content.includes('<neos-inline-wrapper>')) {
+        let contentWithoutOuterInlineWrapper = content;
+
+        if (content.startsWith('<neos-inline-wrapper>') && content.endsWith('</neos-inline-wrapper>')) {
+            contentWithoutOuterInlineWrapper = content
+                .replace(/^<neos-inline-wrapper>/, '')
+                .replace(/<\/neos-inline-wrapper>$/, '');
+        }
+
+        if (contentWithoutOuterInlineWrapper.includes('<neos-inline-wrapper>')) {
+            // in the case, multiple root paragraph elements were inserted into the ckeditor (wich is currently not prevented if the html is modified from outside)
+            // we have multiple root elements of type <neos-inline-wrapper>. We will convert all of them into spans.
+            return content
+                .replace(/<neos-inline-wrapper>/g, '<span>')
+                .replace(/<\/neos-inline-wrapper>/g, '</span>');
+        }
+        return contentWithoutOuterInlineWrapper;
+    }
+    return content;
+};
diff --git a/packages/neos-ui-ckeditor5-bindings/src/cleanupContentBeforeCommit.spec.js b/packages/neos-ui-ckeditor5-bindings/src/cleanupContentBeforeCommit.spec.js
@@ -0,0 +1,36 @@
+import {cleanupContentBeforeCommit} from './cleanupContentBeforeCommit'
+
+const assertCleanedUpContent = (input, expected) => {
+    expect(cleanupContentBeforeCommit(input)).toBe(expected);
+}
+
+test('remove empty nbsp', () => {
+    assertCleanedUpContent('<p>&nbsp;</p>', '');
+    assertCleanedUpContent('<span>&nbsp;</span>', '');
+})
+
+describe('ckeditor inline mode hack, cleanup <neos-inline-wrapper>', () => {
+    test('noop', () => {
+        assertCleanedUpContent('<p></p>', '<p></p>');
+
+        assertCleanedUpContent('', '');
+    })
+
+    test('cleanup single <neos-inline-wrapper>', () => {
+        assertCleanedUpContent('<neos-inline-wrapper></neos-inline-wrapper>', '');
+        assertCleanedUpContent('<neos-inline-wrapper>foo</neos-inline-wrapper>', 'foo');
+
+        assertCleanedUpContent('<neos-inline-wrapper><span>foo</span></neos-inline-wrapper>', '<span>foo</span>');
+    })
+
+    test('cleanup multiple <neos-inline-wrapper>', () => {
+        assertCleanedUpContent('<neos-inline-wrapper>foo</neos-inline-wrapper><neos-inline-wrapper>bar</neos-inline-wrapper>', '<span>foo</span><span>bar</span>');
+
+        assertCleanedUpContent('<neos-inline-wrapper>foo</neos-inline-wrapper><neos-inline-wrapper>bar</neos-inline-wrapper>', '<span>foo</span><span>bar</span>');
+    })
+
+    test('cleanup <neos-inline-wrapper> after other root', () => {
+        // in the case you had multiple paragraphs and a headline and switched to autoparagrahp: false
+        assertCleanedUpContent('<h1>foo</h1><neos-inline-wrapper>bar</neos-inline-wrapper>', '<h1>foo</h1><span>bar</span>');
+    })
+})