GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

336 issues found

πŸ” style-manager
#3429May 4, 2021by justin37372 answers
2 reactions

There is no display grapesjs-style-bg plugin

hi @artf thank you for doing everythings here but I try to use this plugin but I can't Version: 0.17.3 Are you able to reproduce the bug from the demo?[x] Yes[ ] No Describe the bug detailed there in no display plugin What is the current behavior? Nothing happens. Are you able to attach screenshots, screencasts or a l...

Ju99ernaut

Unfortunately the plugin will not automatically replace the original background image input so you'll have to do it manually. You'll need to add this to your style manager config somehow and remove the built in version: For more reference...

GJSBlock

Thanks for reporting this, @justin3737. The issue with there is no display grapesjs-style-bg plugin appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificat...

#3425Apr 30, 2021by anlumo2 answers
1 reactions

StaticRules for CssComposer Non-Functional

The sample config file for the CssComposer references a staticRules property. This property name is not used anywhere else in the source code (verified using GitHub search) and also doesn't do anything. Version: 0.17.3 Are you able to reproduce the bug from the demo?[ ] Yes[X] No (not really applicable) What is the ex...

artf

Thanks @anlumo you're right, that was an old option, I'll remove it. For the purpose of static CSS rules, we have these options

GJSBlock

Thanks for reporting this, @anlumo. The issue with staticRules for CssComposer Non-Functional appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications o...

#3424Apr 29, 2021by Tal5001 answer
0 reactions

HE(Hebrew) Language support

I would like to add Hebrew language support, and to translate it. Additionally, you should support the "direction" property in order to allow Right to Left language support for display: https://www.w3schools.com/cssref/prtextdirection.asp

GJSBlock

Thanks for reporting this, @Tal500. Great suggestion about HE(Hebrew) Language support! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approach...

#3421Apr 29, 2021by ltenti-eventboost4 answers
2 reactions

How to remove class selector css rule

I'm using componentFirst set to true to let my users apply needed style to component they selected. Selecting a component which is applied a css class specific to the component type, and clicking "Sync" button causes the selector change from the component ID to the relevant css class. Now I can't find a way to go back...

ltenti-eventboost

It makes sense, now I just have to find a way to add this feature to my builder. Thank you @Ju99ernaut!

bgrand-ch

Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...

artf

Hi @ltenti-eventboost I'm not sure If I understand exactly where is your issue. When you're editing with componentFirst enabled, the editor applies style changes on a component-specific CSS rule (eg. #cmp-id { color: red }). When you hit t...

#3420Apr 28, 2021by sanchit362 answers
0 reactions

How to implement LocalStorage in reactjs project??

I am trying to implement localstorage in reactjs app, it is for some reason not storing data in localstorage

artf

The local storageManager does all the job for you, so you don't need to perform all those manual stuff you're doing now. So leave the storageManager option and remove the rest. ps. be careful with useEffect, add an empty array as dependenc...

GJSBlock

Thanks for reporting this, @sanchit36. Great question about [URGENT!!! QUESTION]: How to implement LocalStorage in reactjs project??. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...

#3412Apr 25, 2021by maxtsh2 answers
2 reactions

Auto save is working partially and stops working after inserting text

hello guys. I am using this awesome project for a production app written with React.js, So I integrated it inside my app. everything works fine but I have a problem with auto saving the editor data on each change to editor. OS: Windows 10 Browser: Chrome 90 GrapesJS version: 0.17.03 latest on 26/04/2021 EDITOR INSTANC...

artf

Thanks @maxtsh for the report, there is actually an issue with those old blocks from the basic plugin which breaks the storage counter. I'll push the fix soon. For now, as a hotfix, update those blocks in this way.

GJSBlock

Thanks for reporting this, @maxtsh. The issue with Auto save is working partially and stops working after inserting text appears to be a race condition or state management timing problem. This typically happens when component lifecycle eve...

#3408Apr 21, 2021by marcepoblet2 answers
1 reactions

How to changes styles of devices, view code and fullscreen

Currently we have this GrapesJs style: But, we are looking to have this GrapesJs style: My questions are: 1- - how we can change the format in the devices? we would like to have buttons instead of dropdown. 2- is possible move the buttons 'view code' and 'fullscreen' inside the page?

Ju99ernaut

You'll just need to set the device or run the respective commands on the button's click event eg.

GJSBlock

Thanks for reporting this, @marcepoblet. Great question about [QUESTIONS] How to changes styles of devices, view code and fullscreen. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS...

#3407Apr 21, 2021by rattrayalex3 answers
8 reactions

CSS Grid

What are you trying to add to GrapesJS? Add support for CSS Grid (display: grid;) and its various options. I have no immediate personal need for this, but I figured it should be tracked.

Ju99ernaut

This plugin has a css grid layout tool https://github.com/Ju99ernaut/grapesjs-plugin-toolbox https://user-images.githubusercontent.com/48953676/115495409-d98a9000-a267-11eb-923a-b6f86cbefc99.mp4

artf

@Ju99ernaut amazing plugin

GJSBlock

Thanks for reporting this, @rattrayalex. Great suggestion about FEAT: CSS Grid! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: List...

#3406Apr 20, 2021by vatte212 answers
0 reactions

How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page

Hello everyone, i want to save data from canvas to redux store, and it works, but after reloading the page, storage load method , doesnt set my data to builder (canvas), i dont know whats wrong, let me know if someone has any solutions. Code example :

artf

Remove this one const resultKey = key.slice(4);. You're storing data with the prefix but then you're loading it without

GJSBlock

Thanks for reporting this, @vatte21. Great question about How to create a custom storage manager, it doesnt set saved data from canvas, after reloading the page. The recommended approach with StyleManager is to use the event-driven API. St...

#3404Apr 18, 2021by Abhisheknanda13444634 answers
0 reactions

Style Manager Issue.

Hi @artf I want to hide and show style properties for specific component. After referencing this issue https://github.com/artf/grapesjs/issues/1428 I've write my code this way but it's giving me error -: Could you please help @artf ? after doing this It's not finding the "style sector" (Layout) object. What is best po...

artf

Hi @Abhisheknanda1344463 did you try to follow my indications here? You don't need to add/remove sectors on each select just play with component properties

Abhisheknanda1344463

@artf I've tried that but if i do like this https://github.com/artf/grapesjs/issues/1428#issuecomment-421640559 then it'll show the style sectors in which that properties are present. I want to show my custom only one style sector for spec...

artf

Here a quick example of usage: https://jsfiddle.net/1tvrLqem/1/ As you can see the sector will hide if there are no properties to show

Browse all topics