How to easily override existing component ?

@archerbj here's a demo of what you're looking for: https://codesandbox.io/s/sharp-easley-3hrdn?file=/index.js

You want to attach the functionality to the component type itself rather than trying to find all instances of that component and add it on some change. So to do that, create a new Component Type that extends the video type then add the dblclick event handler to the view. Once you've got that, then you create a block that uses your new component type.

Here is some documentation on how to extend component types and here's the guide on creating a custom block

Hope this helps.

Josh

Thanks a lot! I missed that part in the docs. I'll try to figure it out

@Joshmamroud Thanks for that running example. Yours is the only example I can find of using the extend feature mentioned in the documentation.

Your example is very simple and zen - however it merely shows adding a dblclick handler to the video component and does not show adding additional component attributes or properties and traits. Any chance you could explain that or provide an example, as I am struggling to comprehend how to use extend - as I've mentioned in #3060.

Thanks for reporting this, @archerbj.

Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date.

For you right now:

1. Run npm audit fix to see available patches
2. Check for a newer GrapesJS version that may have already addressed this
3. If available, test the latest stable release before upgrading
4. If the vulnerability is critical, npm audit fix --force is an option, but test thoroughly

Understanding the risk:

• Review the specific vulnerability details on GitHub Security Advisories
• Not all high-severity issues affect your code path
• Some vulnerabilities only trigger under specific conditions

Staying current:

• Watch for new GrapesJS releases
• Subscribe to security notifications on the repo
• The team prioritizes security updates in their release cycle