FEATURE: Allow to translate labels

README.md

@@ -101,6 +101,26 @@ Example: [Configuration/Settings.yaml](Configuration/Settings.yaml)
 - **Not null** Using an empty class (cssClass: null) to unset the value might cause errors during rendering in the backend. The select boxes of this package contain an "x" button for resetting the value.
 - Although you can add **multiple classes** by separating them with a whitespace. e.g. `btn btn-primary`, it is **highly recommended** to use only **one and unique** class across all Inline- or BlockStyles. See [known issues](#konwn-issues) for more details.
 
+**How to translate labels?**
+
+To provide localized labels you can pass the translation id for each label. [How to create your translations in Neos?](https://docs.neos.io/guide/rendering/translating-text-in-fusion#create-a-translation-file)  
+
+```yaml
+TechDivision:
+  CkStyles:
+    InlineStyles:
+      presets:
+        'fontColor':
+          label: Vendor.Package:Main:inlinestyles.fontcolor.label
+          options:
+            'primary':
+              label: Vendor.Package:Main:inlinestyles.fontcolor.options.red
+              cssClass: 'my-class-red'
+            'secondary':
+              label: Vendor.Package:Main:inlinestyles.fontcolor.options.green
+              cssClass: 'my-class-green'
+```
+
 ### 3. Activate the preset for your inline editable NodeType property:
 
 ```yaml

Resources/Private/JavaScript/CkStyles/src/components/BlockStyleSelector.js

@@ -1,13 +1,18 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {SelectBox} from '@neos-project/react-ui-components';
+import {neos} from '@neos-project/neos-ui-decorators';
 import {connect} from 'react-redux';
 import {$transform} from 'plow-js';
 import PresetType from '../PresetType';
 
 import {selectors} from '@neos-project/neos-ui-redux-store';
 import * as CkEditorApi from '@neos-project/neos-ui-ckeditor5-bindings';
 
+@neos(globalRegistry => ({
+    i18nRegistry: globalRegistry.get('i18n')
+}))
+
 @connect($transform({
     formattingUnderCursor: selectors.UI.ContentCanvas.formattingUnderCursor
 }))
@@ -18,7 +23,10 @@ export default class BlockStyleSelector extends PureComponent {
         presetConfiguration: PresetType.isRequired,
 
         // from @connect
-        formattingUnderCursor: PropTypes.object
+        formattingUnderCursor: PropTypes.object,
+
+        // from @neos
+        i18nRegistry: PropTypes.object.isRequired
     };
 
     constructor(...args) {
@@ -28,10 +36,12 @@ export default class BlockStyleSelector extends PureComponent {
     }
 
     render() {
+        const {i18nRegistry} = this.props;
+
         const optionsForSelect = Object.entries(this.props.presetConfiguration.options)
             .map(([optionIdentifier, optionConfiguration]) => ({
                 value: optionIdentifier,
-                label: optionConfiguration.label
+                label: i18nRegistry.translate(optionConfiguration.label)
             }));
 
         if (optionsForSelect.length === 0) {
@@ -45,7 +55,7 @@ export default class BlockStyleSelector extends PureComponent {
                 options={optionsForSelect}
                 value={currentValue}
                 allowEmpty={true}
-                placeholder={this.props.presetConfiguration.label}
+                placeholder={i18nRegistry.translate(this.props.presetConfiguration.label)}
                 onValueChange={this.handleOnSelect}
             />
         );

Resources/Private/JavaScript/CkStyles/src/components/InlineStyleSelector.js

@@ -1,13 +1,18 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {SelectBox} from '@neos-project/react-ui-components';
+import {neos} from '@neos-project/neos-ui-decorators';
 import {connect} from 'react-redux';
 import {$transform} from 'plow-js';
 import PresetType from '../PresetType';
 
 import {selectors} from '@neos-project/neos-ui-redux-store';
 import * as CkEditorApi from '@neos-project/neos-ui-ckeditor5-bindings';
 
+@neos(globalRegistry => ({
+    i18nRegistry: globalRegistry.get('i18n')
+}))
+
 @connect($transform({
     formattingUnderCursor: selectors.UI.ContentCanvas.formattingUnderCursor
 }))
@@ -18,7 +23,10 @@ export default class InlineStyleSelector extends PureComponent {
         presetConfiguration: PresetType.isRequired,
 
         // from @connect
-        formattingUnderCursor: PropTypes.object
+        formattingUnderCursor: PropTypes.object,
+
+        // from @neos
+        i18nRegistry: PropTypes.object.isRequired
     };
 
     constructor(...args) {
@@ -28,10 +36,12 @@ export default class InlineStyleSelector extends PureComponent {
     }
 
     render() {
+        const {i18nRegistry} = this.props;
+
         const optionsForSelect = Object.entries(this.props.presetConfiguration.options)
             .map(([optionIdentifier, optionConfiguration]) => ({
                 value: optionIdentifier,
-                label: optionConfiguration.label
+                label: i18nRegistry.translate(optionConfiguration.label)
             }));
 
         if (optionsForSelect.length === 0) {
@@ -45,7 +55,7 @@ export default class InlineStyleSelector extends PureComponent {
                 options={optionsForSelect}
                 value={currentValue}
                 allowEmpty={true}
-                placeholder={this.props.presetConfiguration.label}
+                placeholder={i18nRegistry.translate(this.props.presetConfiguration.label)}
                 onValueChange={this.handleOnSelect}
             />
         );