Problem trying to drag custom component

[brenoassp]

Hello.

I have a custom component to add videos.
I put the video component inside a div to be able to align the video horizontally, that's why the video has the display: inline-block set.
Almost everything is working as I expected, the only problem is when I try to drag the video and drop it in another part of the canvas. What happens is: the video is moved, but its parent (the div) doesn't. The only way to drag and drop both elements is to drag and drop selecting the div itself.
I want to be able to drag and drop both of them when selecting just the video too.

The code is below:

const block = {
    id: 'video-block',
    label: 'Video',
    media: `tmp`,
    content: {
        type: 'video-custom',
        style: {
            'margin-top': 0,
            display: 'block'
        }
    },
    activate: true,
    category: 'Elements'
}

const videoComponent = editor => {
    editor.DomComponents.addType('video-custom', {
        model: {
            defaults: {
                tagName: 'div',
                droppable: false,
                style: {
                    display: 'block'
                },
                components: {
                    type: 'video',
                    provider: 'yt',
                    style: {
                        display: 'inline-block',
                    }
                },
            }
        }
    });
};

Any help would be appreciated.
Thank you

[artf]

Found myself in a similar situation, will publish in the next release the delegate property.
Here is what it would look like:

const cmpOutType = 'cmp-out';
const cmpInType = 'cmp-in';

editor.Components.addType(cmpOutType, {
  model: {
    defaults: {
      style: { padding: '20px' },
      components: { type: cmpInType },
      draggable: (src, trg) => trg.is('wrapper'),
      delegate: {
        // Select the inner component when trying to select this one
        select: (cmp) => cmp.findType(cmpInType)[0],
      },
    }
  },
});

editor.Components.addType(cmpInType, {
  model: {
    defaults: {
      style: { padding: '5px' },
      components: 'Inner component',
      delegate: {
        // Delegate these commands to the parent
        remove: (cmp) => cmp.closestType(cmpOutType),
        move: (cmp) => cmp.closestType(cmpOutType),
        copy: (cmp) => cmp.closestType(cmpOutType),
      }
    }
  },
});

editor.Blocks.add(cmpOutType, {
  label: cmpOutType,
  content: { type: cmpOutType },
  select: true,
});