Parsys: property wcmio:parsysParagraphCss not working in authoring mode
Description
I've created a parsys with following configuration:
Steps to reproduce
Adding a new child component to parsys
When I add a new item to the parsys (drag'n'drop from sidekick or per "plus" icon), the item does not become the CSS class as defined in wcmioarsysParagraphCss.
After refreshing the whole page, the item has now correctly set wcmioarsysParagraphCss.
Editing a child component
When I edit any component's properties of an item where the CSS class (as defined in wcmioarsysParagraphCss) is correctly set and the item becomes dynamically reloaded, then the CSS class defined in wcmioarsysParagraphCss is also missing again.
After refreshing the whole page, every item has the CSS class again.
Expected behaviour
CSS class defined in wcmioarsysParagraphCss should always be set at item's wrapper element.
Activity
i created a branch of the sample app to reproduce this problem:
https://github.com/wcm-io/wcm-io-samples/tree/feature/WWCM-6-parsys-test
steps to reproduce:
open http://localhost:4502/editor.html/content/wcm-io-samples/en/conference.html
add a new link item to the link list in the "Call for Papers" teaser on the right side
expected: new link list item should show a green background
actual: background is transparent
when refreshing the page manually the background is displayed correctly.
this problem does not only affect wcmioarsysParagraphCss, but also the wcmioarsysParagraphElement property. this also gets only active after refreshing the page.
and this also happens when editing the child component int the parsys, not only when inserting a new component.
there is no easy solution for this.
a workaround is to additionally force a refresh of the parent (the parsys) whenever a paragraph component is inserted or edited, e.g. add this to the paragraph component definition:
but this is more a hack. please not that the child component must not define a "afteredit" event it self, or this overrides the event defined in the parsys for it's children.
a better solution is to define the the element name and css name in the component definition of the child component itself - example:
this then of course is always applied to the component, not only when it's inserted in the parsys.
i've updated the documentation of the parsys to reflect this limitation:
http://wcm.io/wcm/parsys/usage.html#Customize_the_paragraph_system_markup
a better solution is to define the the element name and css name in the component definition of the child component itself - example:
yes, that workaround helps in my case. thanks
Additional Information
Plattform: AEM 6.2
Parsys: 1.0.0
