FEATURE: Neos 9.1 CKEditor Toolbar support

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

@@ -1,14 +1,32 @@
 import HyphensFactory from './plugins/hyphens';
 
-const addPlugin = (Plugin) => (ckEditorConfiguration, options) => {
-    if (options.editorOptions && (options.editorOptions.nbsp || options.editorOptions.hyphens)) {
-        ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
-        ckEditorConfiguration.plugins.push(Plugin);
-    }
-    return ckEditorConfiguration;
-};
+/* global CKEDITOR_VERSION */
+
+// CKEditor toolbar support is available in Neos with CKEditor version 47 or higher
+export const CKEDITOR_TOOLBAR_ENABLED = parseInt(CKEDITOR_VERSION) >= 47;
+
+const addPlugin =
+    (Plugin) =>
+    (ckEditorConfiguration, { editorOptions }) => {
+        if (editorOptions && (editorOptions.nbsp || editorOptions.hyphens)) {
+            ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
+            ckEditorConfiguration.plugins.push(Plugin);
+
+            // Add buttons to ckeditor toolbar for CKEditor version 47 and higher which is enabled in Neos 9.1+
+            if (CKEDITOR_TOOLBAR_ENABLED) {
+                ckEditorConfiguration.toolbar.items.push('|');
+                if (editorOptions.hyphens) {
+                    ckEditorConfiguration.toolbar.items.push('hyphens');
+                }
+                if (editorOptions.nbsp) {
+                    ckEditorConfiguration.toolbar.items.push('nbsp');
+                }
+            }
+        }
+        return ckEditorConfiguration;
+    };
 
-export default (ckEditorRegistry, editorConfig) => {
+export const initializeConfigRegistry = (ckEditorRegistry, editorConfig) => {
     const config = ckEditorRegistry.get('config');
 
     const HyphensPlugin = HyphensFactory(editorConfig);

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

@@ -1,11 +1,14 @@
 import manifest from '@neos-project/neos-ui-extensibility';
 import initializeRichtextToolbarRegistry from './manifest.richtextToolbar';
-import initializeConfigRegistry from './manifest.config';
+import { initializeConfigRegistry, CKEDITOR_TOOLBAR_ENABLED } from './manifest.config';
 
 manifest('Shel.Neos:HyphenEditor', {}, (globalRegistry, { frontendConfiguration }) => {
     const ckEditorRegistry = globalRegistry.get('ckEditor5');
     const editorConfig = frontendConfiguration['Shel.Neos:HyphensEditor'];
 
-    initializeRichtextToolbarRegistry(ckEditorRegistry);
+    // Add buttons to ckeditor toolbar for CKEditor version 47 and higher which is enabled in Neos 9.1+
+    if (!CKEDITOR_TOOLBAR_ENABLED) {
+        initializeRichtextToolbarRegistry(ckEditorRegistry);
+    }
     initializeConfigRegistry(ckEditorRegistry, editorConfig);
 });

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

@@ -5,7 +5,16 @@ import { neos } from '@neos-project/neos-ui-decorators';
 
 import style from './editorButton.module.css';
 
-const BUTTON_PROPS = ['formattingRule', 'inlineEditorOptions', 'i18nRegistry', 'tooltip', 'isActive', 'label'];
+const BUTTON_PROPS = [
+    'formattingRule',
+    'inlineEditorOptions',
+    'i18nRegistry',
+    'tooltip',
+    'isActive',
+    'label',
+    'executeCommand',
+    'formattingUnderCursor',
+];
 
 const mapGlobalRegistryToProps = neos((globalRegistry) => ({
     i18nRegistry: globalRegistry.get('i18n'),

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

@@ -1,7 +1,10 @@
-import { ViewRange } from 'ckeditor5-exports';
+// Neos.Ui 8.3 -> 9.0 compatible import
+import { ViewRange, ButtonView } from 'ckeditor5-exports';
+
 import ShyCommand from '../commands/shy';
 import NbspCommand from '../commands/nbsp';
 import './hyphens.css';
+import { CKEDITOR_TOOLBAR_ENABLED } from '../manifest.config';
 
 const softHyphenCharacter = '\u00AD';
 const nbspCharacter = '\u00A0';
@@ -15,6 +18,46 @@ function HyphensFactory(config) {
             editor.keystrokes.set(config.shortcut, 'insertShyEntity');
         }
 
+        // Add buttons to ckeditor toolbar for CKEditor version 47 and higher which is enabled in Neos 9.1+
+        if (CKEDITOR_TOOLBAR_ENABLED) {
+            editor.ui.componentFactory.add('hyphens', () => {
+                const buttonView = new ButtonView();
+
+                buttonView.set({
+                    label: 'Insert soft hyphen',
+                    withText: false,
+                    tooltip: true,
+                    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="18.109" height="9.697" viewBox="0, 0, 18.109, 9.697"><g stroke="currentColor" stroke-miterlimit="3.864" fill="none"><path d="M2.596 1a5.44 5.44 0 0 0 0 7.697m12.918 0a5.44 5.44 0 0 0 0-7.697" stroke-width=".907"></path><path d="M4.52 4.848h9.07" stroke-width="1.814"></path></g></svg>',
+                });
+
+                // Execute the command when button is clicked
+                buttonView.on('execute', () => {
+                    editor.execute('insertShyEntity');
+                    editor.editing.view.focus();
+                });
+
+                return buttonView;
+            });
+            editor.ui.componentFactory.add('nbsp', () => {
+                const buttonView = new ButtonView();
+
+                buttonView.set({
+                    label: 'Insert non-breaking space',
+                    withText: false,
+                    tooltip: true,
+                    icon: '<svg width="18px" height="9px" viewBox="0 0 18 9" version="1.1" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M16.3846154,2.61538462 L16.3846154,7.53846154 M16.3846154,7.53846154 L1.61538462,7.53846154 M1.61538462,2.61538462 L1.61538462,7.53846154" id="Combined-Shape" stroke="currentColor" stroke-width="1.8"></path></g></svg>',
+                });
+
+                // Execute the command when button is clicked
+                buttonView.on('execute', () => {
+                    editor.execute('insertNbspEntity');
+                    editor.editing.view.focus();
+                });
+
+                return buttonView;
+            });
+        }
+
         editor.conversion.for('editingDowncast').add((dispatcher) => {
             dispatcher.on(
                 'insert:$text',

eslint.config.js

@@ -31,7 +31,7 @@ module.exports = defineConfig([
 
         settings: {
             react: {
-                version: "detect",
+                version: "18.0",
             },
         },