[Help Wanted] How to easily override existing component ?

For example, I want to add a double click event handler on the default video component to open the assets manager.

let v = editor. DomComponents.getType('video')
let view = v.view()

My basic idea was to get the view definition of the video component and add events + handler. At last, set it back to the video component.

Unfortunately, this idea failed in the first step. v.View() gives me an error

TypeError: this._ensureElement is not a function
    at Object.e.View (grapes.min.js?e1c1:2)
    at Object.r (grapes.min.js?e1c1:2)
    at Object.r (grapes.min.js?e1c1:2)
    at Object.r (grapes.min.js?e1c1:2)
    at VueComponent.configVideo (HelloWorld.vue?18db:218)
    at VueComponent.mounted (HelloWorld.vue?18db:88)
    at invokeWithErrorHandling (vue.esm.js:formatted:1729)
    at callHook (vue.esm.js:formatted:3882)
    at Object.insert (vue.esm.js:formatted:2877)
    at invokeInsertHook (vue.esm.js:formatted:5887)

I am new to this project and barely know about Backbone.js. Would you please offer me some suggestions?

[archerbj]

@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]

@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