GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v111 Reproducible demo link https://codesandbox.io/s/grapesjs-react-components-forked-h3j496?file=/src/index.js Describe the bug How to reproduce the bug?Start a project with grapesjs using ReactjsUse loadProjectDat...
julia-alberici
For the record, this wasn't really a bug, and i could achieve the expected behavior replacing editor.onReady(() => { editor.runCommand("preview"); }); with editor.on('update', () => { editor.runCommand('preview'); });
GJS Helper
The issue you're encountering where GrapesJS components retain edit mode behaviors (like hover/select styles) despite running the preview command after loadProjectData() is a timing problem related to asynchronous operations. Root Cause Wh...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? only Firefox (all versions)Reproducible demo link https://jsfiddle.net/03m6jz5f/Describe the bug How to reproduce the bug?clear browser cachetry import template with style tag which has @import font url What is the expected...
artf
Not really fixable as GrapesJS parsers can't be asynchronous right now but in any case, from the performance perspective, you should never use @import in your CSS as it generates a blocking request
GJSBlock
Thanks for reporting this, @Drive4ik. Great question about style parsing error if it has @import. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific mod...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 111 Reproducible demo link https://jsfiddle.net/zfkuq7sh/ Describe the bug Some texts are translated and some not. Some are translated only after I click some tool button, then its translated. For example Top bar bu...
artf
@applibs I can't help if you don't provide a valid reproducible demo, please include all the missing dependencies.
GJSBlock
Thanks for reporting this, @applibs. The issue with Localization works weird appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Safari Reproducible demo link https://codesandbox.io/s/funny-williamson-thb52d?file=/index.js Describe the bug How to reproduce the bug?Go to https://codesandbox.io/s/funny-williamson-thb52d?file=/index.js What is the expe...
GJSBlock
Thanks for reporting this, @RohitLad. Great question about PropertyComposite with slider for four sides (L,R,T,B). Change in one slider causes other values to reset.. The recommended approach with StyleManager is to use the event-driven AP...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Firefox Reproducible demo link https://jsfiddle.net/jLgb0mv3/1/ Describe the bug How to reproduce the bug?...Put this code in the editor: editor.on('styleable:change', (model, property) => { const value = model.getStyle()[...
artf
I only see the issue with composite/stack style manager properties and that is because not every style manager property is part of the styles so in your code you would only need to check if the value of the style actually exists, eg. if (v...
GJSBlock
Thanks for reporting this, @clonefunnels. Great question about Using !important code provided here breaks background image and gradient.. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the Grap...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latestReproducible demo link https://jsfiddle.net/snj87o6f/1/Describe the bug Context/Description I think this is a bug because I need to save and load the data back with editor.Parser.parseHtml on onStore of storageM...
artf
The output is correct (check the real console not the broken one from jsfiddle) and read carefully this section, you should never rely on HTML/CSS to load back the project.
GJSBlock
Thanks for reporting this, @handhikadj. Great suggestion about getHtml() producing invalid structure when there is js inside it! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Usi...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome LatestReproducible demo link https://codesandbox.io/s/silent-river-ifczcvDescribe the bug How to reproduce the bug?Visit the siteSee console. Pay attention to the * and body selector Expected result Should not be dupl...
artf
There are default styles applied that you can simply disable (pass an empty string) https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147
GJSBlock
Thanks for reporting this, @handhikadj. Great question about setStyle/getCss() produces duplicated css. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specif...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Edge 109.0.1518.70 Reproducible demo link https://jsfiddle.net/rudacs/kr2x1mnh/ Describe the bug How to reproduce the bug?Change some property in StyleManager.Change the width property on the StyleManager. What is the expe...
artf
Hey @rudacs did you try instead using style:property:update?
rudacs
This event worked. Was it changed to this one? And for a single property? How do I get what was the component and property changed? Tranks.
SagarMaria
came here because I have the same issue. Using the suggested style:property:update seems to work, but for some reason it fires on every click. Also, how can we target a particular style property change, i.e. text-align?
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v108Reproducible demo link https://grapesjs.com/demo.htmlDescribe the bug How to reproduce the bug?Setup grapesjs editorImport following template https://pastebin.com/d9S2M0iSAt the very bottom of the template you wil...
artf
You just need to enable this option: https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors
GJSBlock
Thanks for reporting this, @zoilorys. Great question about Editing CSS property sets a style to a common class instead of element. 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? Firefox 109 Reproducible demo link none Describe the bug How to reproduce the bug? What is the expected behavior? The development server starts. What is the current behavior? I'm using node v16.18.1 (MacOS) although had th...
mnutt
Yes, I'm able to reproduce it on grapesjs-style-filter too, same types of errors.
mnutt
I was able to circumvent this error by changing the build pipeline to output more modern javascript (via --targets="> 3%"), though that produces backbone errors due to the use of es6 classes.
artf
I'm not able to reproduce on my side with a fresh install, are you using the dev branch?