#2377November 5, 2019by arunkumar4132 answers
Hi Team, I'm trying to use the grapes cli tool (https://github.com/artf/grapesjs-cli) to create a plugin to be used with a react project. The cli tool created blocks.js, components.js and an index.js files. The index.js file contains the below code: Which of the following should be used to define components? Is the lo...
pouyamiralayi
@arunkumar413 this issue must be posted at grapesjs-cliWhich of the following should be used to define components? you must define your components at `components.js file. loadComponents is the named import of that file. after that you must...
artf
Could you please make a few codesandboxes to helps us better understand on how to use grapesjs with react, jsx, UI tool kits such as material-UI etc,. https://github.com/artf/grapesjs/issues/2370#issuecomment-550515205
#2376November 5, 2019by arunkumar4133 answers
Hi Team, I'm trying to use the material UI components in with the grapes but the material UI components aren't rendering as expected (https://codesandbox.io/s/grapesjsapp-umxf5). I have used this template (https://github.com/prashant2018/GrapesJs-React) to test the material UI. Also could you please clarify on the use...
pouyamiralayi
@arunkumar413 for material use case please refer to gramateriaplease clarify on the use case of this tool grapesjs is a template builder that currently supports web. also it provides api's that can easily be integrated with any type of cms...
artf
Also could you please clarify on the use case of this tool. Is this tool intended for building components using the regular HTML tags as opposed to using any framework like react? Or does this complement the react, angular, vue etc? https:...
Rishabh-prescience
I was able to integrate Material UI with GrapesJS, but I am stuck at Integration of ApexCharts. Can anyone look into it? 'CodeSandBox'. Thanks in advance
#2374November 4, 2019by MartinPutz3 answers
In the new dragmode the component's style is not updated after dragging the component. Expected behaviour:Drag element by clicking on the component(or the toolbar icon)After the components is 'dropped' the style should be updated with the new position Current behaviour:You drag the component somewhere elseThe x and y...
artf
Have a set x and y values(for example 0px and 0px) For x/y you mean left/top?
MartinPutz
Yes, left and top should change and should be updated but they remain the same.
artf
I see them changing only after reselecting the component, can you confirm?
#2373November 4, 2019by FedericoPalma923 answers
[Bug]: Hello, I integrated grapes js into an asp.net core / angular project I have two problems:Randomly after adding blocks the toolbar and the highlighter are displayed in wrong positions.When I click on the datapicker it is displayed in a wrong position outside my window.
artf
To the color position issue refer to this one https://github.com/artf/grapesjs/issues/1533#issuecomment-432146597
artf
@picozzo92 Are you able to create a minimal reproducible demo of this issue? I'm working on a big canvas refactoring that will probably fix all related issues, having a reproducible demo will help to understand that
SaleDrache
I had same issue for colorpicker positioning and concluded that it's position is given related to screen / html tag (position: absolute , left: x px) , but if any parent element containing gjs-editor has position: relative , it will affect...
#2372November 4, 2019by emilsedgh3 answers
Here is a working demo of the issue Steps to reproduce:Select a componentTry dragging it from the toolbar You can see that immediately the component jumps to the left. Although it works fine if you try dragging the component by itself (and not using toolbar) This only happens if Grapesjs is loaded from a with margin a...
emilsedgh
Oh, I tried to find it before reporting but I couldn't. Thanks. I'll close this one then.
pouyamiralayi
@emilsedgh there is an open discussion about this here
alemenciones
this's fixed in the last release right? I need a solution when i drag outside of iframe in mobile devices
#2370November 4, 2019by arunkumar4132 answers
Hi Team, I just started playing with grapesjs and I'd like to use the exising/currently working react template/component in grapesjs UI editor. And also convert the template created in grapesjs to the react/jsx template/component format. Could you please let me know if this is possible with grapesjs and guide me to us...
artf
@arunkumar413 we're not yet at the point of working directly with React components but something is moving #1970
pouyamiralayi
Hi there! please read the setup guide and after that you can use `editor.addComponents(<div>Hello JSX</div>)` to add components. for framework specific JSX, you can use processor callbacks as well. cheers!
#2369November 2, 2019by timkelly08103 answers
My team and I built an application that uses grapesjs to build an email template. When pictures are introduced into the template they are automatically base64 encoded which was found to come from line 77 of: https://github.com/artf/grapesjs/blob/dev/src/asset_manager/config/config.js#L77. Since they are being base64 e...
artf
@timkelly0810 to disable encoding just turn false this option ALL YOU NEED to know about uploading assets is here: https://grapesjs.com/docs/modules/Assets.html#uploading-assets
pouyamiralayi
Adding Image Upload Feature
timkelly0810
What does grapesjs send images to a database as? We are trying to determine how grapes sends images to spring so that we can set up our database to receive the incoming images.
#2368November 2, 2019by trafalmejo2 answers
Hi, I created a custom component for a toggle button. My problem is that once I drag and drop more than one, and then I edit any of them, all instances are being updated in terms of color, size, etc. I am using the latest version of grapesjs ~~~~ editor.BlockManager.add('toggle', { label: 'Toggle', attributes: { class...
pouyamiralayi
Hi! i guess this is because your blocks posses similar classes and have selectors in common. in the latest version, `avoidInlineStyle` is true by default, so are you experiencing this on the latest version?
artf
The guess by @pouyamiralayi is right, this happens because of the same classes and you have to toggle them in the style manager to make stylable only the component style. BTW I'll try, soon I hope, to provide a more intuitive solution
#2367November 1, 2019by pouyamiralayiNo answers
Describe the bug (this is not happening in the latest version, this issue is not valid.) assume that we have a property in our component model which is an object. then try to interpolate this property in script: what you will get is a [object Object] string. Steps to reproduce the behaviorcreate a custom component typ...
#2366November 1, 2019by benvmatheson3 answers
Example: https://jsfiddle.net/benvmatheson/g1ft06qh/8/ Import a style with a text property. text-shadow:rgb(51, 166, 58) 4px 4px 4px; This works correctly, and the item is displayed correctly. However, once the item is selected, the rgb value is dropped and replaced with 0. text-shadow:0 4px 4px 4px;
benvmatheson
It looks like targetUpdated is run twice when the element is clicked. Once with the correct value rgb(89, 89, 89) 5px 6px 7px and a second time with rgb cleared 0 5px 6px 7px. This would explain why it's confused whether the first or last...
artf
Yeah, I'm already aware of this issue. Unfortunately, the Style Manager parser is quite dumb and what it does is simply splitting the value by a separator, in this case ' ' (space), and distributing splits to relative properties by their o...
benvmatheson
This seems like it could turn into a big project due to cross browser dependencies. Would it be worth bringing in a 3rd party module instead of trying to solve this inside grapes?