first public commit

Hi

Author: mhsdesign

.gitignore

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

Configuration/Settings.yaml

@@ -0,0 +1,7 @@
+Neos:
+  Neos:
+    Ui:
+      resources:
+        javascript:
+          'MhsDesign.LiveInspectorJsEvents:JsEvents':
+            resource: resource://MhsDesign.LiveInspectorJsEvents/Public/JsEvents/Plugin.js

LICENSE

@@ -0,0 +1,22 @@
+# MhsDesign.LiveInspectorJsEvents
+
+## Neos Ui Plugin for Inspector change events in the iframe.
+
+### Usage
+
+listen to the events (in the iframe):
+
+```js
+document.addEventListener("MhsDesign.LiveInspectorJsEvents", (event) => {
+    const crNode = event.detail.node
+
+    // fresh properties as key value object
+
+    // on discard all properties will be in this object.
+    // except the ones starting with an underscore (private)
+    const properties = event.detail.properties
+
+    // COMMIT or DISCARD
+    const typeOfUserAction = event.detail.message
+})
+```

README.md

@@ -0,0 +1,13 @@
+{
+    "description": "MhsDesign.LiveInspectorJsEvents",
+    "scripts": {
+      "build": "neos-react-scripts build",
+      "watch": "neos-react-scripts watch"
+    },
+    "devDependencies": {
+      "@neos-project/neos-ui-extensibility": "^7.1"
+    },
+    "neos": {
+      "buildTargetDirectory": "../../Public/JsEvents"
+    }
+}

Resources/Private/JsEvents/package.json

@@ -0,0 +1,8 @@
+const filterObject = (obj, callback) => {
+    return Object.fromEntries(Object.entries(obj)
+        .filter(([key, val]) => callback(key, val)))
+}
+
+export const filterOutPropertiesWithUnderscore = (obj) => {
+    return filterObject(obj, (key, value) => key.startsWith("_") === false)
+}

Resources/Private/JsEvents/src/helpers.js

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

Resources/Private/JsEvents/src/index.js

@@ -0,0 +1,7 @@
+import manifest from '@neos-project/neos-ui-extensibility';
+import onNodeChangeSendEvent from './onNodeChangeSendEvent'
+
+manifest('MhsDesign.LiveInspectorJsEvents:JsEvents', {}, globalRegistry => {
+    const sagasRegistry = globalRegistry.get('sagas');
+    sagasRegistry.set('MhsDesign.LiveInspectorJsEvents/JsEvents', {saga: onNodeChangeSendEvent});
+});

Resources/Private/JsEvents/src/manifest.js

@@ -0,0 +1,25 @@
+/*
+same functions as in '@neos-project/neos-ui-guest-frame/src/dom' but these files are not yet exposed
+but will be soon: https://github.com/neos/neos-ui/pull/2945
+*/
+
+const getGuestFrameDocument = () => {
+    const guestFrame = document.getElementsByName('neos-content-main')[0];
+    return guestFrame && guestFrame.contentDocument;
+};
+
+export const dispatchCustomEvent = (eventName, eventDescription, eventDetail = {}) => {
+    const detail = {
+        message: eventDescription,
+        ...eventDetail
+    };
+    const event = new CustomEvent(
+        eventName,
+        {
+            detail,
+            bubbles: true,
+            cancelable: true
+        }
+    );
+    getGuestFrameDocument().dispatchEvent(event);
+};

Resources/Private/JsEvents/src/neos-ui-guest-frame.js

@@ -0,0 +1,81 @@
+import {takeLatest, select} from 'redux-saga/effects'
+import {actionTypes, selectors} from '@neos-project/neos-ui-redux-store'
+
+import {filterOutPropertiesWithUnderscore} from './helpers'
+// TODO: use consumer api soon: https://github.com/neos/neos-ui/pull/2945
+import {dispatchCustomEvent} from './neos-ui-guest-frame'
+
+export default function* onNodeChangeSendEvent() {
+
+    // COMMIT happens on every subtle change in the inspector.
+    yield takeLatest(actionTypes.UI.Inspector.COMMIT, function* (action) {
+
+        // alternative
+        // const state = yield select();
+        // const node = selectors.CR.Nodes.focusedSelector(state)
+
+        const node = action.payload.focusedNode
+
+        const changedNodeProperty = {}
+        changedNodeProperty[action.payload.propertyId] = action.payload.value
+
+        dispatchCustomEvent('MhsDesign.LiveInspectorJsEvents', 'COMMIT', {
+            node: node,
+            properties: changedNodeProperty
+        })
+    })
+
+    // DISCARD happens when you dont apply the changes.
+    yield takeLatest(actionTypes.UI.Inspector.DISCARD, function* (action) {
+
+        const state = yield select();
+        const node = selectors.CR.Nodes.nodeByContextPath(state)(action.payload.focusedNodeContextPath)
+
+        dispatchCustomEvent('MhsDesign.LiveInspectorJsEvents', 'DISCARD', {
+            node: node,
+            properties: filterOutPropertiesWithUnderscore(node.properties)
+        })
+    })
+}
+
+
+/*
+
+make sure you have the Redux DevTools installed:
+https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=de
+
+The API from Neos.
+
+node = {
+    "identifier": "99257f0c-70f0-405b-a82b-fa8e375c23fb",
+    ...
+    "properties": {
+        "_creationDateTime": "2021-08-22T18:58:21+00:00",
+        "_path": "/sites/root/main/node-l461lxh2i1a77",
+        "_name": "node-l461lxh2i1a77",
+        "_nodeType": "Vendor.Site:Content.Heading",
+        ...
+        "title": "my String old"
+}
+
+commitAction = {
+    "type": "@neos/neos-ui/UI/Inspector/COMMIT",
+    "payload": {
+        "propertyId": "title",
+        "value": "my String",
+        ...
+        "focusedNode": node, // we get something like in the node above
+        }
+    }
+}
+
+discardAction = {
+    "type": "@neos/neos-ui/UI/Inspector/DISCARD",
+    "payload": {
+        "focusedNodeContextPath": "/sites/root/main/node-l461lxh2i1a77@user-mhs"
+        // we can get all the node details from the CR via:
+        // selectors.CR.Nodes.nodeByContextPath(state)(focusedNodeContextPath)
+    }
+}
+
+*/