Custom Resizer issue (or maybe how I'm saving/loading components)

Question

I'm trying to build a custom resizer for one of my components. It's a grid/column layout based on Flexbox and I want users to be able to resize one column (to a fixed width) and have the other columns fill up the remaining space. I already have a custom component for my column, so I added resizer configuration to it, including an updateTarget() function, and it works great. However, if I save that content, and then come back to it, the updateTarget() function never gets invoked. New components...

artf · Accepted Answer

Yeah, you're right. This happens just because functions are not serializable, therefore when grapesjs calls JSON.stringify(Component) are simply ripped off. The solution for your case is to override toJSON method in the custom Component

thecodefish · Answer

Thanks @artf that did the trick.

sakshigarg9 · Answer

@thecodefish How do you change initial state of the Resizer properties? Where does this config go if I'm using the grapesjs-preset-webpage, simply under grapesjs.init{...}? I want to fix a minimum dimension for an image component specifically and disable a few of the corner points like tl, tc, tr.

Custom Resizer issue (or maybe how I'm saving/loading components)

Question

Answers (3)

Related Questions and Answers

[Question] Flexbox column is not working correctly.

When the component's view modifies the HTML, text components are no longer editable

[Question] Firing events with custom components

bug on resize image

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories