3 or more level nested components in Smartedit

[RaufAliev]

A component is linked to a slot, which has a list of nested components (1:N), each of the nested components has one attached (1:1).

For example, in the FAQ section, there is a component responsible for a group of questions and answers, but each of the question-answer pairs is not a terminal component, but a wrapper over CMSParagraph which is in turn the terminal one. As a result, there are three levels of nesting: Group->Wrapper->CMSParagraph. The wrapper has some extra info and supports not only CMSParagraph, but basically any time of components. Not I designed this, but I am seeking how to tame such existing structure.

DIVs are configured properly — in the resulting HTML of the frontend there all levels have their markups, like class="smartEditComponent" data-smartedit-component-id="FiltersContent-faq" data-smartedit-component-uuid="...." data-smartedit-component-type="ContentSlot" data-smartedit-catalog-version-uuid="..../Online" - this is the example for a contentslot, but similar is for the components. In the simpler cases, our markup works fine. The problem is with nested components, 3 levels.

Now, if you open Smartedit with such a setup, the following oddities are observed:

1. When you hover over a question, the terminal component, which is CMSParagraphComponent, is highlighted. You can edit it, but you also want to be able to edit its parent, which in our case is Wrapper, but there is no link for the parent.
2. If you try to clone the component, it is created not at the level parallel to the original, but at a higher level, where the slot is.
3. In the Page Structure, the parent appears not only a level higher but also a level lower. For example, here Accordion is under Alls... although it is actually the parent for Alls..