BUGFIX: Resolve linting issues and simplify button theme

Author: Sebobo

.github/workflows/tests.yml

@@ -20,5 +20,8 @@ jobs:
       - name: Install dependencies
         run: yarn
 
+      - name: Install dependencies
+        run: yarn lint
+
       - name: Build the plugin
         run: yarn build

Resources/Private/Scripts/HyphensEditor/src/editorButton.module.css

@@ -0,0 +1,3 @@
+.btnWithoutPadding {
+    padding: 0;
+}

Resources/Private/Scripts/HyphensEditor/src/hyphensButtonTheme.css

@@ -1,21 +1,20 @@
-import React, {PureComponent} from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import {Button} from '@neos-project/react-ui-components';
-import {neos} from '@neos-project/neos-ui-decorators';
-import {themr} from '@friendsofreactjs/react-css-themr';
+import { Button } from '@neos-project/react-ui-components';
+import { neos } from '@neos-project/neos-ui-decorators';
 
-import buttonTheme from './hyphensButtonTheme.css';
+import style from './editorButton.module.css';
 
 const BUTTON_PROPS = ['formattingRule', 'inlineEditorOptions', 'i18nRegistry', 'tooltip', 'isActive', 'label'];
 
-@neos(globalRegistry => ({
-    i18nRegistry: globalRegistry.get('i18n')
-}))
-@themr('HyphensButton', buttonTheme)
+const mapGlobalRegistryToProps = neos((globalRegistry) => ({
+    i18nRegistry: globalRegistry.get('i18n'),
+}));
+
 class HyphenButtonComponent extends PureComponent {
     static propTypes = {
         i18nRegistry: PropTypes.object,
-        tooltip: PropTypes.string
+        tooltip: PropTypes.string,
     };
 
     render() {
@@ -24,28 +23,30 @@ class HyphenButtonComponent extends PureComponent {
             return carry;
         }, {});
         return (
-            <Button {...finalProps} isActive={Boolean(this.props.isActive)} className={buttonTheme['btn--no-padding']}
-                    title={this.props.i18nRegistry.translate(this.props.tooltip)}>
+            <Button
+                {...finalProps}
+                isActive={Boolean(this.props.isActive)}
+                className={style.btnWithoutPadding}
+                title={this.props.i18nRegistry.translate(this.props.tooltip)}
+            >
                 <svg xmlns="http://www.w3.org/2000/svg" width="18.109" height="9.697" viewBox="0, 0, 18.109, 9.697">
                     <g stroke="currentColor" strokeMiterlimit="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" strokeWidth=".907"/>
-                        <path d="M4.52 4.848h9.07" strokeWidth="1.814"/>
+                        <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"
+                            strokeWidth=".907"
+                        />
+                        <path d="M4.52 4.848h9.07" strokeWidth="1.814" />
                     </g>
                 </svg>
             </Button>
         );
     }
 }
 
-
-@neos(globalRegistry => ({
-    i18nRegistry: globalRegistry.get('i18n')
-}))
-@themr('NbspButton', buttonTheme)
 class NbspButtonComponent extends PureComponent {
     static propTypes = {
         i18nRegistry: PropTypes.object,
-        tooltip: PropTypes.string
+        tooltip: PropTypes.string,
     };
 
     render() {
@@ -54,11 +55,20 @@ class NbspButtonComponent extends PureComponent {
             return carry;
         }, {});
         return (
-            <Button {...finalProps} isActive={Boolean(this.props.isActive)} className={buttonTheme['btn--no-padding']}
-                title={this.props.i18nRegistry.translate(this.props.tooltip)}>
+            <Button
+                {...finalProps}
+                isActive={Boolean(this.props.isActive)}
+                className={style.btnWithoutPadding}
+                title={this.props.i18nRegistry.translate(this.props.tooltip)}
+            >
                 <svg width="18px" height="9px" viewBox="0 0 18 9" version="1.1" xmlns="http://www.w3.org/2000/svg">
                     <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="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="#FFFFFF" strokeWidth="1.8"></path>
+                        <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="#FFFFFF"
+                            strokeWidth="1.8"
+                        ></path>
                     </g>
                 </svg>
             </Button>
@@ -69,13 +79,13 @@ class NbspButtonComponent extends PureComponent {
 //
 // Modify richtext editing toolbar registry
 //
-export default ckEditorRegistry => {
+export default (ckEditorRegistry) => {
     const richtextToolbar = ckEditorRegistry.get('richtextToolbar');
 
     richtextToolbar.set('shy', {
         label: 'Shy',
         commandName: 'insertShyEntity',
-        component: HyphenButtonComponent,
+        component: mapGlobalRegistryToProps(HyphenButtonComponent),
         callbackPropName: 'onClick',
         style: 'transparent',
         hoverStyle: 'brand',
@@ -87,7 +97,7 @@ export default ckEditorRegistry => {
     richtextToolbar.set('nbsp', {
         label: 'Nbsp',
         commandName: 'insertNbspEntity',
-        component: NbspButtonComponent,
+        component: mapGlobalRegistryToProps(NbspButtonComponent),
         callbackPropName: 'onClick',
         style: 'transparent',
         hoverStyle: 'brand',