Problem when dragging component composed by image and link

Hi! I've tested your solution. It does change the image correctly with the image locked inside the main component and you can move it around. The src attribute is changed in the model, but when you move the component he goes back to the placeholder image. If you change the image and then open the View Code modal you will see that the src attribute didn't change like in the model. I believe that this is happening because grapes is not setting an id for the image in the exported code.

Check the prints: Without setting an image when component is dropped:

Changing the image:

Then the view code:

Adding a column and moving the component into:

Here is the updated jsFiddle: https://jsfiddle.net/5er1kmg4/7/

But if you check the image model right after selecting the new image it has the new src value. This is happening with the standard asset manager. Me and @ronaldohoch were able to solve our problem because we use a custom asset manager. But i thought that this could be some bug and was worth to inform you. I hope that this can help.

@gustavohleal my bad, you have to update the src property directly instead of the attribute image.set({ src: asset.getSrc() });

Use the data-gjs-locked="true" property to ignore the image and update properly your custom component

// Remove runCommand("open-assets");  as it doesn't make sense to run it on the model side
// you can activate the component via blocks (https://grapesjs.com/docs/api/block.html#properties)
// by using `activate` property
init(){
  editor.runCommand("open-assets");
}
// Handle assets update in the view
view: {
  events: {
    dblclick: 'onActive',
  },

  onActive() {
    const { model } = this;
    editor.Assets.open({
      select(asset, complete) {
        const image = model.findType('image')[0];
        if (image) {
          image.addAttributes({ src: asset.getSrc() });
          complete && editor.Assets.close();
        }
      }
    });
  }
}

Thanks for reporting this, @ronaldohoch.

Great question about Problem when dragging component composed by image and link. 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!