How to open the asset upload window when a user click on property in the styleManager?

[pardeepsinghrajewal]

I'm in the process of developing a new plugin to introduce a "Background Video" option. I've successfully added a new property named 'Background Video' to the Style Manager's Decorations section. Now, I would like to enhance the user experience by opening the asset upload window whenever a user clicks on the 'Background Video' property.

Could you please guide me on how to achieve this functionality? Your assistance is greatly appreciated! Thank you in advance for your help!

[ronaldohoch]

Hello!

You can run editor.runCommand("open-assets"); when click in the Background Video property.

[pardeepsinghrajewal]

@ronaldohoch thanks for reply. I am new in GrapesJs. I have added the property with following code:

view:{
init()
{
const property = styleManager.addProperty('decorations', {
label: 'Background Image',
property: 'bg-image',
type: 'text',
}, { at:99 });

    if(property !== null && property !== undefined && typeof property === 'object' )
    {
      console.log('* property *',property);
      
    }
  }
}

It is showing the property in the style manager : https://nimb.ws/ierdKY
Now I am unable to add 'click' EventListener on this textbox that is showing in the style manager.

[ronaldohoch]

Right.
Well, i think you can create a trait to it since there is not a css property for video to achieve it with Style Manager.

https://grapesjs.com/docs/modules/Traits.html#add-traits-to-components

[pardeepsinghrajewal]

@ronaldohoch If I include the video tag with an absolute position, is it still possible to set the video as a background?

[ronaldohoch]

Maybe this can help.

https://github.com/Ju99ernaut/grapesjs-video-bg

[pardeepsinghrajewal]

Thank you for providing this extension. It has been incredibly helpful to me.