Hi, please what is the best way to implement multiple page manager in a react app. I have successfully implemented this without page manager like so: For the page manager implementation I try this: Here, I get undefined for page manager. I would appreciate any help please. Thanks
artf
I think you're just using an old version of GrapesJS
GJSBlock
Thanks for reporting this, @Ubanna. Great question about undefined for multiple page manager in React. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specifi...
0.17.19 Are you able to reproduce the bug from the demo? YES What is the expected behavior? I had asked a question regarding iframe refresh (#3413). The proposed solution was working for that version (0.17.3) and after running the piece of code the iframe should refresh and the canvas should be seen with the component...
artf
I would need to check why he is still trying to remove the frame, but for now, just skip this line frameView.remove()
theSC0RP
@artf. Thanks. This works when done once. If I do some action like a click inside the canvas and then if I run frameWrapView.render(); once again, I got another error. The screenshot and a video of this error are attached below. <hr> https...
artf
I'll try to fix it in the next release, but for now, you have to unselect components before frameWrapView.render() and reselect them back post rendering
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...
I am new to grapes js , I am trying to make the blocks in a different style when dragging for example the image blocks 1 - when not dragged or hover takes style A . 2- when hover takes style B . 3- When dragged takes style C (when it is over the canvas). can any one help me with this issue . Thanks
ronaldohoch
Maybe with this events you can do it: https://grapesjs.com/docs/api/editor.html#blocks or https://grapesjs.com/docs/api/editor.html#canvas
artf
In such a case, probably a completely custom block manager UI is the only way (eg. rendered by your own BlockManager component in Angular). It should be possible already, but I'd prefer to take my time and update the Blocks documentation w...
hadeel94
In such a case, probably a completely custom block manager UI is the only way (eg. rendered by your own BlockManager component in Angular). It should be possible already, but I'd prefer to take my time and update the Blocks documentation w...
Hello @artf, I want to get the HTML Element of selected page. But it returns undefined when using following code:
artf
Hi @iabhiyaan, when page:select triggers, iframes inside the canvas are not yet loaded, so you just need to wait once they are loaded before accessing its DOM.
iabhiyaan
Thankyou @artf.
GJSBlock
Thanks for reporting this, @iabhiyaan. Thanks for sharing your report about page.getMainComponent().view gives undefined when page is selected. To help the team investigate and prioritize this: Please provide: A minimal reproducible exampl...
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
npm run build gives error @version 0.17.3../../lib/codemirror in ./src/editor/dist/grapes.min.js../css/css in ./src/editor/dist/grapes.min.js../javascript/javascript in ./src/editor/dist/grapes.min.js../xml/xml in ./src/editor/dist/grapes.min.js
artf
Give us more details about your build and the error
iabhiyaan
iabhiyaan
npm run build:css works fine. But npm run build gives those errors
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...
Hello, Fairly new to this great project but I am trying to change the display of a component onClick of another component after the component id is selected from the dropMenu. I'm having trouble trying to add an onClick attribute to the component after selection from a dropMenu trait. I can't seem to access the value...
GJSBlock
Thanks for reporting this, @tmrowe123. Thanks for sharing your report about Trying to add onClick attribute to component. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddl...
Is it possible to post the full demo code from the getting started? There are many small snippets that depend on each other. It would be good to have these in a repo as separate branches so developers can see the expected final result. In many cases there were some simple things skipped or location of the snippet in t...
anlumo
Yes, the problem is that the demo defines its own plugin that then imports all other plugins. This makes trying to find out how to do stuff really hard, because you have to follow a lot of redirects across different repositories. It's also...
artf
The final code of the getting started tutorial is actually here (and its grapesjs config).Yes, the problem is that the demo defines its own plugin that then imports all other plugins @anlumo Yeah actually current presets plugins were struc...
erpardeepjain
@artf but How to run that file or config file as main file is in vue and base project is in React, can you point out how to make it run as shown in demo?