How to get parent component instead of each individual component on 'component:add'

[giltee]

Hi there,

I am trying to add custom logic to the following card component

// Define a new custom component
this.editor.DomComponents.addType('mchn-product-card', {
	model: {
		defaults: {
			script,
			dialog: this.isLoaded,
			'script-props': ['dialog'],
			// Add some style, just to make the component visible
			components: {
				attributes: { class: 'mdc-card' },
				tagName: 'div',
				type: 'div',
				style: {
				},
				components: [
					{
						attributes: { class: 'mdc-card__content' },
						resizable: false,
						tagName: 'div',
						type: 'div',
						style: {
							'min-height': '40px',
							'padding': '20px',
						},
						components: [{
							attributes: { class: 'mdc-card__media-content' },
							resizable: false,
							tagName: 'div',
							type: 'text',
							style: {
								'min-height': '40px',
							},
							content: 'Title'
						}]
					},
					{
						attributes: { class: 'mdc-card__primary-action' },
						resizable: false,
						tagName: 'div',
						type: 'div',
						components: [{
							attributes: { class: 'mdc-card__media mdc-card__media--16-9' },
							resizable: false,
							tagName: 'div',
							type: 'text',
							style: {
								'min-height': '300px',
							},
						}]
					},
					{
						attributes: { class: 'mchn-mdc-button-anchor mchn-article-product-card-link' },
						tagName: 'a',
						type: 'link',
						style: {
							'text-decoration': 'none !important',
						},
						components: {
							attributes: { class: 'mchn-mdc-button mdc-button mdc-button--unelevated' },
							resizable: true,
							tagName: 'button',
							class: '',
							type: 'button',
							content: 'Shop Now',
						}
					}
				],
			}
		},
	}
});

// Create a block for the component, so we can drop it easily
this.editor.Blocks.add('productCard', {
	category: 'Ecom',
	label: 'Product Card',
	attributes: { class: 'fa fa-card' },
	content: { type: 'mchn-product-card' },
});

The problem I am facing is that when I call the below editor listener, I get each individual component inside my card component.
How can I get the parent block and manipulate each component in one call, instead of the child components being supplied one by one?

this.editor.on(`component:add`, async (model) => { 

			let attributes = model.get('attributes');

			if(
				model.get('tagName') == 'a'
				&& attributes.class
				&& attributes.class.includes('mchn-article-product-card-link')
			){
// ...
})

[artf]

You can check the component type

this.editor.on(`component:add`, (component) => { 
  if (component.is('mchn-product-card')) {
    // ...
  }
})

[giltee]

Thank you sir, a much better approach.