GrapesJS Issues

3,464 parsed GitHub issues โ€” 370 solved ยท 90 open. Search, filter and explore battle-tested answers.

336 issues found

๐Ÿ” style-manager
#6102Aug 31, 2024by Alababdiy3 answers
5 reactions

Traits Not Displayed After Reloading Editor for Custom Component

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 91VReproducible demo link https://jsfiddle.net/8tsj5vpb/Describe the bug I'm encountering an issue with GrapesJS where traits defined for a custom component are not being displayed after reloading the editor. The trai...

mohamedsalem401

@Alababdiy I was unable to reproduce the issue using the link provided. However, it seems like the issue is that GrapesJS doesn't allow adding or defining a component after it has been initialized.

mohamedsalem401

Hey @Alababdiy, I wasn't able to reproduce the issue you described in the JSFiddle.

GJS Helper

You've encountered a common issue related to how GrapesJS persists and re-identifies custom components after reloading the editor. The traits for your custom component disappear because GrapesJS is not correctly re-associating the loaded c...

#6096Aug 30, 2024by kanaihyakumar4 answers
2 reactions

Resizable Box Disappears on Component Reselection

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfiddle.net/kanaihyakumar/oedg76nt/ Describe the bug Description When selecting any component on the canvas, it highlights the bottom resize box as per the settings. However, upon cli...

kanaihyakumar

Earlier, I needed to be more clearer about the steps to reproduce the issue. Here is the refined steps to produce the issue. Steps to Reproduce the Issue:Click on the section directly.Observe the resizable options displayed.Click in an are...

kanaihyakumar

Trust me, I was lucky that I was able to find this tragic behavior of clicking different places inside section was behaving but different.

artf

I don't see it disappearing if not when you press the click but that is expected as it gets ready to be dragged

#6051Aug 9, 2024by SAJAD-CH2 answers
0 reactions

Issue in plugin

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link asdasd Describe the bug I am having an issue while installing NPM plugin packages like preset-webpage, preset-newsletter , the css file is missing while installing in both when i check node mo...

artf

@SAJAD-CH please provide a reproducible live demo (eg. via stackblitz) when you open a bug issue

GJS Helper

It seems you're encountering a common issue when integrating GrapesJS plugins into modern JavaScript frameworks like Angular, where the CSS files don't appear as standalone files in nodemodules for direct linking. This is expected behavior...

#6039Aug 6, 2024by Gryphonn4 answers
3 reactions

Cannot set Block display value

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126 Reproducible demo link https://jsfiddle.net/Gryphonn/ob1pznh6/ Describe the bug How to reproduce the bug?Select any word.Wrap it for style.Keep this word selected.Go to General -> DisplayI want Block. I click Bl...

artf

Yeah, the issue is here: https://github.com/GrapesJS/grapesjs/blob/1e3766f0060e6da502fccf9ba9eb938d5ac860bb/src/style_manager/model/PropertyFactory.ts#L267 Would it make sense to add a new option like initial and make it the default one?

danstarns

> Hi @Gryphonn,> I tried to reproduce your issue but the steps aren't that clear, please rephrase. bandicam.2024-08-08.21-07-14-667.mp4 Thank you for a detailed report ๐Ÿ™ It looks like we should better handle the default display so you don...

danstarns

Hi @Gryphonn, I tried to reproduce your issue but the steps aren't that clear, please rephrase.

#6012Jul 21, 2024by aswinkumar8631 answer
0 reactions

Input number value does not persist when using up/down arrows

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https://codepen.io/aswinkumar863/pen/VwJaVYG Describe the bug How to reproduce the bug?Open the demo.Click the "Click Me" section within the editor's body.Navigate to the Style Manager an...

GJS Helper

You've accurately identified a bug in GrapesJS where the input type="number" fields in the Style Manager and Trait Manager do not correctly persist manually entered values when the up/down arrows are used without first blurring the input....

#5990Jul 4, 2024by ihatov084 answers
1 reactions

When you delete a component, duplicate classes between components will be deleted.

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 126.0.6478.127(Windows) Reproducible demo link https://jsfiddle.net/t06s4oLb/8/ Describe the bug How to reproduce the bug?Add section1 to canvasAdd section2 to canvas under section1remove section2 from canvas.The st...

artf

You should avoid putting shared styles in component-related ones. Check this discussion on how to prevent this: https://github.com/GrapesJS/grapesjs/discussions/5968

ihatov08

As a temporary workaround, styles for each component are prefixed with id.

ihatov08

@artf thank you for your reply. I would like to confirm #5968

#5984Jul 2, 2024by Ju99ernaut1 answer
0 reactions

" " are getting removed by RTE

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v123.0.6312.124 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Add a text elementOpen RTE and type a wordSelect the word and make it a link or wrap for styleAdd space...

GJS Helper

The issue you're experiencing where spaces are removed between styled elements (like links) in the GrapesJS Rich Text Editor (RTE) is a common behavior in many HTML editors and browsers due to how whitespace is handled. When two inline ele...

#5982Jul 2, 2024by ihatov082 answers
1 reactions

Component styles such as md:flex-row(tailwind) are removed

GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 126.0.6478.127Reproducible demo link https://jsfiddle.net/6m53pwy7/4/Describe the bug How to reproduce the bug? I'm looking to use Tailwind with GrapesJS, but this framework uses Utility-First CSS Classes to build qui...

artf

You need to escape properly the CSS

GJS Helper

It appears you've encountered a known limitation or bug in GrapesJS's CSS parsing and style management when dealing with selectors that contain escaped colons (\:), which are common in frameworks like Tailwind CSS for responsive variants (...

#5969Jun 25, 2024by uncldrw1 answer
0 reactions

Name of @container directive is missing a space when exporting CSS

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome LTS Reproducible demo link / Describe the bug I noticed that the @container directive is missing a whitespace when exporting the code. This is the code I provide: To use it in a custom block, I save the CSS into the...

GJS Helper

You've identified a legitimate bug in GrapesJS's CSS serialization process when handling @container directives with a specified name. The issue stems from the internal CSS parser/exporter stripping the essential whitespace between the cont...

#5942Jun 12, 2024by adarshsingh1972 answers
0 reactions

BUg in RichTextEditor

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link i have given the code in issues Describe the bug Screencast from 12-06-24 03:09:58 PM IST.webm problem is right after applying any bold or italic it is getting disappeard once i click somewher...

artf

From the official demo it looks to work as expected, so I guess it's related to your custom logic. Please provide a minimal reproducible demo of the issue.

GJS Helper

The issue you're experiencing, where bold or italic formatting disappears after applying it and clicking away, is a common synchronization problem when customizing the GrapesJS Rich Text Editor (RTE) with custom: true. Root Cause When you...

Browse all topics