Parsys (targerparsys) inside targetparsys - aem

Question

We have a target area (target and targetparsys) with component which is a container (parsys) with some components. The problem is that when this container is situated in target area, parsys of container becomes a targetparsys inside of which there isn't a possibility to edit inside components. Does this issue has the solution?
I've tried to overlay the logic of creating the overlay in overlayManager.js. It has solved a little bit the problem, but there isn't a proper work of reordering components inside of it.

Answer 1

I overlayed the following file - /cq/gui/components/authoring/editors/clientlibs/core/js/overlayManager.js by changing and adding the following code:
self.create = function (editable) {
if (!editable.overlay) {
var parent = ns.editables.getParent(editable);
// going up recursively until we reach the root container
if (parent && !parent.overlay) {
self.create(parent);
}
// we check again because a child overlay might also be created by the parent constructor
if (!editable.overlay) {
editable.overlay = new overlayConstructor(editable, parent ? parent.overlay.dom : container);
}
// get children sorted by depth of their paths
var sortedChildren = getSortedChildren(editable, true);
//and going down recursively until we reach the deepest editable
sortedChildren.forEach(function (child) {
self.create(child);
});
}
};
/**
* Returns the sorted {Array} of child {#link Granite.author.Editable}s by depth of their paths for the given {#link Granite.author.Editable}
*
* #param {Granite.author.Editable} editable - {#link Granite.author.Editable} for which to find child editables to be sorted by depth of their paths
* #param {Boolean} all - All the children or only the direct descendant
*
* WARNING! Not OTB function! See the description on {self.create = function(editable)}
*/
function getSortedChildren(editable, all){
var children = ns.editables.getChildren(editable, all);
//key - editable, value - number of slashes
var childrenMap = new Map();
//going through all children
for (let i = 0; i < children.length; i++){
var path = children[i].path;
var numberOfSlashes = 1;
var isFirstSlashChecked = false;
//searching slashes
for (let j = 0; j < path.length; j++){
var letter = path[j];
var SLASH = '/';
if (letter == SLASH){
if (isFirstSlashChecked){
childrenMap.set(children[i], ++numberOfSlashes);
} else {
childrenMap.set(children[i], numberOfSlashes);
isFirstSlashChecked = true;
}
}
}
//if there are not slashes in editable path
if (!isFirstSlashChecked){
childrenMap.set(children[i], 0);
}
}
//sort map by depth (number of slashes)
var sortedChildrenMapByPaths = new Map([...childrenMap.entries()].sort((a, b) => a[1] - b[1]));
//return sorted editables
return Array.from(sortedChildrenMapByPaths.keys());
}
And also added checking null statement here:
function repositionOverlay(editable) {
var parent;
// if there is no overlay in place, don't bother we ignore it (most likely timing issue)
if (editable.overlay) {
parent = ns.editables.getParent(editable);
//the place which was overlaid
// don't rely on order of editables in the store...
if (parent && parent.overlay != null && !parent.overlay.currentPos) {
repositionOverlay(parent);
}
editable.overlay.position(editable, parent);
}
}