FEATURE: Add compatibility to React UI

Author: kdambekalns

.gitignore

@@ -0,0 +1,2 @@
+Resources/Private/Scripts/YamlEditor/node_modules
+yarn-error.log

Configuration/Settings.yaml

@@ -4,3 +4,8 @@ Neos:
       requireJsPathMapping:
         'Flownative.Neos.Editors/Inspector': 'resource://Flownative.Neos.Editors/Public/Scripts/Inspector'
 
+    Ui:
+      resources:
+        javascript:
+          'Flownative.Neos.Editors:Yaml':
+            resource: resource://Flownative.Neos.Editors/Public/Scripts/ReactUI/Plugin.js

Resources/Private/Scripts/YamlEditor/package.json

@@ -0,0 +1,20 @@
+{
+    "description": "flownative-neos-editor-yamleditor",
+    "license": "MIT",
+    "private": true,
+    "scripts": {
+        "build": "neos-react-scripts build",
+        "watch": "neos-react-scripts watch"
+    },
+    "devDependencies": {
+        "@neos-project/neos-ui-extensibility": "^1.3"
+    },
+    "neos": {
+        "buildTargetDirectory": "../../../Public/Scripts/ReactUI"
+    },
+    "dependencies": {
+        "codemirror": "^5.24.0",
+        "react-codemirror2": "^5.0.1",
+        "lodash.upperfirst": "^4.3.1"
+    }
+}

Resources/Private/Scripts/YamlEditor/src/Secondary/YamlCodeMirrorWrap/index.js

@@ -0,0 +1,60 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {UnControlled as CodeMirror} from 'react-codemirror2';
+
+export default class YamlCodeMirrorWrap extends PureComponent {
+    static propTypes = {
+        onChange: PropTypes.func.isRequired,
+        value: PropTypes.string
+    };
+
+    editorRefCallback = ref => {
+        if (!ref) {
+            return;
+        }
+        const codeMirrorRef = ref;
+        const codeMirrorWrapperDomElement = codeMirrorRef.editor.display.wrapper;
+        const offsetTop = codeMirrorWrapperDomElement.getBoundingClientRect().top;
+        const clientHeight = window.innerHeight || document.clientHeight || document.getElementByTagName('body').clientHeight;
+        const height = clientHeight - offsetTop;
+        codeMirrorRef.editor.setSize(null, height);
+    };
+
+    onChangeCallback = (editor, data, value) => {
+        const cursorCoordinates = editor.getCursor();
+        let newValue;
+
+        // we replace inserted tabs with two spaces, because we need to work around CM behaviour
+        if (editor._isCleaningUpTabs !== true) {
+            editor._isCleaningUpTabs = true;
+            newValue = value.replace(/^( *)\t/m, '$1  ');
+            if (value !== newValue) {
+                editor.setValue(newValue);
+                // set character one ahead, since we replaced one tab by two spaces
+                editor.setCursor({'line': cursorCoordinates.line, 'ch': cursorCoordinates.ch + 1});
+            }
+            editor._isCleaningUpTabs = false;
+        }
+        this.props.onChange(value);
+    };
+
+    render() {
+        const options = {
+            mode: 'text/x-yaml',
+            theme: 'twilight',
+            indentWithTabs: false,
+            tabSize: 2,
+            indentUnit: 2,
+            styleActiveLine: true,
+            lineNumbers: true,
+            lineWrapping: true,
+            autoClearEmptyLines: true,
+            _isCleaningUpTabs: false
+        };
+
+        return (
+            <CodeMirror value={this.props.value} options={options} ref={this.editorRefCallback}
+                onChange={this.onChangeCallback} />
+        );
+    }
+}

Resources/Private/Scripts/YamlEditor/src/YamlEditor/index.js

