TASK: Use functions instead of extending CK classes

This reduces plugin size and reduces some issues with transformed classes and babel.

Resources/Private/Scripts/HyphensEditor/package.json

@@ -8,6 +8,7 @@
     "devDependencies": {
         "@ckeditor/ckeditor5-engine": "^13.1.1",
         "@ckeditor/ckeditor5-widget": "^10.3.1",
+        "@neos-project/eslint-config-neos": "^2.6.1",
         "@neos-project/neos-ui-extensibility": "^4.0.0",
         "@neos-project/react-ui-components": "^4.0.0"
     },

Resources/Private/Scripts/HyphensEditor/src/commands/nbsp.js

@@ -1,11 +1,10 @@
-import {Command} from 'ckeditor5-exports';
-
-export default class NbspCommand extends Command {
-    execute() {
-        const editor = this.editor;
-        editor.model.change((writer) => {
-            const insertPosition = editor.model.document.selection.getFirstPosition();
-            writer.insertText('\u00A0', insertPosition);
-        });
-    }
+export default function NbspCommand(editor) {
+    return {
+        execute: () => {
+            editor.model.change(writer => {
+                const insertPosition = editor.model.document.selection.getFirstPosition();
+                writer.insertText('\u00A0', insertPosition);
+            });
+        }
+    };
 }

Resources/Private/Scripts/HyphensEditor/src/commands/shy.js

@@ -1,11 +1,10 @@
-import {Command} from 'ckeditor5-exports';
-
-export default class ShyCommand extends Command {
-    execute() {
-        const editor = this.editor;
-        editor.model.change((writer) => {
-            const insertPosition = editor.model.document.selection.getFirstPosition();
-            writer.insertText('\u00AD', insertPosition);
-        });
-    }
+export default function ShyCommand(editor) {
+    return {
+        execute: () => {
+            editor.model.change(writer => {
+                const insertPosition = editor.model.document.selection.getFirstPosition();
+                writer.insertText('\u00AD', insertPosition);
+            });
+        }
+    };
 }

Resources/Private/Scripts/HyphensEditor/src/manifest.config.js

@@ -1,6 +1,6 @@
 import {$add, $get} from 'plow-js';
 
-import Hyphens from './plugins/hyphens';
+import HyphensFactory from './plugins/hyphens';
 
 const addPlugin = (Plugin, isEnabled) => (ckEditorConfiguration, options) => {
     if (!isEnabled || isEnabled(options.editorOptions, options)) {
@@ -13,7 +13,8 @@ const addPlugin = (Plugin, isEnabled) => (ckEditorConfiguration, options) => {
 export default (ckEditorRegistry, editorConfig) => {
     const config = ckEditorRegistry.get('config');
 
-    config.set('hyphens', addPlugin(Hyphens(editorConfig), $get('hyphens') || $get('nbsp')));
+    const HyphensPlugin = HyphensFactory(editorConfig);
+    config.set('hyphens', addPlugin(HyphensPlugin, $get('hyphens') || $get('nbsp')));
 
     return config;
 };

Resources/Private/Scripts/HyphensEditor/src/plugins/hyphens.js

@@ -1,4 +1,4 @@
-import {Plugin, ViewRange} from 'ckeditor5-exports';
+import {ViewRange} from 'ckeditor5-exports';
 import ShyCommand from '../commands/shy';
 import NbspCommand from '../commands/nbsp';
 import './hyphens.vanilla-css';
@@ -7,63 +7,57 @@ const softHyphenCharacter = '\u00AD';
 const nbspCharacter = '\u00A0';
 
 function HyphensFactory(config) {
-    return class Hyphens extends Plugin {
-        static get pluginName() {
-            return 'Hyphens';
-        }
-
-        init() {
-            const {editor} = this;
-
-            editor.commands.add('insertShyEntity', new ShyCommand(this.editor));
-            editor.commands.add('insertNbspEntity', new NbspCommand(this.editor));
+    return function Hyphens(editor) {
+        editor.commands.add('insertShyEntity', ShyCommand(editor));
+        editor.commands.add('insertNbspEntity', NbspCommand(editor));
 
-            if (config.shortcut) {
-                editor.keystrokes.set(config.shortcut, 'insertShyEntity');
-            }
-
-            editor.conversion.for('editingDowncast').add(dispatcher => {
-                dispatcher.on('insert:$text', (evt, data, conversionApi) => {
-                    // Here should be an `if` that would check whether the feature's command is enabled.
-                    if (!conversionApi.consumable.consume(data.item, 'insert')) {
-                        return;
-                    }
+        if (config.shortcut) {
+            editor.keystrokes.set(config.shortcut, 'insertShyEntity');
+        }
 
-                    const viewWriter = conversionApi.writer;
+        editor.conversion.for('editingDowncast').add(dispatcher => {
+            dispatcher.on('insert:$text', (evt, data, conversionApi) => {
+                // Here should be an `if` that would check whether the feature's command is enabled.
+                if (!conversionApi.consumable.consume(data.item, 'insert')) {
+                    return;
+                }
 
-                    let modelPosition = data.range.start;
-                    let viewPosition = conversionApi.mapper.toViewPosition(modelPosition);
+                const viewWriter = conversionApi.writer;
 
-                    const dataChunks = data.item.data.split(/([\u00AD,\u00A0])/);
+                let modelPosition = data.range.start;
+                let viewPosition = conversionApi.mapper.toViewPosition(modelPosition);
 
-                    for (let i = 0; i < dataChunks.length; i++) {
-                        const chunk = dataChunks[i];
+                const dataChunks = data.item.data.split(/([\u00AD,\u00A0])/);
 
-                        if (chunk === '') continue;
+                for (let i = 0; i < dataChunks.length; i++) {
+                    const chunk = dataChunks[i];
 
-                        viewWriter.insert(viewPosition, viewWriter.createText(chunk));
+                    if (chunk === '') {
+                        continue;
+                    }
 
-                        // Wrap special characters with spans and matching classes for styling
-                        if (chunk === nbspCharacter || chunk === softHyphenCharacter) {
-                            const characterClass = chunk === nbspCharacter ? 'nbsp' : 'shy';
-                            const viewSpaceSpan = viewWriter.createAttributeElement('span', {
-                                class: characterClass,
-                            });
-                            const modelWrapRange = new ViewRange(modelPosition, modelPosition.getShiftedBy(1));
-                            const viewWrapRange = conversionApi.mapper.toViewRange(modelWrapRange);
+                    viewWriter.insert(viewPosition, viewWriter.createText(chunk));
 
-                            viewWriter.wrap(viewWrapRange, viewSpaceSpan);
-                        }
+                    // Wrap special characters with spans and matching classes for styling
+                    if (chunk === nbspCharacter || chunk === softHyphenCharacter) {
+                        const characterClass = chunk === nbspCharacter ? 'nbsp' : 'shy';
+                        const viewSpaceSpan = viewWriter.createAttributeElement('span', {
+                            class: characterClass
+                        });
+                        const modelWrapRange = new ViewRange(modelPosition, modelPosition.getShiftedBy(1));
+                        const viewWrapRange = conversionApi.mapper.toViewRange(modelWrapRange);
 
-                        // Need to recalculate `viewPosition` after every inserted item.
-                        modelPosition = modelPosition.getShiftedBy(chunk.length);
-                        viewPosition = conversionApi.mapper.toViewPosition(modelPosition);
+                        viewWriter.wrap(viewWrapRange, viewSpaceSpan);
                     }
-                    evt.stop();
-                }, {priority: 'high'});
-            });
-        }
-    }
+
+                    // Need to recalculate `viewPosition` after every inserted item.
+                    modelPosition = modelPosition.getShiftedBy(chunk.length);
+                    viewPosition = conversionApi.mapper.toViewPosition(modelPosition);
+                }
+                evt.stop();
+            }, {priority: 'high'});
+        });
+    };
 }
 
 export default HyphensFactory;