GrapesJS Issues

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

336 issues found

πŸ” style-manager
#3269Feb 12, 2021by acondura4 answers
0 reactions

Translating html string

Great library! It meets all the requirements but one: website text translation. I've searched high and low through the issue queue and docs and for some reason I can't find anything about this subject. My clients do not care that the grapesjs editor is in English. What they want is the ability to easily translate thei...

artf

This is something you would need to create on your own. Maybe a custom text component, which gives the possibility to change the content with the selected language.

jordandevogelaere

@acondura do you have a solution for this? I have the same requirement for my client. Thanks

gxanshu

i have the same requirement too. and yes only way we can achive this is by creating our own component

#3262Feb 4, 2021by lacieri2 answers
0 reactions

Parse styles to a Css string

Hi @artf ! Is there any way to parse the styles into a CSS string? This would be helpful in a scenario where you have multiple GrapesJs instances stored and you want to update the CSS on all of them. You can manipulate the styles because that is an array and it's reliable. Currently, on the CSS I am using regex to loc...

artf

Well, you should be able to take the CSS from any GrapesJS instance with editorInstance.getCss(). Which basically generates the CSS from the styles JSON

GJSBlock

Thanks for reporting this, @lacieri. Great question about [QUESTION]: Parse styles to a Css string. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific m...

#3261Feb 4, 2021by nithinpillalamarri1231 answer
0 reactions

How to customise the grapes js form to append style

WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.mdDo a quick SEARCH first, to see if someone else didn't open the same issueAll relative statements/questions have to be filled/answered, otherwise, th...

GJSBlock

Thanks for reporting this, @nithinpillalamarri123. The issue with how to customise the grapes js form to append style appears to be a race condition or state management timing problem. This typically happens when component lifecycle events...

#3260Feb 3, 2021by mhowey3 answers
1 reactions

Color Picker Transparency slider is at 0 in firefox.

The color picker in grapesjs does not work the same between Chrome and Firefox. When you open the picker on a selected component that has never had it's background color set before (for instance...) the color picker opens with opacity set to 100% in Chrome and 0% in Firefox. The issue is that the user may hot even loo...

mhowey

@artf Another difference to note between Firefox and Chrome is what is displayed in the palette. Firefox shows a transparent box while Chrome shows a gray one.

artf

Seems to be solved on the latest Firefox version

GJSBlock

Thanks for reporting this, @mhowey. The issue with Color Picker Transparency slider is at 0 in firefox. appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modif...

#3259Feb 3, 2021by bgrand-ch2 answers
1 reactions

V0.16.27 - Style/ID disappear when nested span

Version: 0.16.27 Are you able to reproduce the bug from the demo? [ ] Yes [ ] No [X] Video but no demo What is the expected behavior? Add as many nested span elements as necessary and preserve their style/ID. What is the current behavior? From two nested span elements, style/ID of parent span elements disappear. Are y...

artf

Hi Benjamin, the bug was already fixed (when you report a bug, ensure to have the latest version)

GJSBlock

Thanks for reporting this, @bgrand-ch. The issue with v0.16.27 - Style/ID disappear when nested span appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifica...

#3255Feb 1, 2021by Abhisheknanda13444633 answers
3 reactions

Custom Style Manager

Hi @artf I am trying to change the type and input values of display property like this way -: But on style-manager Button are not visible. How can we customize the display property Demo -: https://codepen.io/abhi_punk81/pen/MWbWzaq?editors=0010 Could you Please Help @artf ? Thanks

nilchu

You have to use the list property to define your options. Inside the radio option objects, it should read name instead of title. ```javascript const styleManager = editor.StyleManager; styleManager.addSector('div-only-sector', { name: 'Set...

Abhisheknanda1344463

Thanks A lot @nilchu for your help.

GJSBlock

Thanks for reporting this, @Abhisheknanda1344463. Great question about Custom Style Manager. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module L...

#3252Jan 28, 2021by ThetripGr4 answers
0 reactions

Does getHtml() remove the inline style property?

I was fiddling with ways that you could change the style of elements inside the canvas and i noticed that by using the color-picker trait to set the inline style color property of the element (not the inline style tag that you get through the getCS() ), that style property was completely gone when getHtml() was used.I...

artf

Hi @DodoTrip the reason is that with inline CSS you can't define styles with states (eg. :hover) and media queries, so I've always seen it as a useless limitation instead of a feature. Despite that, you can still use that option if you don...

ThetripGr

Hi @artf and thank you, for your reply. Mind giving me an example on how it is done right now or should avoidInlineStyle make it work easily?

artf

Honestly, I've stopped using avoidInlineStyle a long time ago, but I guess it should work 😁

#3244Jan 21, 2021by nithinpillalamarri1233 answers
0 reactions

Grapes js version v0.16.34 giving unexpected script code after loading saved html

attaching code: while saving the html: <div class="gjs-row"> <div class="gjs-cell"> <div class="gjs-row"> <div class="gjs-cell"> <div id="i6x6"> <div id="bsrne9exd5" style="height:300px" tg="DataGrid" tagName="DataGrid" class="ag-theme-alpine"> </div> </div> </div> <div class="gjs-cell"> <div id="ibc4"> <div id="3drqn...

nithinpillalamarri123

kindly any one help me to get out of this issue editor.setComponents(html text ); not working the script as expected after loading from saved template html while drag and drop its working after saving and again loading that html with edito...

artf

You can't load the generated HTML code back to the editor, read the documentation on how to correctly store and load templates https://grapesjs.com/docs/modules/Storage.html

GJSBlock

Thanks for reporting this, @nithinpillalamarri123. Thanks for sharing your report about grapes js version v0.16.34 giving unexpected script code after loading saved html. To help the team investigate and prioritize this: Please provide: A...

#3242Jan 20, 2021by Nielsticot4 answers
0 reactions

When Style Manager is in another div, the message "Select an element before using Style Manager" is not showing

Version: 0.16.34 What is the expected behavior? When the editor is initialized, no element is selected, so the style manager should say "Select an element before using Style Manager" like it does when not using "appendTo" in the editor configuration. What is the current behavior? When using "appendTo" in the editor co...

mosh-tudor

I used this code to solve it:

Nielsticot

This is not what I want, my issue is before any element is selected so before the event "component:selected" is trigerred. I temporarily fixed it by selecting an element on editor load but it is not what I really want

artf

If you're using the StyleManager in a custom element you have to handle that state on your own.

Browse all topics