#3091October 24, 2020by NeekoGta3 answers
Sorry in advance for my English. I'm developing a CMS using Laravel and Vue.js. I want to use grapesjs for editing page content but with static HTML elements (like navbar, footer ...). Here is a simple image of what I would like to have. I went through the documentation to try to find answers and did several tests wit...
artf
There are different ways to achieve the same desired result, so I'd recommend checking these examples: Identify the editable component and ignore everything else https://jsfiddle.net/arturarseniev/aku70f5w/ Identify placeholder components...
NeekoGta
I found a solution by combining fromElement: true and this : https://github.com/artf/grapesjs/issues/336#issuecomment-332205060 But I have to use type: 'local' and can't use urlStore and urlLoad anymore. I have to implement myself the save...
NeekoGta
@akkivaghasiya5 2 years ago yes 😆 But trying again today, it doesn't seem to work. fromElement seems deprecated now. @artf It's possible to you to provide example how we can achieve this? Thanks!
#3089October 22, 2020by theSC0RP2 answers
When I switch to the mobile view, the elements on the screen are just squeezed. (I am using the grapesjs-blocks-basic plugin) In the screenshots below, a have a column with 2 cells. I expect it to be converted to rows in the mobile view <br/> <hr/> <br> The code for the deviceManager is:
Ju99ernaut
Try using flexGrid
theSC0RP
@Ju99ernaut Thank you so much. Using flexGrid solves the issue.
#3088October 22, 2020by dharmatv1 answer
Version: 0.15.9 Are you able to reproduce the bug from the demo? Yes What is the expected behavior? (In newsletter plugin)Click on the component in the builder part which need to show style manager properties related to that component What is the current behavior? Didn't show style manager properties after clicking on...
artf
It's not a core feature, it was implemented in the website preset in this way https://github.com/artf/grapesjs-preset-webpage/blob/3e5a9e12998c9a32b6f1199953084163678e6c17/src/panels/index.js#L108-L118
#3087October 21, 2020by tomek-artneo1 answer
I would like to add Polish language support. PR should be ready soon. Great job with the GrapesJS! 👍
artf
Thanks @tomek-artneo Would be glad to merge the PR :)
#3086October 21, 2020by dharmatv3 answers
Version: 0.15.9 What is the expected behavior? Whenever any component drag and drop into the builder part, that related style's properties I need to customize it. For instance Drag and drop the link component into the builder part, then I click on that, it shows the following style properties(Please check the link) ht...
MartinPutz
@dharmatv Hi there! This is not a bug, you can achieve it by defining the styleable properties for a component. Demo: Drag and drop the last block and you will see only (text)color can be changed. https://jsfiddle.net/MartinPutz/o376qsy1/
dharmatv
Hi @MartinPutz Thanks for your reply I understand. My requirement is needed only grapesjs components should not be custom components I didn't mention sorry for that
artf
You can use data attributes <div data-gjs-stylable="['color']"></div>
#3085October 21, 2020by theSC0RP3 answers
How to control the position of the elements in the cells in columns? On the left side, I have the map element, and on the right, I have a Text and Image. As seen in the screenshot below, the elements on the right are positioned after the map. A similar problem is there in this codepen (Grapesjs Custom UI by @artf ) to...
Ju99ernaut
You can add this to pluginOpts inside grapesjs.init: This will probably also fix your previous alignment issues and is much better for responsive design
MartinPutz
@theSC0RP This is not really a problem with GrapesJS itself. The cell in GrapesJS has property, so it tries to simulate a table layout, as far as I'm aware. So if you want to change the positioning, then find a way to vertically change pos...
theSC0RP
@MartinPutz Thank you for the answer. How would I create and apply a custom style property on the cell? I am using the grapesjs-blocks-basic plugin so the cell has a class name of 'gjs-cell'. I tried to add the suggested property on this c...
#3083October 20, 2020by Joshmamroud3 answers
Hi @artf , How would you recommend highlighting the components on the canvas that the selected block can be dropped into based on draggable & droppable rules? In other words, when a user starts dragging a block from the block manager I would like to highlight (add a border or inset box-shadow) the components on the ca...
artf
With the introduction of Canvas Spots I think this feature request can be considered done. Here is a quick demo example https://github.com/GrapesJS/grapesjs/assets/11614725/ea956282-b6bd-455e-af9b-6b5fb7707d71
artf
I think, currently, it's not easy to achieve it. The Sorter module is quite old and messy and I'd need to refactor it in order to allow such functionality (which, for sure, I'd be glad to have). Unfortunately, no ETA for such a thing :/
kerryj89
Was just thinking of this. I think it's the natural evolution and necessary when you can set limitations of where something is droppable.
#3082October 20, 2020by rukavina3 answers
Version: 0.16.22 Are you able to reproduce the bug from the demo? [ x] Yes Steps:Click Import HTMLInsert <img src="anyimagesource.gif" onload="alert(1)"/>The JS will be executed Having proper "sandbox" attribute on iframe could probably mitigate the problem.
artf
Well if you use GrapesJS and allow the possibility to insert custom HTML, yes, Self-XSS is possible. Unfortunately, there are few issues that do not allow me to fix this properlyI need to access the iframe's DOM in order to add/update inne...
rukavina
You are right, we thought sandbox="allow-same-origin" will do the job, but allow-scripts is also needed, and then it's like not using sandbox at all. But, what could be helpful anyway is to provide a way for grapejs users to somehow contro...
blinkybill
if you use content security policy http header you can get around a lot of XSS issues like this. but there is one issue with GrapesJS atm which is that it uses underscore.js, which includes a function with use of "eval" so you can't make t...
#3081October 19, 2020by maryia-kabash3 answers
Version: 0.16.22 What is the expected behavior? setTarget allows styling a CSS rule different from the selected component Describe the bug Upon calling setTarget method Style Manager still has a selected component as styling target What is the current behavior? setTarget doesn't update this.propTarget.model (updates t...
artf
Thanks @maryia-kabash found the issue, will be fixed in the next release!
maryia-kabash
Hello @artf ! I have a question regarding this fix - setTarget now updates classes in Class section correctly, but Style Manager doesn't reflect the actual styles. Please see - https://prnt.sc/vfzuvv Maybe these is an event that can be tri...
artf
Thanks for the report and the suggestion Maryia. The fix will be available in the next release (I hope to publish it tomorrow)
#3079October 19, 2020by gstucki2 answers
Hi, I try to add custom class using the button on the panel control but it is not working. Check the quick video to see what I'm talking about : https://www.loom.com/share/c50fdc3741094c0f9fea65b05eb78d3a Thx.
artf
Sorry, but for such a case I can't do much without a reproducible demo, the official demo with the latest version works fine, so I guess it might be something wrong only on your side.
no-response[bot]
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take ac...