TASK: Remove plow-js from @neos-project/neos-ui-editors

packages/neos-ui-editors/package.json

@@ -32,13 +32,13 @@
     "@neos-project/utils-helpers": "workspace:*",
     "classnames": "^2.2.3",
     "codemirror": "^5.58.2",
+    "immer": "^9.0.0",
     "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
     "lodash.omit": "^4.5.0",
     "lodash.unescape": "4.0.1",
     "moment": "^2.20.1",
     "monet": "^0.9.2",
-    "plow-js": "^2.2.0",
     "react-codemirror2": "7.2.1",
     "react-dnd": "^10.0.0",
     "react-dropzone": "^3.13.2",

packages/neos-ui-editors/src/Editors/AssetEditor/index.js

@@ -4,7 +4,7 @@ import MultiSelectBox from '@neos-project/react-ui-components/src/MultiSelectBox
 import SelectBox from '@neos-project/react-ui-components/src/SelectBox/';
 import {dndTypes} from '@neos-project/neos-ui-constants';
 import {neos} from '@neos-project/neos-ui-decorators';
-import {$get} from 'plow-js';
+
 import Controls from './Components/Controls/index';
 import AssetOption from '../../Library/AssetOption';
 import {AssetUpload} from '../../Library/index';
@@ -185,7 +185,7 @@ export default class AssetEditor extends PureComponent {
     }
 
     renderControls() {
-        const disabled = $get('options.disabled', this.props);
+        const disabled = this.props?.options?.disabled;
 
         return (
             <Controls
@@ -199,9 +199,9 @@ export default class AssetEditor extends PureComponent {
     }
 
     renderAssetSelectorAndUpload() {
-        const mediaTypeConstraint = $get('options.constraints.mediaTypes', this.props);
-        const accept = $get('options.accept', this.props) || (mediaTypeConstraint && mediaTypeConstraint.join(','));
-        const multiple = $get('options.multiple', this.props);
+        const mediaTypeConstraint = this.props?.options?.constraints?.mediaTypes;
+        const accept = this.props?.options?.accept || (mediaTypeConstraint && mediaTypeConstraint.join(','));
+        const multiple = this.props?.options?.multiple;
         const {className, imagesOnly, value, identifier} = this.props;
 
         if (!this.isFeatureEnabled('upload')) {
@@ -226,13 +226,13 @@ export default class AssetEditor extends PureComponent {
     }
 
     renderAssetSelect() {
-        const multiple = $get('options.multiple', this.props);
+        const multiple = this.props?.options?.multiple;
 
         return multiple ? this.renderAssetMultiSelect() : this.renderAssetSingleSelect();
     }
 
     renderAssetSingleSelect() {
-        const disabled = $get('options.disabled', this.props);
+        const disabled = this.props?.options?.disabled;
 
         return (
             <SelectBox
@@ -250,14 +250,14 @@ export default class AssetEditor extends PureComponent {
                 onSearchTermChange={this.handleSearchTermChange}
                 noMatchesFoundLabel={this.props.i18nRegistry.translate('Neos.Neos:Main:noMatchesFound')}
                 searchBoxLeftToTypeLabel={this.props.i18nRegistry.translate('Neos.Neos:Main:searchBoxLeftToType')}
-                threshold={$get('options.threshold', this.props)}
+                threshold={this.props?.options?.threshold}
                 disabled={disabled}
             />
         );
     }
 
     renderAssetMultiSelect() {
-        const disabled = $get('options.disabled', this.props);
+        const disabled = this.props?.options?.disabled;
 
         return (
             <MultiSelectBox
@@ -276,7 +276,7 @@ export default class AssetEditor extends PureComponent {
                 onSearchTermChange={this.handleSearchTermChange}
                 noMatchesFoundLabel={this.props.i18nRegistry.translate('Neos.Neos:Main:noMatchesFound')}
                 searchBoxLeftToTypeLabel={this.props.i18nRegistry.translate('Neos.Neos:Main:searchBoxLeftToType')}
-                threshold={$get('options.threshold', this.props)}
+                threshold={this.props?.options?.threshold}
                 disabled={disabled}
             />
         );

packages/neos-ui-editors/src/Editors/CKEditor/index.js

@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {$get} from 'plow-js';
 
 import Button from '@neos-project/react-ui-components/src/Button/';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
@@ -28,7 +27,7 @@ export default class CKEditor extends PureComponent {
 
     render() {
         const {label, identifier, className} = this.props;
-        const disabled = $get('options.disabled', this.props);
+        const disabled = this.props?.options?.disabled;
         const handleClick = () => (disabled ? null : this.handleOpenCodeEditor);
 
         return (

packages/neos-ui-editors/src/Editors/CodeMirror/index.js

@@ -1,6 +1,5 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
-import {$get} from 'plow-js';
 
 import Button from '@neos-project/react-ui-components/src/Button/';
 import Icon from '@neos-project/react-ui-components/src/Icon/';
@@ -33,7 +32,7 @@ export default class CodeMirror extends PureComponent {
 
     render() {
         const {label, identifier, className} = this.props;
-        const disabled = $get('options.disabled', this.props);
+        const disabled = this.props?.options?.disabled;
         const handleClick = () => disabled ? null : this.handleOpenCodeEditor;
 
         return (
@@ -55,7 +54,7 @@ export default class CodeMirror extends PureComponent {
 
     handleOpenCodeEditor = () => {
         const {secondaryEditorsRegistry} = this.props;
-        const highlightingModeFromOptions = $get('options.highlightingMode', this.props);
+        const highlightingModeFromOptions = this.props?.options?.highlightingMode;
         const highlightingMode = highlightingModeFromOptions ? highlightingModeFromOptions : this.props.highlightingMode;
         const {component: CodeMirrorWrap} = secondaryEditorsRegistry.get('Neos.Neos/Inspector/Secondary/Editors/CodeMirrorWrap');
 

packages/neos-ui-editors/src/Editors/DateTime/index.js

@@ -5,13 +5,12 @@ import moment from 'moment';
 import {neos} from '@neos-project/neos-ui-decorators';
 import convertPhpDateFormatToMoment, {hasDateFormat, hasTimeFormat} from './helpers';
 import {connect} from 'react-redux';
-import {$transform, $get} from 'plow-js';
 
 @neos(globalRegistry => ({
     i18nRegistry: globalRegistry.get('i18n')
 }))
-@connect($transform({
-    interfaceLanguage: $get('user.preferences.interfaceLanguage')
+@connect(state => ({
+    interfaceLanguage: state?.user?.preferences?.interfaceLanguage
 }))
 class DateTime extends PureComponent {
     static propTypes = {
@@ -47,9 +46,9 @@ class DateTime extends PureComponent {
 
         const timeConstraints = Object.assign({
             minutes: {
-                step: $get('minuteStep', options) || 5
+                step: options?.minuteStep || 5
             }
-        }, $get('timeConstraints', options));
+        }, options?.timeConstraints);
 
         return (
             <DateInput
@@ -60,7 +59,7 @@ class DateTime extends PureComponent {
                 labelFormat={convertPhpDateFormatToMoment(options.format)}
                 dateOnly={!hasTimeFormat(options.format)}
                 timeOnly={!hasDateFormat(options.format)}
-                placeholder={i18nRegistry.translate($get('placeholder', options) || 'Neos.Neos:Main:content.inspector.editors.dateTimeEditor.noDateSet')}
+                placeholder={i18nRegistry.translate(options?.placeholder || 'Neos.Neos:Main:content.inspector.editors.dateTimeEditor.noDateSet')}
                 todayLabel={i18nRegistry.translate('content.inspector.editors.dateTimeEditor.today', 'Today', {}, 'Neos.Neos', 'Main')}
                 applyLabel={i18nRegistry.translate('content.inspector.editors.dateTimeEditor.apply', 'Apply', {}, 'Neos.Neos', 'Main')}
                 locale={interfaceLanguage}

packages/neos-ui-editors/src/Editors/Image/Components/ResizeControls/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {$get} from 'plow-js';
 
 import TextInput from '@neos-project/react-ui-components/src/TextInput/';
 import CheckBox from '@neos-project/react-ui-components/src/CheckBox/';
@@ -24,14 +23,14 @@ const toggleResizeAdjustment = props => () => {
     if (props.resizeAdjustment) {
         props.onChange(null);
     } else {
-        props.onChange(buildResizeAdjustment($get('width', props.imageDimensions), $get('height', props.imageDimensions)));
+        props.onChange(buildResizeAdjustment(props.imageDimensions?.width, props.imageDimensions?.height));
     }
 };
 
 const onChangeValue = (props, heightOrWidth) => changedValue => {
     let height = 0;
     let width = 0;
-    const aspectRatio = $get('height', props.imageDimensions) / $get('width', props.imageDimensions);
+    const aspectRatio = props.imageDimensions?.height / props.imageDimensions?.width;
 
     if (heightOrWidth === 'height') {
         height = changedValue;
@@ -67,7 +66,7 @@ const ResizeControls = props => {
                             pattern="\d*"
                             step="1"
                             min="0"
-                            value={$get('width', props.resizeAdjustment) || $get('width', props.imageDimensions) || 0}
+                            value={props.resizeAdjustment?.width || props.imageDimensions?.width || 0}
                             onChange={onChangeValue(props, 'width')}
                             disabled={props.disabled}
                             />
@@ -92,7 +91,7 @@ const ResizeControls = props => {
                             pattern="\d*"
                             step="1"
                             min="0"
-                            value={$get('height', props.resizeAdjustment) || $get('height', props.imageDimensions) || 0}
+                            value={props.resizeAdjustment?.height || props.imageDimensions?.height || 0}
                             onChange={onChangeValue(props, 'height')}
                             disabled={props.disabled}
                             />

packages/neos-ui-editors/src/Editors/Image/Utils/index.js

@@ -1,27 +1,15 @@
-import {$get, $map, $transform} from 'plow-js';
 import {Maybe} from 'monet';
 
-export const CROP_IMAGE_ADJUSTMENT = [
-    'object',
-    'adjustments',
-    'Neos\\Media\\Domain\\Model\\Adjustment\\CropImageAdjustment'
-];
-export const RESIZE_IMAGE_ADJUSTMENT = [
-    'object',
-    'adjustments',
-    'Neos\\Media\\Domain\\Model\\Adjustment\\ResizeImageAdjustment'
-];
-
 const DEFAULT_OFFSET = {x: 0, y: 0};
 
-const extractOriginalDimensions = $transform({
-    width: $get('originalDimensions.width'),
-    height: $get('originalDimensions.height')
+const extractOriginalDimensions = image => ({
+    width: image?.originalDimensions?.width,
+    height: image?.originalDimensions?.height
 });
 
-const extractPreviewDimensions = $transform({
-    width: $get('previewDimensions.width'),
-    height: $get('previewDimensions.height')
+const extractPreviewDimensions = image => ({
+    width: image?.previewDimensions?.width,
+    height: image?.previewDimensions?.height
 });
 
 export class Image {
@@ -33,12 +21,12 @@ export class Image {
 
     get previewUri() {
         const {image} = this;
-        return $get('previewImageResourceUri', image);
+        return image?.previewImageResourceUri;
     }
 
     get previewScalingFactor() {
         const {image} = this;
-        return $get('previewDimensions.width', image) / $get('originalDimensions.width', image);
+        return image?.previewDimensions?.width / image?.originalDimensions?.width;
     }
 
     get dimensions() {
@@ -58,7 +46,9 @@ export class Image {
 
     get cropAdjustment() {
         const {image} = this;
-        return Maybe.fromNull($get(CROP_IMAGE_ADJUSTMENT, image));
+        return Maybe.fromNull(
+            image?.object?.adjustments?.['Neos\\Media\\Domain\\Model\\Adjustment\\CropImageAdjustment'] ?? null
+        );
     }
 
     get cropAspectRatio() {
@@ -67,17 +57,27 @@ export class Image {
 
     get previewCropAdjustment() {
         const {cropAdjustment, previewScalingFactor} = this;
-        return cropAdjustment.map($map(v => v * previewScalingFactor, []));
+        return cropAdjustment.map(cropAdjustment => Object.fromEntries(
+            Object.entries(cropAdjustment).map(
+                ([key, value]) => [key, value * previewScalingFactor]
+            )
+        ));
     }
 
     get resizeAdjustment() {
         const {image} = this;
-        return Maybe.fromNull($get(RESIZE_IMAGE_ADJUSTMENT, image));
+        return Maybe.fromNull(
+            image?.object?.adjustments?.['Neos\\Media\\Domain\\Model\\Adjustment\\ResizeImageAdjustment'] ?? null
+        );
     }
 
     get previewResizeAdjustment() {
         const {resizeAdjustment, previewScalingFactor} = this;
-        return resizeAdjustment.map($map(v => v * previewScalingFactor, []));
+        return resizeAdjustment.map(resizeAdjustment => Object.fromEntries(
+            Object.entries(resizeAdjustment).map(
+                ([key, value]) => [key, value * previewScalingFactor]
+            )
+        ));
     }
 }