PHPackages mhsdesign/liveinspectorjsevents - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. mhsdesign/liveinspectorjsevents ActiveNeos-package[Utility & Helpers](/categories/utility) mhsdesign/liveinspectorjsevents =============================== Send JsEvents to the iframe on Inspector changes 2.0.3(1y ago)54.3k2[2 issues](https://github.com/mhsdesign/MhsDesign.LiveInspectorJsEvents/issues)[1 PRs](https://github.com/mhsdesign/MhsDesign.LiveInspectorJsEvents/pulls)2GPL-3.0+JavaScript Since Sep 5Pushed 1y ago1 watchersCompare [ Source](https://github.com/mhsdesign/MhsDesign.LiveInspectorJsEvents)[ Packagist](https://packagist.org/packages/mhsdesign/liveinspectorjsevents)[ RSS](/packages/mhsdesign-liveinspectorjsevents/feed)WikiDiscussions main Synced 3w ago READMEChangelog (6)Dependencies (1)Versions (8)Used By (2) MhsDesign.LiveInspectorJsEvents =============================== [](#mhsdesignliveinspectorjsevents) Neos Ui Plugin for Inspector change events in the iframe. --------------------------------------------------------- [](#neos-ui-plugin-for-inspector-change-events-in-the-iframe) ### Demo [](#demo) demo-live-change-neos.mp4 ### Install [](#install) ``` composer require "mhsdesign/liveinspectorjsevents:~2.0.0" ``` Tutorial for a self made implementation: ======================================== [](#tutorial-for-a-self-made-implementation) Change the class of a spacer to its property value: --------------------------------------------------- [](#change-the-class-of-a-spacer-to-its-property-value) your yaml: A basic (standalone) nodeType yaml config with a select box``` 'MhsDesign.LiveInspectorDemo:Content.Spacer': superTypes: 'Neos.Neos:Content': true ui: icon: 'icon-internet-explorer' label: 'Example' # this will remove the Neos not inline editable overlay. inlineEditable: true inspector: groups: settings: label: 'Settings' properties: height: type: string ui: # not need to explicitly state it since its the default: # reloadIfChanged: false label: 'Height' inspector: group: settings editor: 'Neos.Neos/Inspector/Editors/SelectBoxEditor' editorOptions: allowEmpty: true values: # your css classes as key. height-sm: label: 'Small' height-md: label: 'Medium' height-lg: label: 'Large' ``` your fusion: ``` prototype(MhsDesign.LiveInspectorDemo:Content.Spacer) < prototype(Neos.Neos:ContentComponent) { height = ${q(node).property('height')} renderer = afx` ` } ``` your js: ``` // all changers will be registered here: const changer = {} changer['MhsDesign.LiveInspectorDemo:Content.Spacer'] = (node, property) => { const {name, updated, previous} = property; /** type HTMLElement */ const el = neos.guestFrame.findElementByNode(node); switch (name) { case 'height': // sometimes the ui wraps an div around the html - sometimes not. const spacerDiv = querySelectClosest(el, '.spacer') if (previous !== '') { spacerDiv.classList.remove(previous) } if (updated !== '') { spacerDiv.classList.add(updated) } } } // call the changer defined for a node by nodeType const updateNode = (node, property) => { if (typeof changer[node.nodeType] !== "undefined") { changer[node.nodeType](node, property); } // alternative: // switch (node.nodeType) { // case 'MhsDesign.LiveInspectorDemo:Content.Spacer': // changeSpacer(node, property) // } } // register to the events document.addEventListener('Neos.NodeCommit', (event) => { const {node, property} = event.detail; updateNode(node, property) }) document.addEventListener('Neos.NodeDiscard', (event) => { const {node, properties} = event.detail; properties.forEach(property => { updateNode(node, property) }) }) // helper const querySelectClosest = (element, selector) => { if (element.matches(selector)) { return element; } return element.querySelector(selector) } ``` --- Usage ===== [](#usage) ### listen to the events (in the iframe): [](#listen-to-the-events-in-the-iframe) ``` document.addEventListener('Neos.NodeCommit', (event) => { const {node, property} = event.detail; // the updated property value and also the previous. // {name: 'title', updated: 'abcd', previous: 'abc'} console.log(property); // experimental: see below: console.log(neos.guestFrame.findElementByNode(node)); }) document.addEventListener('Neos.NodeDiscard', (event) => { const {node, properties} = event.detail; // all reset properties in a list. // [{name: 'title', updated: 'abc', previous: 'abcd'}] console.log(properties); }) ``` ### A Javascript `node` object in the Neos UI looks like: [](#a-javascript-node-object-in-the-neos-ui-looks-like) ``` node = { "identifier": "99257f0c-70f0-405b-a82b-fa8e375c23fb", "contextPath": "/sites/root/main/node-l461lxh2i1a77", "nodeType": "Vendor.Site:Content.Heading", ... "properties": { // also some private "_" properties ... like "_hidden" ... "title": "my String Old" } } ``` ### Get the dom element of the corresponding node: [](#get-the-dom-element-of-the-corresponding-node) > The following functionality or way of handling this is experimental, and could eventually change. the global `window.neos` object is extended by this package and exposes under `guestFrame` this function, which makes it possible to get the dom element by node object: ``` neos.guestFrame.findElementByNode(node) ``` Under the hood it does something like: (*But try to avoid using the following snippet directly as it uses eventually purely internal knowledge.*) ``` const findElementByNode = (node) => { const {contextPath} = node; // https://github.com/neos/neos-ui/blob/7ede460ec1bb8dd4455fc636b875c137d112e89d/packages/neos-ui-guest-frame/src/dom.js#L76 return document.querySelector(`[data-__neos-node-contextpath="${contextPath}"]`); } ``` --- Internals ========= [](#internals) ### More dev notes (about internals, not so much about the events above): [](#more-dev-notes-about-internals-not-so-much-about-the-events-above) it sometimes helps to have the Redux DevTools installed: The API from the Neos UI. ``` // the commit action (when you change a property of a node) looks like: commitAction = { "type": "@neos/neos-ui/UI/Inspector/COMMIT", "payload": { "propertyId": "title", "value": "my String", ... "focusedNode": node, // we get something like in the node above } } } // when we dicard the changes, we wont know directly wich changes where made before. 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) } } // good to know, how to alway get the current node: const state = yield select(); const focusedNode = selectors.CR.Nodes.focusedSelector(state) // or const focusedNode = yield select(selectors.CR.Nodes.focusedSelector); ``` ### Health Score 34 — LowBetter than 75% of packages Maintenance24 Infrequent updates — may be unmaintained Popularity28 Limited adoption so far Community16 Small or concentrated contributor base Maturity56 Maturing project, gaining track record Bus Factor1 Top contributor holds 66.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~176 days Recently: every ~245 days Total 7 Last Release 697d ago Major Versions 1.0.x-dev → 2.0.02022-01-23 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/85400359?v=4)[Marc Henry Schultz](/maintainers/mhsdesign)[@mhsdesign](https://github.com/mhsdesign) --- Top Contributors [![mhsdesign](https://avatars.githubusercontent.com/u/85400359?v=4)](https://github.com/mhsdesign "mhsdesign (8 commits)")[![gradinarufelix](https://avatars.githubusercontent.com/u/4405087?v=4)](https://github.com/gradinarufelix "gradinarufelix (2 commits)")[![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (2 commits)") ### Embed Badge ![Health badge](/badges/mhsdesign-liveinspectorjsevents/health.svg) ``` [![Health](https://phpackages.com/badges/mhsdesign-liveinspectorjsevents/health.svg)](https://phpackages.com/packages/mhsdesign-liveinspectorjsevents) ``` ### Alternatives [techdivision/ckstyles Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration 21175.8k](/packages/techdivision-ckstyles)[sitegeist/taxonomy Manage vocabularies and taxonomies as separate node-hierarchy. 1593.1k1](/packages/sitegeist-taxonomy)[shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 14101.5k6](/packages/shel-neos-colorpicker)[yoast/yoast-seo-for-neos Yoast SEO for Neos CMS 24169.3k](/packages/yoast-yoast-seo-for-neos)[shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 21210.1k1](/packages/shel-neos-hyphens)[sitegeist/silhouettes Preconfigure property-silhuettes that can be applied to various properties of multiple NodeTypes. 16159.5k](/packages/sitegeist-silhouettes) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)