BUG: Problem when dragging component composed by image and link

[ronaldohoch]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Brave last version

Reproducible demo link

https://jsfiddle.net/rp7oc96v/1/

Describe the bug

Hi Arthur!
I'm creating a new component, an image inside a link, like the mj-image component, but i'm stuck in one configuration or it's a bug...

How to reproduce the bug?

1. drop the block "Link na Imagem"
2. when you try to drag the new component from image, grapesjs select the image and not the component root tag ()
3. If i need to drag the whole componet, i need to use the icon from toolbar.

What is the expected behavior?

1. That children component don't mode without the parent element.

What is the current behavior?

1. If the children img element dont' have the attribute data-gjs-selectable="false" we will move only the image instead of moving the whole component.

Other problems i found
In my component, i have configured this:

model:{defaults:{...
resizable: {
       ratioDefault: 1
}
...

So, when i drop my new component, the resizer shows up, but, if i click again, with the resizer visible, it hides...

If i put data-gjs-locked="true" or data-gjs-editabble="false" to block everything from image, i can't change it's src with assets manager.
If I put the style pointer-events:none, the event dblclick from component don't fires, the grapesjs keeps clicking on the image 😔

Also, tried the things we found in these issues: #3014 #2103

Code of Conduct

• I agree to follow this project's Code of Conduct

[artf]

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();
        }
      }
    });
  }
}

[gustavohleal]

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.

[artf]

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