[WIP] CKEDITOR 5

Classes/EventListener/RteConfigEnhancer.php

@@ -14,19 +14,16 @@
 
 class RteConfigEnhancer
 {
-    public function beforeGetExternalPlugins(BeforeGetExternalPluginsEvent $event): void
+    public function beforePrepareConfiguration(BeforePrepareConfigurationForEditorEvent $event): void
     {
         $configuration = $event->getConfiguration();
-        $configuration['syntax_code'] = [
-            'resource' => 'EXT:syntax/Resources/Public/CKEditor/Plugins/Code/plugin.js',
+        $configuration['importModules'][] = [
+            'module' => '@bk2k/syntax/ckeditor5/plugin/syntax.js',
+            'exports' => [
+                'Syntax'
+            ]
         ];
-        $event->setConfiguration($configuration);
-    }
 
-    public function beforePrepareConfiguration(BeforePrepareConfigurationForEditorEvent $event): void
-    {
-        $configuration = $event->getConfiguration();
-        $configuration['extraPlugins'][] = 'syntax_code';
         $event->setConfiguration($configuration);
     }
 }

Configuration/JavaScriptModules.php

@@ -0,0 +1,20 @@
+<?php
+
+/*
+ * This file is part of the package bk2k/bootstrap-package.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE file that was distributed with this source code.
+ */
+
+return [
+    'tags' => [
+        'backend.form',
+    ],
+    'dependencies' => [
+        'rte_ckeditor'
+    ],
+    'imports' => [
+        '@bk2k/syntax/ckeditor5/plugin/syntax' => 'EXT:syntax/Resources/Public/JavaScript/ckeditor5/plugin/syntax.js',
+    ],
+];

Configuration/Services.yaml

@@ -1,10 +1,6 @@
 services:
   BK2K\Syntax\EventListener\RteConfigEnhancer:
     tags:
-      - name: event.listener
-        identifier: 'ext-syntax/rteConfigEnhancer'
-        method: 'beforeGetExternalPlugins'
-        event: TYPO3\CMS\RteCKEditor\Form\Element\Event\BeforeGetExternalPluginsEvent
       - name: event.listener
         identifier: 'ext-syntax/rteConfigEnhancer'
         method: 'beforePrepareConfiguration'

Resources/Public/JavaScript/ckeditor5/plugin/syntax.js

@@ -0,0 +1,32 @@
+import * as Core from '@ckeditor/ckeditor5-core';
+import * as UI from '@ckeditor/ckeditor5-ui';
+
+export class Syntax extends Core.Plugin {
+  static pluginName = 'Syntax';
+
+  init() {
+    const editor = this.editor;
+
+    editor.ui.componentFactory.add('softhyphen', locale => {
+      const button = new UI.ButtonView(locale);
+      button.label = 'Code';
+      button.icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9,16h-1.2l3.2-12h1.3l-3.3,12ZM7.3,6l-4.3,3.3v1.4l4.3,3.3-.1-1.7-2.9-2.3,3-2.3v-1.7ZM12.8,6v1.7l2.9,2.3-2.9,2.3v1.7l4.2-3.3v-1.4l-4.2-3.3Z"/></svg>';
+      button.tooltip = true;
+      button.on('execute', () => alert('insert code'));
+      return button;
+    });
+
+    editor.conversion.for('editingDowncast').add(downcastDispatcher => {
+      downcastDispatcher.on('insert:$text', (evt, data, conversionApi) => {
+        if (!conversionApi.consumable.consume(data.item, evt.name)) {
+          return;
+        }
+
+        console.log('downcast');
+
+      }, { priority: 'high' });
+    });
+  }
+}
+
+export default Syntax;