TASK: cleanup disabled autoparagraph mode

packages/neos-ui-ckeditor5-bindings/src/cleanupContentBeforeCommit.js

@@ -1,9 +1,23 @@
-
-// TODO: remove when this is fixed: https://github.com/ckeditor/ckeditor5/issues/401
 /** @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 '';
     }
+
+    // We remove opening and closing span tags that are produced by the `DisabledAutoparagraphMode` plugin
+    if (content.startsWith('<span>') && content.endsWith('</span>')) {
+        const contentWithoutOuterSpan = content
+            .replace(/^<span>/, '')
+            .replace(/<\/span>$/, '');
+
+        if (contentWithoutOuterSpan.includes('<span>')) {
+            // In case there is still a span tag, we can be sure that the previously trimmed ones were belonging together,
+            // as it could be the case that multiple root paragraph/span elements were inserted into the ckeditor
+            // (which is currently not prevented if the html is modified from outside), so we will preserve the output.
+            return content;
+        }
+        return contentWithoutOuterSpan;
+    }
     return content;
 };

packages/neos-ui-ckeditor5-bindings/src/cleanupContentBeforeCommit.spec.js

@@ -8,3 +8,28 @@ test('remove empty nbsp', () => {
     assertCleanedUpContent('<p>&nbsp;</p>', '');
     assertCleanedUpContent('<span>&nbsp;</span>', '');
 })
+
+describe('ckeditor DisabledAutoparagraphMode hack, cleanup outer spans', () => {
+    test('noop', () => {
+        assertCleanedUpContent('<p></p>', '<p></p>');
+
+        assertCleanedUpContent('', '');
+
+        assertCleanedUpContent('<span><span>foo</span></span>', '<span><span>foo</span></span>');
+    })
+
+    test('cleanup single root <span>', () => {
+        assertCleanedUpContent('<span></span>', '');
+        assertCleanedUpContent('<span>foo</span>', 'foo');
+    })
+
+
+    test('cleanup multiple root <span>', () => {
+        assertCleanedUpContent('<span>foo</span><span>bar</span>', '<span>foo</span><span>bar</span>');
+    })
+
+    test('cleanup <span> root after other root', () => {
+        // in the case you had multiple paragraphs and a headline and switched to autoparagraph: false
+        assertCleanedUpContent('<h1>foo</h1><span>bar</span>', '<h1>foo</h1><span>bar</span>');
+    })
+})

packages/neos-ui-ckeditor5-bindings/src/manifest.config.js

@@ -2,7 +2,7 @@ import CkEditorConfigRegistry from './registry/CkEditorConfigRegistry';
 import {$add, $get, $or} from 'plow-js';
 import {stripTags} from '@neos-project/utils-helpers';
 
-import InlineMode from './plugins/inlineMode';
+import DisabledAutoparagraphMode from './plugins/disabledAutoparagraphMode';
 import Sub from './plugins/sub';
 import Sup from './plugins/sup';
 import LinkTargetBlank from './plugins/linkTargetBlank';
@@ -33,7 +33,7 @@ const addPlugin = (Plugin, isEnabled) => (ckEditorConfiguration, options) => {
 
 // If the editable is a span or a heading, we automatically disable paragraphs and enable the soft break mode
 // Also possible to force this behavior with `autoparagraph: false`
-const disableParagraph = (editorOptions, {propertyDomNode}) =>
+const disableAutoparagraph = (editorOptions, {propertyDomNode}) =>
     $get('autoparagraph', editorOptions) === false ||
     propertyDomNode.tagName === 'SPAN' ||
     propertyDomNode.tagName === 'H1' ||
@@ -100,7 +100,7 @@ export default ckEditorRegistry => {
     //
     config.set('essentials', addPlugin(Essentials));
     config.set('paragraph', addPlugin(Paragraph));
-    config.set('inlineMode', addPlugin(InlineMode, disableParagraph));
+    config.set('disabledAutoparagraphMode', addPlugin(DisabledAutoparagraphMode, disableAutoparagraph));
     config.set('sub', addPlugin(Sub, $get('formatting.sub')));
     config.set('sup', addPlugin(Sup, $get('formatting.sup')));
     config.set('bold', addPlugin(Bold, $get('formatting.strong')));

packages/neos-ui-ckeditor5-bindings/src/plugins/disabledAutoparagraphMode.js

@@ -0,0 +1,27 @@
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+/**
+ * HACK, since there is yet no native support for CKEditor 4 autoparagraph false
+ * see https://github.com/ckeditor/ckeditor5/issues/762
+ *
+ * We will try to find a serious alternative see https://github.com/neos/neos-ui/pull/3553
+ */
+export default class DisabledAutoparagraphMode extends Plugin {
+    static get pluginName() {
+        return 'DisabledAutoparagraphMode';
+    }
+    init() {
+        const editor = this.editor;
+
+        // we map paragraph model into plain <span> element
+        editor.conversion.for('downcast').elementToElement({model: 'paragraph', view: 'span', converterPriority: 'high'});
+
+        // we redefine enter key to create soft breaks (<br>) instead of new paragraphs
+        editor.editing.view.document.on('enter', (evt, data) => {
+            editor.execute('shiftEnter');
+            data.preventDefault();
+            evt.stop();
+            editor.editing.view.scrollToTheSelection();
+        }, {priority: 'high'});
+    }
+}