[Help Wanted] How to easily override existing component ?
Question
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?
Answers (3)
@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
@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 typeitself rather than trying to find all instances of that component and add it on some change. So to do that, create a newComponent Typethat extends thevideotype then add thedblclickevent 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.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3124
FEAT: component:clicked / dbclicked event
Hi, i am trying to use video component to upload in the assets manager. And I realize I can leverage editor event component:selected to do...
Issue #818
[QUESTION] Open different Panel's view on click text element
How can I make "click" event on texts open different panel's view than StyleManager? I'm trying this:
Issue #538
Clicking component always opens styles first, even if I override
When I click the component, I want the traits to open Clicking a component opens the styles. Clicking it one more time will finally open op...
Issue #912
[BUG]: HTML attributes/traits not escaped
When double quotes are added to an attribute it breaks the HTML.https://jsfiddle.net/szLp8h4n/Drag in the link block.Click the link in the...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.