initialize plugin

Author: PRGfx

.gitignore

@@ -0,0 +1 @@
+node_modules/

Configuration/Settings.yaml

@@ -0,0 +1,7 @@
+Neos:
+  Neos:
+    Ui:
+      resources:
+        javascript:
+          'Prgfx.Neos.MarkdownView':
+            resource: resource://Prgfx.Neos.MarkdownView/Public/JavaScript/Plugin/Plugin.js

LICENSE

@@ -0,0 +1,40 @@
+[![Version](https://poser.pugx.org/prgfx/neos-markdown-view/version)](//packagist.org/packages/prgfx/neos-markdown-view)
+
+# Prgfx.Neos.MarkdownView
+
+> composer require prgfx/neos-markdown-view
+
+Provides an inspector view to render markdown text, e.g. for rendering static help text.
+
+## Options
+```yaml
+ui:
+  inspector:
+    views:
+      helpText:
+        group: helpText
+        view: Prgfx.Neos.MarkdownView/MarkdownView
+        viewOptions:
+          content: |
+            **Markdown goes here**
+          # optional css class for the element in case you want to add custom styling
+          # (include stylesheets in the Neos.Neos.Ui.resources.stylesheets setting)
+          className: '...'
+          # see react-markdown options
+          # tag names of elements that may get converted, defaults to all
+          allowedElements: []
+          # tag names of elements that should not be converted
+          disallowedElements: []
+```
+
+## Notes
+
+### Newlines
+The script replaces trailing `\\` with trailing double spaces on your content, so newlines work if trailing spaces are removed from your yaml.
+
+### ClientEval
+`ClientEval:` is implemented for the (translated) content.
+You can use `node` and `parentNode` in the context.
+
+### Asynchronous Content
+If [ClientEval](#clienteval) returns a Promise, the resolved value will be loaded as content.

README.md

@@ -0,0 +1,5 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true
+    }
+}

Resources/Private/Plugin/jsconfig.json

@@ -0,0 +1,18 @@
+{
+    "private": true,
+    "scripts": {
+        "build": "neos-react-scripts build",
+        "watch": "neos-react-scripts watch"
+    },
+    "devDependencies": {
+        "@neos-project/neos-ui-extensibility": "*"
+    },
+    "neos": {
+        "buildTargetDirectory": "../../Public/JavaScript/Plugin"
+    },
+    "dependencies": {
+        "@neos-project/react-ui-components": "^7.3.3",
+        "prop-type": "^0.0.1",
+        "react-markdown": "^8.0.1"
+    }
+}

Resources/Private/Plugin/package.json

@@ -0,0 +1 @@
+import './manifest.js';

Resources/Private/Plugin/src/index.js

@@ -0,0 +1,9 @@
+import manifest from '@neos-project/neos-ui-extensibility';
+import MarkdownView from './view';
+
+manifest('Prgfx.Neos.MarkdownView', {}, (globalRegistry) => {
+    const viewsRegistry = globalRegistry.get('inspector').get('views');
+    viewsRegistry.set('Prgfx.Neos.MarkdownView/MarkdownView', {
+        component: MarkdownView,
+    });
+});

Resources/Private/Plugin/src/manifest.js

@@ -0,0 +1,102 @@
+import React, { PureComponent } from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+import ReactMarkdown from 'react-markdown';
+import { neos } from '@neos-project/neos-ui-decorators';
+import { selectors } from '@neos-project/neos-ui-redux-store';
+
+const evaluate = (context, _expression) => {
+    const { node, parentNode } = context; // jshint ignore:line
+    return eval(_expression.replace('ClientEval:', '')); // jshint ignore:line
+}
+
+@neos((globalRegistry) => ({
+    i18nRegistry: globalRegistry.get('i18n'),
+}))
+@connect(state => {
+    const focusedNode = selectors.CR.Nodes.focusedSelector(state);
+    const parentNode = selectors.CR.Nodes.nodeByContextPath(state)(focusedNode.parent);
+
+    return {
+        focusedNode,
+        parentNode,
+    };
+})
+export default class MarkdownView extends PureComponent {
+
+    static propTypes = {
+        options: PropTypes.shape({
+            content: PropTypes.string,
+            className: PropTypes.string,
+            allowedElements: PropTypes.arrayOf(PropTypes.string),
+            disallowedElements: PropTypes.arrayOf(PropTypes.string),
+            focusedNode: PropTypes.object,
+            parentNode: PropTypes.object,
+        }).isRequired,
+        i18nRegistry: PropTypes.object.isRequired,
+    }
+
+    state = {
+        content: '',
+    }
+
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        this.generateContent();
+    }
+
+    generateContent() {
+        let content = this.props.options.content || '';
+        console.log('transient values', this.props.transientValues);
+
+        if (content.startsWith('ClientEval:')) {
+            const context = {
+                node: this.props.focusedNode,
+                parentNode: this.props.parentNode,
+            };
+            content = evaluate(context, content.replace('ClientEval:', ''));
+        }
+        try {
+            content = this.props.i18nRegistry.translate(content);
+        } catch (e) {
+        }
+
+
+        if (typeof content === 'object'
+            && 'then' in content
+            && typeof content.then === 'function'
+        ) {
+            content.then(content => {
+                this.setState({ content });
+            })
+        } else {
+            if (typeof content === 'string') {
+                content = content
+                    // replace trailing \\ with double spaces to allow for line breaks lost in yaml
+                    .replace(/\\\\\n/g, '  \n');
+            }
+            this.setState({ content });
+        }
+    }
+
+    render() {
+        const {
+            className,
+            allowedElements,
+            disallowedElements,
+        } = this.props.options;
+
+        return (
+            <ReactMarkdown
+                className={className}
+                allowedElements={allowedElements}
+                disallowedElements={disallowedElements}
+            >
+                {this.state.content}
+            </ReactMarkdown>
+        );
+    }
+};