Issue #3100Opened October 28, 2020by stljeff10 reactions

Adding external libraries after dragging custom block

Question

Hi,

I am customizing GrapesJS by creating components/blocks my users can drag onto the canvas. A number of these blocks depend upon external libraries like Bootstrap and FontAwesome.. Is there a way to check to see if the necessary dependencies are included on a page, and if not, add them to the page?

Here is what I already know. I am hoping that someone can help me fill in the gaps of my GrapesJS understanding, or point me in a helpful direction.

  1. I am aware that I can tap into drag and drop events when a user places a block on a page. However, I can only tap into the 'block:drag:stop' event for some reason. And if I try to add my library dependencies to the page at this point, I end up clearing out all of my page content. Obviously I am trying to add my dependencies too soon and need to wait until the block renders on the page before operating on the page. Is there a known way of how to do that? Or would this be something unique to my GrapesJS project?

  2. I also know that you can add script dependencies for blocks. is there a way to leverage that?

If I cannot add the necessary markup to include my dependencies when a user drags a block on a page, is there a way to notify the user "Hey, you need to include these dependencies..."?

Thanks for your attention.

Answers (3)

GoodPHPOctober 30, 20200 reactions

Hi,

If you didn't find answer here, you can contact with Devfuture Team: https://devfuture.pro/contact/

We specialise on GrapesJS.

artfNovember 9, 20200 reactions

@stljeff1 the correct way is to use Component related scripts which check if the dependency exists

stljeff1November 12, 20200 reactions

@artf Can I do that with CSS files?

Nonetheless, I did manage to "solve" my problem by creating a custom type for the blocks with any kind of dependency (CSS or JS). This custom type extends the default view by adding a custom callback when blocks of that type are placed on canvas. When this callback is triggered, I pop up a dialog box notifying the user of the dependencies, and if user accepts, I add the dependencies to the page.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.