diff --git a/README.md b/README.md index 0299394..6f09742 100644 --- a/README.md +++ b/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 diff --git a/Resources/Private/JavaScript/CkStyles/src/components/BlockStyleSelector.js b/Resources/Private/JavaScript/CkStyles/src/components/BlockStyleSelector.js index 402c9dc..46a3d25 100644 --- a/Resources/Private/JavaScript/CkStyles/src/components/BlockStyleSelector.js +++ b/Resources/Private/JavaScript/CkStyles/src/components/BlockStyleSelector.js @@ -1,6 +1,7 @@ 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'; @@ -8,6 +9,10 @@ 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} /> ); diff --git a/Resources/Private/JavaScript/CkStyles/src/components/InlineStyleSelector.js b/Resources/Private/JavaScript/CkStyles/src/components/InlineStyleSelector.js index a952b59..d2ac05e 100644 --- a/Resources/Private/JavaScript/CkStyles/src/components/InlineStyleSelector.js +++ b/Resources/Private/JavaScript/CkStyles/src/components/InlineStyleSelector.js @@ -1,6 +1,7 @@ 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'; @@ -8,6 +9,10 @@ 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} /> ); diff --git a/Resources/Public/JavaScript/CkStyles/Plugin.js b/Resources/Public/JavaScript/CkStyles/Plugin.js index 927ad66..26670f6 100644 --- a/Resources/Public/JavaScript/CkStyles/Plugin.js +++ b/Resources/Public/JavaScript/CkStyles/Plugin.js @@ -194,6 +194,18 @@ eval("\n\nvar _readFromConsumerApi = __webpack_require__(/*! ../../../readFromCo /***/ }), +/***/ "./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-decorators/index.js": +/*!*********************************************************************************************************************!*\ + !*** ./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-decorators/index.js ***! + \*********************************************************************************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; +eval("\n\nvar _readFromConsumerApi = __webpack_require__(/*! ../../../readFromConsumerApi */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/readFromConsumerApi.js\");\n\nvar _readFromConsumerApi2 = _interopRequireDefault(_readFromConsumerApi);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nmodule.exports = (0, _readFromConsumerApi2.default)('NeosProjectPackages')().NeosUiDecorators;\n//# sourceMappingURL=index.js.map\n\n//# sourceURL=webpack:///./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-decorators/index.js?"); + +/***/ }), + /***/ "./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-redux-store/index.js": /*!**********************************************************************************************************************!*\ !*** ./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-redux-store/index.js ***! @@ -358,7 +370,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _dec, _class, _class2, _temp;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactUiComponents = __webpack_require__(/*! @neos-project/react-ui-components */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/react-ui-components/index.js\");\n\nvar _reactRedux = __webpack_require__(/*! react-redux */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react-redux/index.js\");\n\nvar _plowJs = __webpack_require__(/*! plow-js */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/plow-js/index.js\");\n\nvar _PresetType = __webpack_require__(/*! ../PresetType */ \"./src/PresetType.js\");\n\nvar _PresetType2 = _interopRequireDefault(_PresetType);\n\nvar _neosUiReduxStore = __webpack_require__(/*! @neos-project/neos-ui-redux-store */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-redux-store/index.js\");\n\nvar _neosUiCkeditor5Bindings = __webpack_require__(/*! @neos-project/neos-ui-ckeditor5-bindings */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-ckeditor5-bindings/index.js\");\n\nvar CkEditorApi = _interopRequireWildcard(_neosUiCkeditor5Bindings);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar BlockStyleSelector = (_dec = (0, _reactRedux.connect)((0, _plowJs.$transform)({\n formattingUnderCursor: _neosUiReduxStore.selectors.UI.ContentCanvas.formattingUnderCursor\n})), _dec(_class = (_temp = _class2 = class BlockStyleSelector extends _react.PureComponent {\n\n constructor() {\n super(...arguments);\n\n this.handleOnSelect = this.handleOnSelect.bind(this);\n }\n\n render() {\n var optionsForSelect = Object.entries(this.props.presetConfiguration.options).map(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n optionIdentifier = _ref2[0],\n optionConfiguration = _ref2[1];\n\n return {\n value: optionIdentifier,\n label: optionConfiguration.label\n };\n });\n\n if (optionsForSelect.length === 0) {\n return null;\n }\n\n var currentValue = this.props.formattingUnderCursor['blockStyles:' + this.props.presetIdentifier];\n\n return _react2.default.createElement(_reactUiComponents.SelectBox, {\n options: optionsForSelect,\n value: currentValue,\n allowEmpty: true,\n placeholder: this.props.presetConfiguration.label,\n onValueChange: this.handleOnSelect\n });\n }\n\n handleOnSelect(optionIdentifier) {\n CkEditorApi.executeCommand('blockStyles:' + this.props.presetIdentifier, { value: optionIdentifier });\n }\n}, _class2.propTypes = {\n // from outside props\n presetIdentifier: _propTypes2.default.string.isRequired,\n presetConfiguration: _PresetType2.default.isRequired,\n\n // from @connect\n formattingUnderCursor: _propTypes2.default.object\n}, _temp)) || _class);\nexports.default = BlockStyleSelector;\n\n//# sourceURL=webpack:///./src/components/BlockStyleSelector.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _dec, _dec2, _class, _class2, _temp;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactUiComponents = __webpack_require__(/*! @neos-project/react-ui-components */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/react-ui-components/index.js\");\n\nvar _neosUiDecorators = __webpack_require__(/*! @neos-project/neos-ui-decorators */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-decorators/index.js\");\n\nvar _reactRedux = __webpack_require__(/*! react-redux */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react-redux/index.js\");\n\nvar _plowJs = __webpack_require__(/*! plow-js */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/plow-js/index.js\");\n\nvar _PresetType = __webpack_require__(/*! ../PresetType */ \"./src/PresetType.js\");\n\nvar _PresetType2 = _interopRequireDefault(_PresetType);\n\nvar _neosUiReduxStore = __webpack_require__(/*! @neos-project/neos-ui-redux-store */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-redux-store/index.js\");\n\nvar _neosUiCkeditor5Bindings = __webpack_require__(/*! @neos-project/neos-ui-ckeditor5-bindings */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-ckeditor5-bindings/index.js\");\n\nvar CkEditorApi = _interopRequireWildcard(_neosUiCkeditor5Bindings);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar BlockStyleSelector = (_dec = (0, _neosUiDecorators.neos)(function (globalRegistry) {\n return {\n i18nRegistry: globalRegistry.get('i18n')\n };\n}), _dec2 = (0, _reactRedux.connect)((0, _plowJs.$transform)({\n formattingUnderCursor: _neosUiReduxStore.selectors.UI.ContentCanvas.formattingUnderCursor\n})), _dec(_class = _dec2(_class = (_temp = _class2 = class BlockStyleSelector extends _react.PureComponent {\n\n constructor() {\n super(...arguments);\n\n this.handleOnSelect = this.handleOnSelect.bind(this);\n }\n\n render() {\n var i18nRegistry = this.props.i18nRegistry;\n\n\n var optionsForSelect = Object.entries(this.props.presetConfiguration.options).map(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n optionIdentifier = _ref2[0],\n optionConfiguration = _ref2[1];\n\n return {\n value: optionIdentifier,\n label: i18nRegistry.translate(optionConfiguration.label)\n };\n });\n\n if (optionsForSelect.length === 0) {\n return null;\n }\n\n var currentValue = this.props.formattingUnderCursor['blockStyles:' + this.props.presetIdentifier];\n\n return _react2.default.createElement(_reactUiComponents.SelectBox, {\n options: optionsForSelect,\n value: currentValue,\n allowEmpty: true,\n placeholder: i18nRegistry.translate(this.props.presetConfiguration.label),\n onValueChange: this.handleOnSelect\n });\n }\n\n handleOnSelect(optionIdentifier) {\n CkEditorApi.executeCommand('blockStyles:' + this.props.presetIdentifier, { value: optionIdentifier });\n }\n}, _class2.propTypes = {\n // from outside props\n presetIdentifier: _propTypes2.default.string.isRequired,\n presetConfiguration: _PresetType2.default.isRequired,\n\n // from @connect\n formattingUnderCursor: _propTypes2.default.object,\n\n // from @neos\n i18nRegistry: _propTypes2.default.object.isRequired\n}, _temp)) || _class) || _class);\nexports.default = BlockStyleSelector;\n\n//# sourceURL=webpack:///./src/components/BlockStyleSelector.js?"); /***/ }), @@ -370,7 +382,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n}); /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _dec, _class, _class2, _temp;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactUiComponents = __webpack_require__(/*! @neos-project/react-ui-components */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/react-ui-components/index.js\");\n\nvar _reactRedux = __webpack_require__(/*! react-redux */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react-redux/index.js\");\n\nvar _plowJs = __webpack_require__(/*! plow-js */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/plow-js/index.js\");\n\nvar _PresetType = __webpack_require__(/*! ../PresetType */ \"./src/PresetType.js\");\n\nvar _PresetType2 = _interopRequireDefault(_PresetType);\n\nvar _neosUiReduxStore = __webpack_require__(/*! @neos-project/neos-ui-redux-store */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-redux-store/index.js\");\n\nvar _neosUiCkeditor5Bindings = __webpack_require__(/*! @neos-project/neos-ui-ckeditor5-bindings */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-ckeditor5-bindings/index.js\");\n\nvar CkEditorApi = _interopRequireWildcard(_neosUiCkeditor5Bindings);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar InlineStyleSelector = (_dec = (0, _reactRedux.connect)((0, _plowJs.$transform)({\n formattingUnderCursor: _neosUiReduxStore.selectors.UI.ContentCanvas.formattingUnderCursor\n})), _dec(_class = (_temp = _class2 = class InlineStyleSelector extends _react.PureComponent {\n\n constructor() {\n super(...arguments);\n\n this.handleOnSelect = this.handleOnSelect.bind(this);\n }\n\n render() {\n var optionsForSelect = Object.entries(this.props.presetConfiguration.options).map(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n optionIdentifier = _ref2[0],\n optionConfiguration = _ref2[1];\n\n return {\n value: optionIdentifier,\n label: optionConfiguration.label\n };\n });\n\n if (optionsForSelect.length === 0) {\n return null;\n }\n\n var currentValue = this.props.formattingUnderCursor['inlineStyles:' + this.props.presetIdentifier];\n\n return _react2.default.createElement(_reactUiComponents.SelectBox, {\n options: optionsForSelect,\n value: currentValue,\n allowEmpty: true,\n placeholder: this.props.presetConfiguration.label,\n onValueChange: this.handleOnSelect\n });\n }\n\n handleOnSelect(optionIdentifier) {\n CkEditorApi.executeCommand('inlineStyles:' + this.props.presetIdentifier, { value: optionIdentifier });\n }\n}, _class2.propTypes = {\n // from outside props\n presetIdentifier: _propTypes2.default.string.isRequired,\n presetConfiguration: _PresetType2.default.isRequired,\n\n // from @connect\n formattingUnderCursor: _propTypes2.default.object\n}, _temp)) || _class);\nexports.default = InlineStyleSelector;\n\n//# sourceURL=webpack:///./src/components/InlineStyleSelector.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.default = undefined;\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _dec, _dec2, _class, _class2, _temp;\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _propTypes = __webpack_require__(/*! prop-types */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/prop-types/index.js\");\n\nvar _propTypes2 = _interopRequireDefault(_propTypes);\n\nvar _reactUiComponents = __webpack_require__(/*! @neos-project/react-ui-components */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/react-ui-components/index.js\");\n\nvar _neosUiDecorators = __webpack_require__(/*! @neos-project/neos-ui-decorators */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-decorators/index.js\");\n\nvar _reactRedux = __webpack_require__(/*! react-redux */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/react-redux/index.js\");\n\nvar _plowJs = __webpack_require__(/*! plow-js */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/vendor/plow-js/index.js\");\n\nvar _PresetType = __webpack_require__(/*! ../PresetType */ \"./src/PresetType.js\");\n\nvar _PresetType2 = _interopRequireDefault(_PresetType);\n\nvar _neosUiReduxStore = __webpack_require__(/*! @neos-project/neos-ui-redux-store */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-redux-store/index.js\");\n\nvar _neosUiCkeditor5Bindings = __webpack_require__(/*! @neos-project/neos-ui-ckeditor5-bindings */ \"./node_modules/@neos-project/neos-ui-extensibility/dist/shims/neosProjectPackages/neos-ui-ckeditor5-bindings/index.js\");\n\nvar CkEditorApi = _interopRequireWildcard(_neosUiCkeditor5Bindings);\n\nfunction _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar InlineStyleSelector = (_dec = (0, _neosUiDecorators.neos)(function (globalRegistry) {\n return {\n i18nRegistry: globalRegistry.get('i18n')\n };\n}), _dec2 = (0, _reactRedux.connect)((0, _plowJs.$transform)({\n formattingUnderCursor: _neosUiReduxStore.selectors.UI.ContentCanvas.formattingUnderCursor\n})), _dec(_class = _dec2(_class = (_temp = _class2 = class InlineStyleSelector extends _react.PureComponent {\n\n constructor() {\n super(...arguments);\n\n this.handleOnSelect = this.handleOnSelect.bind(this);\n }\n\n render() {\n var i18nRegistry = this.props.i18nRegistry;\n\n\n var optionsForSelect = Object.entries(this.props.presetConfiguration.options).map(function (_ref) {\n var _ref2 = _slicedToArray(_ref, 2),\n optionIdentifier = _ref2[0],\n optionConfiguration = _ref2[1];\n\n return {\n value: optionIdentifier,\n label: i18nRegistry.translate(optionConfiguration.label)\n };\n });\n\n if (optionsForSelect.length === 0) {\n return null;\n }\n\n var currentValue = this.props.formattingUnderCursor['inlineStyles:' + this.props.presetIdentifier];\n\n return _react2.default.createElement(_reactUiComponents.SelectBox, {\n options: optionsForSelect,\n value: currentValue,\n allowEmpty: true,\n placeholder: i18nRegistry.translate(this.props.presetConfiguration.label),\n onValueChange: this.handleOnSelect\n });\n }\n\n handleOnSelect(optionIdentifier) {\n CkEditorApi.executeCommand('inlineStyles:' + this.props.presetIdentifier, { value: optionIdentifier });\n }\n}, _class2.propTypes = {\n // from outside props\n presetIdentifier: _propTypes2.default.string.isRequired,\n presetConfiguration: _PresetType2.default.isRequired,\n\n // from @connect\n formattingUnderCursor: _propTypes2.default.object,\n\n // from @neos\n i18nRegistry: _propTypes2.default.object.isRequired\n}, _temp)) || _class) || _class);\nexports.default = InlineStyleSelector;\n\n//# sourceURL=webpack:///./src/components/InlineStyleSelector.js?"); /***/ }),