GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v122 Reproducible demo link not applicable Describe the bug The ColorPicker Interface that came with the latest release, defines the "preferredFormat" option to expect a 'boolean' value but the docs of the Spectrum...
GJS Helper
This is indeed a valid bug report regarding the TypeScript type definitions in GrapesJS for the ColorPickerOptions interface. The preferredFormat property is incorrectly typed as boolean when it should be string according to the underlying...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox Version 123.0 (64-bit) Reproducible demo link Not present Describe the bug I guess most of the .js files have been turned into typescript but there might be more broken links like the below one.. Code of Conduct [X...
GJS Helper
Thank you for reporting this broken link in the GrapesJS API documentation. You've correctly identified the root cause. Root Cause The GrapesJS project has been undergoing a significant migration from JavaScript to TypeScript. As part of t...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome latest Reproducible demo link we are running on local machine now Describe the bug Hello, right now grapesjs provides built in properties like margin, padding that allow user to change each property one by one (marg...
artf
Please avoid opening BUG issues without reading the actual point of bug issues in the template.
GJS Helper
It's a great suggestion to enhance the GrapesJS styling experience! By default, GrapesJS's Style Manager provides granular control over CSS properties like margin and padding, allowing you to adjust each side (top, right, bottom, left) ind...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v122 Reproducible demo link https://jsfiddle.net/Lk2bwhp4/ Describe the bug How to reproduce the bug?Place the editor inside of a container, then programmatically resize the container's width. What is the expected b...
artf
Thanks @bernesto for the report but as we can't detect programmatic layout changes without impacting the performances, in this case, you have to update the editor layout manually via editor.refresh() (eg. in your example you would put the...
bernesto
Hi @artf, I actually had this accidentally mixed in the last pull request you accepted (src/canvas/model/Frame.ts). You might want to take a look at what I added and see if it is causing an issue. We have it in testing right now and haven'...
artf
I actually had this accidentally mixed in the last pull request you accepted and I actually removed it cause it seemed to be unrelated π€£ Not a problem to add it back but consider that your example will work only because of the desktop Dev...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v120.0.6099.199 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Drag the column 1 block onto the canvasDrag any other block into the cell for example textSelect the ce...
artf
Good catch, I'll fix it
GJS Helper
This is a known bug in GrapesJS related to how the Layers panel (specifically the Layer view) reacts to changes in a component's children collection. The issue arises when a component, like a column or cell, is initially empty and then has...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Edge v119.0.2151.72 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Hi, thank you for creating an amazing project. I would like to report an issue found during my use of GrapesJS. How to reproduce th...
artf
Agree with the suggested alternative, I will update accordingly. Thanks @duydvu
GJSBlock
Thanks for reporting this, @duydvu. Great question about Performance issue when adding more than 20 classes to a single component. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS do...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link none Describe the bug replaceWith method from Component.ts doesn't have a type for string. What is the expected behavior? I should be able to replace a component with a string like in the exam...
You've correctly identified a TypeScript typing issue with the replaceWith method in GrapesJS. While the method internally supports replacing a component with an HTML string, its TypeScript definition (Component.d.ts) currently doesn't ref...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome/Safai/Firefox Reproducible demo link https://grapesjs.com/docs/getting-started.html#layers Describe the bug How to reproduce the bug? Navigate to the GrapesJS Getting Started documentation at this link. Attempt to r...
GJS Helper
You've accurately identified a layout bug in the GrapesJS "Getting Started" demo regarding the resizing of right-side panels. The drifting behavior you observe is indeed not the expected smooth resizing where the panel's right edge remains...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v117.0.5938.149Reproducible demo link https://jsfiddle.net/9oLrsvya/Describe the bug How to reproduce the bug?Please see the pageManager object in the jsfiddle What is the expected behavior? Looking at the following d...
mapsmarketing
One annoying thing is that the editor is prepending the below default styles which when saving the styles has numerous duplicates of it: Edit: Looking at the docs I finally managed to find protectedCss and when set to empty stops the style...
artf
Hi @mapsmarketing currently GrapesJS is not able to properly import HTML documents as string, so the parser skips elements like html, head, body and returns only what is parsed inside the body, one workaround you could do right now is to p...
mapsmarketing
Hi @artf , I've found a way to get the body attributes along with the styles saving correctly via the following method: I noticed that your Page.toJSON outputs everything of the specified page. However, it doesn't seem to output the styles...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 117.0.5938.134 (Official Build) (64-bit) Reproducible demo link https://jsfiddle.net/ap404703/0e5zop1n/ Describe the bug Example as below Grapes Js file :- // Initialize GrapesJS const editor = grapesjs.init({ canv...
artf
@ChiragS-Prajapati you have to use draggable/droppable component properties to control where components could be dragged and what components can be dropped inside.
GJS Helper
The issue you're encountering, where one section block can be dropped inside another, is a common behavior in GrapesJS by default. GrapesJS treats HTML elements like <div> and <section> as containers, allowing other components to be nested...