[BUGFIX] Add font plugin to CKEditor5

Add the configuration to the "Full" RTE preset, and also include some modules that missed in Full preset since #102099. npm install --save @ckeditor/ckeditor5-font@41.1.0 npm run build Resolves: #100847 Releases: main, 12.4 Change-Id: Iaa56d48e043397aefb902b6c9a5afbfcc453ae74 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/79006 Tested-by: core-ci <typo3@b13.com> Reviewed-by: Torben Hansen <derhansen@gmail.com> Tested-by: David Bruchmann <david.bruchmann@gmail.com> Reviewed-by: Benjamin Franzke <ben@bnf.dev> Reviewed-by: Benni Mack <benni@typo3.org> Tested-by: Guido Schmechel <guido.schmechel@brandung.de> Reviewed-by: David Bruchmann <david.bruchmann@gmail.com> Tested-by: Benni Mack <benni@typo3.org> Tested-by: Benjamin Franzke <ben@bnf.dev> Tested-by: Torben Hansen <derhansen@gmail.com> Reviewed-by: Guido Schmechel <guido.schmechel@brandung.de>
TYPO3 · Feb 19, 2024 · f2c2786 · f2c2786
1 parent 038d7ac
commit f2c2786
Show file tree

Hide file tree

Showing 67 changed files with 272 additions and 62 deletions.
diff --git a/Build/package-lock.json b/Build/package-lock.json
diff --git a/Build/package.json b/Build/package.json
@@ -96,6 +96,7 @@
     "@ckeditor/ckeditor5-engine": "^41.1.0",
     "@ckeditor/ckeditor5-essentials": "^41.1.0",
     "@ckeditor/ckeditor5-find-and-replace": "^41.1.0",
+    "@ckeditor/ckeditor5-font": "^41.1.0",
     "@ckeditor/ckeditor5-heading": "^41.1.0",
     "@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
     "@ckeditor/ckeditor5-html-support": "^41.1.0",

diff --git a/Build/web-test-runner.config.mjs b/Build/web-test-runner.config.mjs
@@ -151,6 +151,7 @@ export default {
             '@ckeditor/ckeditor5-enter': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-enter.js',
             '@ckeditor/ckeditor5-essentials': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-essentials.js',
             '@ckeditor/ckeditor5-find-and-replace': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-find-and-replace.js',
+            '@ckeditor/ckeditor5-font': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-font.js',
             '@ckeditor/ckeditor5-heading': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-heading.js',
             '@ckeditor/ckeditor5-horizontal-line': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-horizontal-line.js',
             '@ckeditor/ckeditor5-html-support': './typo3/rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-html-support.js',

diff --git a/typo3/sysext/core/Classes/Configuration/CKEditor5Migrator.php b/typo3/sysext/core/Classes/Configuration/CKEditor5Migrator.php
@@ -160,11 +160,11 @@ class CKEditor5Migrator
         // styles
         'Styles' => 'style',
         'Format' => 'heading',
-        'Font' => null,
-        'FontSize' => null,
+        'Font' => 'fontFamily',
+        'FontSize' => 'fontSize',
         // colors
-        'TextColor' => null,
-        'BGColor' => null,
+        'TextColor' => 'fontColor',
+        'BGColor' => 'fontBackgroundColor',
         // tools
         'Maximize' => null,
         'ShowBlocks' => null,
@@ -202,6 +202,14 @@ class CKEditor5Migrator
             'module' => '@ckeditor/ckeditor5-link',
             'exports' => [ 'AutoLink' ],
         ],
