What are you trying to add to GrapesJS? Better Shadow DOM support, allowing developers to render GrapesJS inside a Shadow element without having to specifically pass in elements rather than selectors in the configuration. Describe your feature request detailed When currently using element selectors, GrapesJS simply us...
artf
Hi @AStoker I don't understand what is the real issue with your example (aside not loading GrapesJS styles inside your shadow dom). If you're attaching shadow dom, obviously, you can't do this container: '#gjs', but you're still able to pa...
AStoker
The issue is that I must pass HTML elements everywhere and cannot use selectors. This can become cumbersome to write as I must now use the shadow Dom's query selector for every panel, every element, anything that we hook into GrapesJS. Add...
AStoker
I updated the JSFiddle so you can see what we need to do to get styles within Shadow DOM. But unfortunately the CSS that's automatically added by GrapesJS exists on the body and is both polluting the global stylesheets and pointless due to...
To reduce the possible attack surface if the editor is used in "hostile" environments (e.g. in SaaS platforms) support for CSP is required. This will also prevent problems like https://github.com/artf/grapesjs/issues/3082 At the moment, the only problem that prevents effective CSP rules is the use of new Function() in...
artf
ok then, I'll try to fix it for the next release.
artf
mmm I'm not sure exactly how I'm able to fix it and what do you mean by is the use of new Function() in the GrapesJS code as there is no such a thing in the source?
aimeos
Found out that it's in the dist files due to underscore.js template() method which uses new Function(). I think this will make it hard to replace or remove that dependency to enforce a CSP without 'unsafe-eval'.
I have some templates that were generated with v0.14.5. How can I "upgrade" them to the latest version? They have classes attached and I see that the newest version doesn't add classes to the elements anymore. Context: we use bespoke components and some defaults (e.g. draggable, resizable etc., style) have been change...
artf
They have classes attached and I see that the newest version doesn't add classes to the elements anymore. I'm not sure what you're talking about, classes should be imported as before.Context: we use bespoke components and some defaults (e....
acip
Hey, thanks for the quick response. Here is the template generated by v0.14.5 https://jsonblob.com/535ae06f-d4f6-11eb-8bc1-415e99da64cb This is how it looks https://ibb.co/Zz8qg2J We've changed some custom components' default attributes an...
acip
I've setup old vs new version for an existing template: https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.14.5-old-template.html https://grapesjs-templates-upgrade.ciprianamariei.repl.co/0.16.45-old-template.html
Version: 0.17.4 / git master Describe the bug detailed FrameView repackages keyboard and mouse events here: https://github.com/artf/grapesjs/blob/07061ae1307fedf2a3b9bd585ce0cb30f653f112/src/canvas/view/FrameView.js#L389-L399 I think the reason is related to redirecting iframe events to parent frame events. This would...
GJSBlock
Thanks for reporting this, @anlumo. The issue with createCustomEvent Doesn't Handle Mouse Events Correctly appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mo...
Hi everyone! i have a problem with custom component. i was created a modal component have attribute tabindex = -1 and i can't use key Ctrl + C to copy this component. Pls helps me. thanks very much !!!
artf
Just remove that attribute in your component view (eg. in onRender method) in that way you'll still get the attribute in your final HTML
GJSBlock
Thanks for reporting this, @tannguyen97. Thanks for sharing your report about cann't copy with "control + C" when elements have attribute tabindex = -1. To help the team investigate and prioritize this: Please provide: A minimal reproducib...
Version: 0.17.4 Are you able to reproduce the bug from the demo? YES What is the expected behavior? When dragging the blocks, the order should be preserved. What is the current behavior? When dragging to the top or above the set of blocks, it goes in one order. When dragging to the bottom or below the set of blocks, i...
lexoyo
Hello I'm trying to fix this bug This is more of an exercise for me to dive in grapesjs code, let me know if I'm loosing my time or if it sounds useful
GJSBlock
Thanks for reporting this, @japo32. The issue with Dragging multiple blocks reverses the order appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications...
We want to add a custom toolbar to the image component to be shown at left side (similar to what we show for text component). Please let me know how can I do this. We want to add different custom toolbar for custom components too.
artf
Check the toolbar property in Components API reference and try to search for something related in Issues
GJSBlock
Thanks for reporting this, @ankx06. Great question about How can I add the custom left toolbar for Image component similar to text. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS doc...
Hey there π Love the editor! We're using traits to modify what classes a component has, but that feels a bit hacky as you have to redeclare ALL classnames for each trait selection Here a simple example: Each trait option has to have all the classes defined, because otherwise it will remove any existing classes. This...
krishnaeverestengineering
@deiga we are doing something like this.
artf
I'd attach the trait to some component property instead of the class attribute, and based on the value I'd use properly removeClass and addClass
GJSBlock
Thanks for reporting this, @deiga. Great question about [QUESTION] What is the idiomatic way to append and remove classes from components?. The recommended approach with Components is to use the event-driven API. Start here: Check the Grap...
I am using the plugin grapesjs-blocks-bootstrap4 and integrated grapesjs-lory-slider it works the first time I use it but when I load it from the database it loses the slider feature . Where am I doing wrong? When pulled in, it still works normally This is when I load them from the database and they turn into box this...
artf
Hi @vuongluc yeah, it might be a problem loading back html/css in that way for editing. You should store and load back JSON data, check out this guide
GJSBlock
Thanks for reporting this, @vuongluc. Great suggestion about grapesjs lory slider! 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: L...
I need to generate the JSON object model of the page designed instead of generating the HTML, CSS, and js code, is there a function that returns the JSON object of the page designed? Also, I'm implementing the UI builder in angular so the typescript version will be preferred.
artf
I'd highly recommend reading the documentation pages like Components and Storage Manager where all these parts are covered.
GJSBlock
Thanks for reporting this, @ola-893. Great question about FEAT: JSON Object model of the page generated. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your speci...