GrapesJS Issues

artf

Unfortunately this is not related to grapesjs itself but how Firefox handles editable text. I guess one option would be to switch to some custom rich text editor which doesn't rely on the native behaviour.

edenizk

Thank you for your answer 🙂

GJSBlock

Thanks for reporting this, @edenizk. Great question about <br/> is adding to single line text, after entering space for the first time in firefox. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check...

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...

allenhwkim

@ronaldohoch with Edge browser, it works with the command you provided. let projectData = editor.getProjectData(); editor.DomComponents.clear(); editor.loadProjectData(projectData); I don't think GrapesJS support Brave browser, which is no...

ronaldohoch

I also run the command editor.runCommand("core:component-outline") and it didn't shows again, i needed to click on the button twice to make it appear

ronaldohoch

Hi @allenhwkim, thanks for the comment. But embarrassing I didn't test it in other browsers. I believe my customers don't use Brave, so I'm going to drop that part. However, doing all these tests, I managed to make it work the way I want,...

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?

artf

Listeners don't see deep changes so you have to create a new array in that case

chaegumi

Thanks @artf. I use JSON.stringify and JSON.parse to deal my data.

GJSBlock

Thanks for reporting this, @chaegumi. Great question about this.on('change:attributes:type', this.handleTypeChange) do not support array type. The recommended approach with Components is to use the event-driven API. Start here: Check the G...

artf

This is expected due to some logic related to the rich text editor. You can use component.getInnerHTML() to get the inner HTML or component.components() to get inner components.

GJSBlock

Thanks for reporting this, @NicoGGG. Great question about Component content is set to empty string after inline editing. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for...

artf

Seems to be related to CssGroupRuleView here. In case of at-rules like @keyframes we have to force the re-render of the parent container.

wunksert

@artf facing this issue again with editor.CssComposer.remove(myCssRule) the editor css removes the rule but it's not flushed through to the DOM. How to you recommend I force re-render of the DOM while keeping the state of my editor intact?...

GJSBlock

Thanks for reporting this, @wunksert. Great question about Css edits aren't persisted to the DOM. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific mod...

GJSBlock

Thanks for reporting this, @chaegumi. Great question about do not use component.addAttributes({[traitName]:value}), you should use component.set(traitName, value) sometimes. The recommended approach with GrapesJS is to use the event-driven...

artf

hey @bgrand-ch I think one day all grapesjs entities will have a global uid, so in long-term, I'd expect this issue to be fixed 🤞

quentin-bettoum

At first, I wanted to generate all the pages together to have a single CSS output for all the pages. But now I'm trying another solution for the styles. So for the id problem, generating each page separately could be a solution. Thanks for...

bgrand-ch

Grapes to use some data attributes (something like data-grapes-id) as unique identifiers to leave the id free for some frontend scripts. I like this idea 💯

artf

Yeah right now this is an expected behaviour for parsed text nodes without proper wrappers and not textable components as siblings. So in order to make those nodes editable you have to properly wrap them in a tag like span.

GJSBlock

Thanks for reporting this, @sdimitrenco. The issue with Can't edit text node inside div, if div has inside tag p > span. appears to be a race condition or state management timing problem. This typically happens when component lifecycle eve...