Help needed: Get the component that a block being dropped onto?

Sorry mate, but here I reply only to your main question

If I drag and drop a block on a dynamically added component, how can I get/access the component that the block is dropped onto?

// block and component are 2 different things, if you don't understand it, please read the documentation
editor.on(`block:drag:stop`, (component, block) => {
  // if component exists, means the drop was successful
  if (component) {
    component.addStyle({ color: 'red' }) // eg. update the style
    // Do you need the parent who contains this new added component??
    const parent = component.parent();
    // ...
  }
})

all other things seem too much confusing to me and honestly off-topic (I think Stack Overflow is a better place to ask layout issues with HTML/CSS)

@artf is there a way to wrap <mj-text>xxx</mj-text> inside a mj-section and mj-column if it is dropped illegally? Like if the user tried to drop it on the body. Reason is I would like to auto add a dropped text block in to a 1 column row if it is not dropped inside a column.

Thanks for reporting this, @sprklinginfo.

Great question about Help needed: Get the component that a block being dropped onto?. The recommended approach with StyleManager is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!