Component move/remove/add bubbling event

[whit3st]

I have simple function that I attached to move event:

component.on("move", moveHandler);

this is in a trait, it is depending on a dynamic data that comes from a certain type parent component.

let's say i have two components called container and text. container is div tag, text is p tag. you get the idea.

if my editor is currently like this: container component A -> child container component B -> child text component A.

this moveHandler function executes when i move the text component but it doesn't execute when I move it with its parent. e.g. if i move the container component B along with its children, this handler doesn't execute and I don't know how to achieve this bubbling effect with events. I tried to find some event that fires when I do this move with component.on("all"... but there is no event fired. Maybe I am thinking this wrong but shouldn't we get some sort of event fired when a component's parent or layer that it is in changed?

If this is not clear of an explanation, let me try again please.

let's say this is our editor:

<wrapper>
  <container>
    <grid>
      <text>Hello</text>
    </grid>
  </container>
</wrapper>

and i move the text component into the wrapper:

<wrapper>
  <container>
    <grid></grid>
  </container>
  <text>Hello</text>
</wrapper>

move event fires correctly but if i move the grid component into the wrapper:

<wrapper>
  <container></container>
  <grid>
    <text>Hello</text>
  </grid>
</wrapper>

move event inside the text component doesn't fire. I think this makes sense in a way but also doesn't? What I am trying to achieve is something like this:

const isInContainer = Boolean(component.closestType("container"));
if (isInContainer) {
  // logic if in container component
} else {
  // logic if not in container component
}

Maybe there is a way to achieve this and I am dumb but I couldn't find it. Any help appreciated!

[whit3st]

Okay, I solved this problem. In case anyone needs this, this is what I did.

// propagate.ts

import type { Component } from "grapesjs";

const events = ["removed", "remove", "render", "add"];

export function initPropagate(component: Component) {
    events.forEach((eventName) => {
        component.on(eventName, (...props) => {
            component.find("*").forEach((c: Component) => c.trigger(eventName, props));
        });
    });

    return component;
}

// some component

init() {
    initPropagate(this);
}

I am manually firing the events I need in every component and calling this function in container-like components that I use.