Issue #1508Opened October 12, 2018by ghost0 reactions

[Question]: Refresh Canvas after changing gjs-html externally

Question

Hi,

I've been using GrapesJS with ReactJS (GrapesJS sits inside its own react component) and I'm having an issue uploading an image using my own react file-picker component.

When I select an image from my filepicker react component, as its external to GrapesJS I manually update the gjs-html item in the local storage with the file path returned via the react life-cycle method componentWillReceiveProps method in my GrapesJS component which works great, the issue I'm having is that I'm unable to trigger an update of the GrapesJS canvas after I have modified the gjs-html to update the only way I can get the imported image to show on the canvas is to destroy the instance of GrapesJS and create a new one so that it uses the gjs-html in the initialization.

At the point of returning the selected image I'm outside of GrapeJS's scope which is the reason I have to modify the local storage gjs-html manually. I'm assigning the initialization of GrapesJS to a variable and hoped to be able to trigger a refresh of the editor through it. I have unfortunate not been able to achieve an update of the canvas to show the new image.

I'm aware that GrapesJS has not been built with react specifically in mind but I'm wondering if there is a way to refresh the Canvas without having to destroy and re-initialize the editor. I have been through the API and have tried various approaches but so far have not been able to find a solution.

I was wondering if you have and pointers or approaches you could suggest.

Thanks

Answers (2)

ghostOctober 16, 20180 reactions

Looks like I forgot about the DomComponents, after downloading and having a look through the src for grapesjs-newsletter, I was in the openImportCommand and noticed how the DomComponents were being updated. So I added the following into my react componentWillReceiveProps method just after I update the html in local storage. editor.DomComponents.getWrapper().set('content', ''); editor.setComponents($f('body').html());
Now it shows the image correctly, its not perfect yet but I seem to be on the right track now.

cederronMay 1, 20220 reactions

Looks like I forgot about the DomComponents, after downloading and having a look through the src for grapesjs-newsletter, I was in the openImportCommand and noticed how the DomComponents were being updated. So I added the following into my react componentWillReceiveProps method just after I update the html in local storage. editor.DomComponents.getWrapper().set('content', ''); editor.setComponents($f('body').html()); Now it shows the image correctly, its not perfect yet but I seem to be on the right track now.

Hey, this got me in the right track. Thanks!

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.