@@ -0,0 +1,57 @@
+import React, {PureComponent} from 'react';
+import PropTypes from 'prop-types';
+import {$get} from 'plow-js';
+
+import {Button,Icon,Label} from '@neos-project/react-ui-components';
+import {I18n} from '@neos-project/neos-ui-i18n';
+import {neos} from '@neos-project/neos-ui-decorators';
+
+import style from './style.css';
+
+import YamlMode from 'codemirror/mode/yaml/yaml';
+
+@neos(globalRegistry => ({
+    secondaryEditorsRegistry: globalRegistry.get('inspector').get('secondaryEditors')
+}))
+export default class CodeMirror extends PureComponent {
+    static propTypes = {
+        className: PropTypes.string,
+        identifier: PropTypes.string.isRequired,
+        renderSecondaryInspector: PropTypes.func.isRequired,
+        commit: PropTypes.func.isRequired,
+        label: PropTypes.string.isRequired,
+        value: PropTypes.string,
+        secondaryEditorsRegistry: PropTypes.object.isRequired,
+        options: PropTypes.object
+    };
+
+    render() {
+        const {label, identifier, className} = this.props;
+        const disabled = $get('options.disabled', this.props);
+        const handleClick = () => disabled ? null : this.handleOpenCodeEditor;
+
+        return (
+            <div>
+                <Label className={style.codemirror__label} htmlFor={identifier}>
+                    <Button className={className} style="lighter" disabled={disabled} onClick={handleClick()}>
+                        <Icon icon="pencil" padded="right" title="Edit"/>
+                        {label}
+                    </Button>
+                </Label>
+            </div>
+        );
+    }
+
+    handleChange = newValue => {
+        this.props.commit(newValue);
+    };
+
+    handleOpenCodeEditor = () => {
+        const {secondaryEditorsRegistry} = this.props;
+        const {component: YamlCodeMirrorWrap} = secondaryEditorsRegistry.get('Flownative.Neos.Editors/Editors/Secondary/YamlCodeMirrorWrap');
+
+        this.props.renderSecondaryInspector('CODEMIRROR_EDIT', () =>
+            <YamlCodeMirrorWrap onChange={this.handleChange} value={this.props.value} highlightingMode='text/x-yaml'/>
+        );
+    }
+}

Resources/Private/Scripts/YamlEditor/src/YamlEditor/style.css

@@ -0,0 +1,3 @@
+.codemirror__label {
+    padding: 2px;
+}

Resources/Private/Scripts/YamlEditor/src/YamlValidator/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import I18n from '@neos-project/neos-ui-i18n';
+import yaml from '../../../../../Public/Scripts/Inspector/Validators/js-yaml.min'
+
+/**
+ * Checks if the given value is valid YAML
+ */
+const YamlValidator = value => {
+    if (typeof(value) !== 'string') {
+        this.addError(I18n.translate('content.inspector.validators.stringValidator.stringIsExpected'));
+    }
+
+    try {
+        yaml.safeLoad(value, 'utf8');
+        return null;
+    } catch (e) {
+        console.log(e);
+        return 'Invalid YAML, ' + e.message;
+    }
+};
+
+export default YamlValidator;

Resources/Private/Scripts/YamlEditor/src/index.js

@@ -0,0 +1 @@
+require('./manifest');

Resources/Private/Scripts/YamlEditor/src/manifest.js

@@ -0,0 +1,19 @@
+import manifest from '@neos-project/neos-ui-extensibility';
+
+import YamlEditor from './YamlEditor/index';
+import YamlCodeMirrorWrap from "./Secondary/YamlCodeMirrorWrap";
+import YamlValidator from './YamlValidator/index';
+
+manifest('Flownative.Neos.Editors:YamlEditor', {}, globalRegistry => {
+    const editorsRegistry = globalRegistry.get('inspector').get('editors');
+    const secondaryEditorsRegistry = globalRegistry.get('inspector').get('secondaryEditors');
+    const validatorRegistry = globalRegistry.get('validators');
+
+    editorsRegistry.set('Flownative.Neos.Editors/Inspector/Editors/Yaml', {
+        component: YamlEditor
+    });
+    secondaryEditorsRegistry.set('Flownative.Neos.Editors/Editors/Secondary/YamlCodeMirrorWrap', {
+        component: YamlCodeMirrorWrap
+    });
+    validatorRegistry.set('Flownative.Neos.Editors/Inspector/Validators/Yaml', YamlValidator);
+});