+        'font' => [
+            'module' => '@ckeditor/ckeditor5-font',
+            'exports' => [ 'Font' ],
+        ],
+        'Font' => [
+            'module' => '@ckeditor/ckeditor5-font',
+            'exports' => [ 'Font' ],
+        ],
         'justify' => [
             'module' => '@ckeditor/ckeditor5-alignment',
             'exports' => [ 'Alignment' ],

diff --git a/.../Documentation/Changelog/12.4.x/Important-100847-AddedFontPluginToCKEditor5.rst b/.../Documentation/Changelog/12.4.x/Important-100847-AddedFontPluginToCKEditor5.rst
@@ -0,0 +1,62 @@
+.. include:: /Includes.rst.txt
+
+.. _important-100847-1686218342:
+
+===================================================
+Important: #100847 - Added font plugin to CKEditor5
+===================================================
+
+See :issue:`100847`
+
+Description
+===========
+
+The font plugin has been added to the CKEditor5.
+In order to use the font plugin, the RTE configuration needs to be adapted:
+
+.. code-block:: yaml
+
+    editor:
+      config:
+        toolbar:
+          items:
+            # add button to select font family
+            - fontFamily
+            # add button to select font size
+            - fontSize
+            # add button to select font color
+            - fontColor
+            # add button to select font background color
+            - fontBackgroundColor
+
+        fontColor:
+          colors:
+            - { label: 'Orange', color: '#ff8700' }
+            - { label: 'Blue', color: '#0080c9' }
+            - { label: 'Green', color: '#209d44' }
+
+        fontBackgroundColor:
+          colors:
+            - { label: 'Stage orange light', color: '#fab85c' }
+
+        fontFamily:
+          options:
+            - 'default'
+            - 'Arial, sans-serif'
+
+        fontSize:
+          options:
+            - 'default'
+            - 18
+            - 21
+
+        importModules:
+          - { 'module': '@ckeditor/ckeditor5-font', 'exports': ['Font'] }
+
+
+More information can be found in the official documentation_.
+
+
+.. _documentation: https://ckeditor.com/docs/ckeditor5/latest/features/font.html
+
+.. index:: RTE, ext:rte_ckeditor
diff --git a/typo3/sysext/core/Tests/Unit/Configuration/CKEditor5MigratorTest.php b/typo3/sysext/core/Tests/Unit/Configuration/CKEditor5MigratorTest.php
@@ -757,6 +757,8 @@ public static function migrationDataProvider(): array
                                 'items' => [
                                     'style',
                                     'heading',
+                                    'fontFamily',
+                                    'fontSize',
                                     '|',
                                     'bold',
                                     'italic',
@@ -890,6 +892,8 @@ public static function migrationDataProvider(): array
                                     '-',
                                     'style',
                                     'heading',
+                                    'fontFamily',
+                                    'fontSize',
                                 ],
                                 'removeItems' => [],
                                 'shouldNotGroupWhenFull' => true,

diff --git a/typo3/sysext/rte_ckeditor/Configuration/JavaScriptModules.php b/typo3/sysext/rte_ckeditor/Configuration/JavaScriptModules.php
@@ -27,6 +27,7 @@
         '@ckeditor/ckeditor5-enter' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-enter.js',
         '@ckeditor/ckeditor5-essentials' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-essentials.js',
         '@ckeditor/ckeditor5-find-and-replace' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-find-and-replace.js',
+        '@ckeditor/ckeditor5-font' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-font.js',
         '@ckeditor/ckeditor5-heading' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-heading.js',
         '@ckeditor/ckeditor5-horizontal-line' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-horizontal-line.js',
         '@ckeditor/ckeditor5-html-support' => 'EXT:rte_ckeditor/Resources/Public/Contrib/@ckeditor/ckeditor5-html-support.js',

diff --git a/typo3/sysext/rte_ckeditor/Configuration/RTE/Full.yaml b/typo3/sysext/rte_ckeditor/Configuration/RTE/Full.yaml
@@ -70,6 +70,10 @@ editor:
         - '-'
         - style
         - heading
+        - fontFamily
+        - fontBackgroundColor
+        - fontColor
+        - fontSize
 
     alignment:
       options:
@@ -87,3 +91,29 @@ editor:
         - tableProperties
         - tableCellProperties
         - toggleTableCaption
+
+    fontColor:
+      colors:
+        - { label: 'Orange', color: '#ff8700' }
+        - { label: 'Blue', color: '#0080c9' }
+        - { label: 'Green', color: '#209d44' }
+
+    fontBackgroundColor:
+      colors:
+        - { label: 'Stage orange light', color: '#fab85c' }
+
+    fontFamily:
+      options:
+        - 'default'
+        - 'Arial, sans-serif'
+
+    fontSize:
+      options:
+        - 'default'
+        - 18
+        - 21
+
+    importModules:
+      - { 'module': '@ckeditor/ckeditor5-font', 'exports': ['Font'] }
+      - { 'module': '@ckeditor/ckeditor5-show-blocks', 'exports': ['ShowBlocks'] }
+      - { 'module': '@ckeditor/ckeditor5-word-count', 'exports': ['WordCount'] }