DEP Upgrade frontend build stack

.nvmrc

@@ -1 +1 @@
-10
+18

README.md

@@ -14,7 +14,6 @@ This module provides the following (may not be a definitive list):
 * Customise search results labels from SiteConfig
 * Upload custom header and footer logos from SiteConfig
 * Upload custom favicon and Apple touch logos from SiteConfig
-* [FontAwesome](http://fontawesome.io) icon popup dialog to the TinyMCE content editor (Wātea theme only, by default)
 * Customisable theme colours in site settings
 
 ## Installation
@@ -29,25 +28,20 @@ composer require cwp/agency-extensions
 
 ## Requirements
 
-* `cwp/cwp` 2.0 or above
+* `cwp/cwp` 3.0 or above
 
-**Note** For use with CWP versions less than 2, please see the `1.x` [release line](https://github.com/silverstripe/cwp-agencyextensions/releases).
+**Note** For use with CWP versions less than 3, please see the `2.x` [release line](https://github.com/silverstripe/cwp-agencyextensions/releases).
 
 ## Documentation
 
 ### Features
 
 * [Theme colour picker](docs/en/01_Features/ThemeColors.md)
 * [Carousel/hero image](docs/en/01_Features/Carousel.md)
-* [FontAwesome icon plugin for TinyMCE](docs/en/01_Features/FontAwesomePlugin.md)
 * [Customisable theme colours](docs/en/01_Features/ThemeColors.md)
 
 ## Versioning
 
 This library follows [Semver](http://semver.org). According to Semver, you will be able to upgrade to any minor or patch version of this library without any breaking changes to the public API. Semver also requires that we clearly define the public API for this library.
 
 All methods, with `public` visibility, are part of the public API. All other methods are not part of the public API. Where possible, we'll try to keep `protected` methods backwards-compatible in minor/patch versions, but if you're overriding methods then please test your work before upgrading.
-
-## Notes
-
-This library includes a version of the [TinyMCE-FontAwesome-Plugin by Josh18](https://github.com/josh18/TinyMCE-FontAwesome-Plugin) which is open and permissive via the [expat/MIT Licence](https://en.wikipedia.org/wiki/MIT_License).

_config.php

@@ -1,22 +1,13 @@
 <?php
 
 use SilverStripe\Core\Environment;
-use SilverStripe\Forms\HTMLEditor\HTMLEditorConfig;
-use SilverStripe\Core\Manifest\ModuleLoader;
+use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;
 
-// By default the FontAwesome plugin for TinyMCE is enabled. You can disable it by defining
-// CWP_AGENCY_DISABLE_FONTAWESOME_PLUGIN = true in your environment configuration.
-if (!Environment::getEnv('CWP_AGENCY_DISABLE_FONTAWESOME_PLUGIN')) {
-    $cwpEditor = HtmlEditorConfig::get('cwp');
-    $pluginPath = ModuleLoader::getModule('cwp/agency-extensions')
-        ->getResource('thirdparty/TinyMCE-FontAwesome-Plugin/fontawesome/plugin.min.js')
-        ->getURL();
-    $cwpEditor->enablePlugins(['fontawesome' => $pluginPath]);
-    $cwpEditor->addButtonsToLine(2, 'fontawesome');
-
-    $contentCSS = (array)$cwpEditor->getOption('editor_css');
-    $contentCSS[] = 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
-    $cwpEditor->setOption('editor_css', $contentCSS);
+// CWP_AGENCY_DISABLE_FONTAWESOME_PLUGIN used to control whether an actual tinymce plugin was used.
+// CWP_AGENCY_ENABLE_FONTAWESOME_STYLES replaces it as the inverse, since that plugin is no longer available.
+// This config is here only to control whether legacy config is kept or not, to make upgrading from CMS 4 easier.
+if (Environment::getEnv('CWP_AGENCY_ENABLE_FONTAWESOME_STYLES')) {
+    $cwpEditor = TinyMCEConfig::get('cwp');
 
     // Allow span tags in TinyMCE to have aria-hidden attributes
     $cwpEditor->setOption(

_config/config.yml

@@ -14,16 +14,19 @@ SilverStripe\SiteConfig\SiteConfig:
     - CWP\AgencyExtensions\Extensions\CWPSiteConfigExtension
 
 ---
-Name: agencyextensionsfontawesome
-Except:
-  envvarset: CWP_AGENCY_DISABLE_FONTAWESOME_PLUGIN
+Name: agencyextensionsresources
 ---
 SilverStripe\Admin\LeftAndMain:
   extra_requirements_css:
-    - "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
     - "cwp/agency-extensions:client/dist/styles/bundle.css"
   extra_requirements_javascript:
     - "cwp/agency-extensions:client/dist/js/bundle.js"
+
+---
+Name: agencyextensionsfontawesome
+Only:
+  envvarset: CWP_AGENCY_ENABLE_FONTAWESOME_STYLES
+---
 SilverStripe\Forms\HTMLEditor\TinyMCEConfig:
   editor_css:
     - "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/src/components/ColorPickerField/ColorPickerField.js

@@ -111,7 +111,7 @@ class ColorPickerField extends Component {
   }
 }
 
-ColorPickerField.proptypes = {
+ColorPickerField.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.shape({
     Title: PropTypes.text,
     CSSClass: PropTypes.text,

client/src/components/ColorPickerField/ColorPickerField.scss

@@ -18,9 +18,6 @@
 }
 
 .color-picker-field-popover {
-  max-width: 380px;
-  width: 380px;
-
   &__option {
     display: flex;
     padding: 4px;
@@ -46,4 +43,9 @@
     align-self: center;
     margin-left: 12px;
   }
+
+  .popover {
+    max-width: 380px;
+    width: 380px;
+  }
 }

client/src/components/FontPickerField/FontPickerField.js

@@ -130,7 +130,7 @@ class FontPickerField extends Component {
   }
 }
 
-FontPickerField.proptypes = {
+FontPickerField.propTypes = {
   fonts: PropTypes.arrayOf(PropTypes.shape({
     Title: PropTypes.text,
     CSSClass: PropTypes.text,

client/src/components/FontPickerField/FontPickerField.scss

@@ -15,9 +15,6 @@
 }
 
 .font-picker-field-popover {
-  max-width: 380px;
-  width: 380px;
-
   &__option {
     padding: 4px 8px;
     max-height: 50px;
@@ -41,6 +38,11 @@
       }
     }
   }
+
+  .popover {
+    max-width: 380px;
+    width: 380px;
+  }
 }
 
 .font-picker-field__selection-preview {

client/src/legacy/entwine.js

@@ -1,10 +1,12 @@
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .form__field-holder .color-picker-field').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const ColorPickerComponent = loadComponent('ColorPickerField');
       const schemaData = this.data('schema');
@@ -15,18 +17,26 @@ jQuery.entwine('ss', ($) => {
         name: schemaData.name,
       };
 
-      ReactDOM.render(
-        <ColorPickerComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<ColorPickerComponent {...props} />,);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 
   $('.js-injector-boot .form__field-holder .font-picker-field').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const FontPickerComponent = loadComponent('FontPickerField');
       const schemaData = this.data('schema');
@@ -37,14 +47,20 @@ jQuery.entwine('ss', ($) => {
         name: schemaData.name,
       };
 
-      ReactDOM.render(
-        <FontPickerComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<FontPickerComponent {...props} />);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 });

composer.json

@@ -28,7 +28,6 @@
     },
     "extra": {
         "expose": [
-            "thirdparty/TinyMCE-FontAwesome-Plugin/fontawesome",
             "client/dist"
         ]
     },

package.json

@@ -1,9 +1,9 @@
 {
   "name": "agency-extensions",
-  "version": "1.0.0",
   "description": "Base module for the default CWP theme to add features",
   "scripts": {
-    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
+    "dev": "NODE_ENV=development webpack --progress",
     "watch": "yarn && NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
     "lint": "eslint client/src && sass-lint --verbose client/src/**/*.scss",
@@ -17,24 +17,27 @@
   },
   "author": "SilverStripe",
   "license": "BSD-3-Clause",
+  "engines": {
+    "node": "^18.x"
+  },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "jquery": "^3.5.0",
+    "classnames": "^2.3.2",
     "merge": "^2.1.1",
-    "mime": "^1.4.1",
-    "prop-types": "^15.6.2",
-    "react": "^15.3.1",
-    "react-dom": "^15.3.1",
-    "reactstrap": "^6.5.0"
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "reactstrap": "^8.9.0"
   },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.5",
-    "@silverstripe/webpack-config": "^1.2.0",
-    "babel-jest": "^20.0.3",
-    "bootstrap": "^4.3.1",
-    "jest-cli": "^19.0.2"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
-  "engines": {
-    "node": "^10.x"
-  }
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }