Merge pull request #184 from neos/bugfix/removePlowJsFromCodeTagPlugin

BUGFIX: Remove plow-js from code tag plugin
neos · Oct 17, 2023 · eb337ae · eb337ae
2 parents 51ac4f1 + 6ac1837
commit eb337ae
Show file tree

Hide file tree

Showing 8 changed files with 278 additions and 45,035 deletions.
diff --git a/Resources/Private/CodeTagPlugin/build.js b/Resources/Private/CodeTagPlugin/build.js
@@ -0,0 +1,15 @@
+
+const esbuild = require('esbuild');
+const extensibilityMap = require('@neos-project/neos-ui-extensibility/extensibilityMap.json');
+
+esbuild.build({
+    entryPoints: {
+        Plugin: './src/index.js'
+    },
+    bundle: true,
+    minify: true,
+    target: "es2020",
+    sourcemap: "linked",
+    alias: extensibilityMap,
+    outdir: '../../Public/Scripts/CodeTagPlugin'
+});
diff --git a/Resources/Private/CodeTagPlugin/package.json b/Resources/Private/CodeTagPlugin/package.json
@@ -3,14 +3,11 @@
   "license": "GNU GPLv3",
   "private": true,
   "scripts": {
-    "build": "neos-react-scripts build --production",
-    "watch": "neos-react-scripts watch"
+    "build": "node build.js"
   },
   "devDependencies": {
-    "@neos-project/neos-ui-extensibility": "^8.2.0"
-  },
-  "neos": {
-    "buildTargetDirectory": "../../Public/Scripts/CodeTagPlugin"
+    "@neos-project/neos-ui-extensibility": "~8.3.0",
+    "esbuild": "^0.19.0"
   },
   "dependencies": {
     "@ckeditor/ckeditor5-basic-styles": "10.1.0"

diff --git a/Resources/Private/CodeTagPlugin/src/IconButtonComponent.jsx b/Resources/Private/CodeTagPlugin/src/IconButtonComponent.jsx
@@ -0,0 +1,9 @@
+import React, { PureComponent } from 'react';
+import {IconButton} from "@neos-project/react-ui-components";
+
+export class IconButtonComponent extends PureComponent {
+    render() {
+        const { formattingRule, inlineEditorOptions, i18nRegistry, tooltip, isActive, ...finalProps } = this.props;
+        return <IconButton {...finalProps} isActive={Boolean(isActive)} title={tooltip} />;
+    }
+}
diff --git a/Resources/Private/CodeTagPlugin/src/index.js b/Resources/Private/CodeTagPlugin/src/index.js
@@ -1 +1 @@
-require('./manifest');
+import './manifest';
diff --git a/Resources/Private/CodeTagPlugin/src/manifest.js b/Resources/Private/CodeTagPlugin/src/manifest.js
@@ -1,21 +1,17 @@
-import React, { PureComponent } from 'react';
 import manifest from '@neos-project/neos-ui-extensibility';
-import { $get, $add } from 'plow-js';
 import CodeFormatting from './codePlugin';
-import { IconButton } from '@neos-project/react-ui-components';
-
-class IconButtonComponent extends PureComponent {
-    render() {
-        const { formattingRule, inlineEditorOptions, i18nRegistry, tooltip, isActive, ...finalProps } = this.props;
-        return <IconButton {...finalProps} isActive={Boolean(isActive)} title={tooltip} />;
-    }
-}
+import {IconButtonComponent} from "./IconButtonComponent";
 
 const addPlugin = (Plugin, isEnabled) => (ckEditorConfiguration, options) => {
     // we duplicate editorOptions here so it would be possible to write something like `$get('formatting.sup')`
     if (!isEnabled || isEnabled(options.editorOptions, options)) {
-        ckEditorConfiguration.plugins = ckEditorConfiguration.plugins || [];
-        return $add('plugins', Plugin, ckEditorConfiguration);
+        return {
+            ...ckEditorConfiguration,
+            plugins: [
+                ...(ckEditorConfiguration?.plugins ?? []),
+                Plugin
+            ]
+        };
     }
     return ckEditorConfiguration;
 };
@@ -25,7 +21,7 @@ manifest('main', {}, (globalRegistry) => {
     const richtextToolbar = ckEditorRegistry.get('richtextToolbar');
     const config = ckEditorRegistry.get('config');
 
-    config.set('code', addPlugin(CodeFormatting, $get('formatting.code')));
+    config.set('code', addPlugin(CodeFormatting, (editorOptions) => editorOptions?.formatting?.code));
 
     richtextToolbar.set('code', {
         commandName: 'code',
@@ -34,7 +30,7 @@ manifest('main', {}, (globalRegistry) => {
         icon: 'code',
         hoverStyle: 'brand',
         tooltip: 'Code',
-        isVisible: $get('formatting.code'),
-        isActive: $get('code'),
+        isVisible: (editorOptions) => editorOptions?.formatting?.code,
+        isActive: (editorOptions) => editorOptions?.code,
     });
 });