[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)
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.
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.
Issue #2388
[Question] - How to import styles from <link> to be rendered when dragging block to canvas
My situation: I'm slowly importing some of my custom made UI components in ReactJS to GrapesJS. Now, I am able to render the component prop...
Issue #913
[Question] Using Style tag instead of css
Hi, I've been taking a look inside of the dom_components, but cant seem to figure out how to manually override the styling aspect. I need a...
Issue #861
[Question] Help adding images to the canvas
I've followed the docs and have been able to upload images. When I drag an image block (using the newsletter preset) and select an image fr...
Issue #1218
[QUESTION] Asset Manager - Upload Image
Hey @artf , I have a question around Asset Manager. When uploading an image via computer or url the preview shows up at the asset collectio...
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.