GrapesJS Issues

3,464 parsed GitHub issues β€” 370 solved Β· 90 open. Search, filter and explore battle-tested answers.

85 issues found

πŸ” help wanted
#2972Aug 25, 2020by kuhelbeher3 answers
0 reactions

Disable scripts on canvas

Hello, first of all thanks for a great tool. On my project i hit the problem where I need to disable scripts inside the editor. I found 2 similar issues with this problem - https://github.com/artf/grapesjs/issues/2046 https://github.com/artf/grapesjs/issues/2814. So the problem is quite common and maybe it's better to...

RJCAM

Hi @kuhelbeher I'm still trying to achieve that too, but here's a tip that can help us to achieve it. I'll post here if I figure out a way. See this issue #2772

kuhelbeher

@RJCAM thanks for tip, I tried that, but problem with this approach is that it disables script for component, not the whole template.

artf

Once the editor and its components are loaded it's hard to think about disabling JS, think about a component with custom scripts that binds events all around the DOM (maybe even using some external plugin). The only way it could be possibl...

#2913Jul 23, 2020by neon123452 answers
1 reactions

Src is stored twice with image

The output of "JSON.stringify(editor.getComponents())" shows that the src of an image is stored twice. { "type": "image", "void": true, "status": "selected", "content": "", "attributes": { "id": "iy3c7", "src": "data:image/png;base64,..." <--- 1. }, "src": "data:image/png;base64,...", <--- 2. "activeOnRender": 0, "ope...

artf

@longdoan7421 I think we can delete it in toJSON method when the src is equal to attribute.src and ensure is loaded back correctly on load

longdoan7421

Hi @artf, I just took a quick look through ComponentImage. I think it is possible to drop the src property in image model and replace the code which use src in ComponentImage and ComponentImageView with the attribute.src. But I am not sure...

#2878Jul 6, 2020by fedulovivan3 answers
0 reactions

Its not possible to make part of H1 non-bold

Steps:open newsletter demo at https://grapesjs.com/demo-newsletter-editor.htmlclean the canvasdrop "Text Section"select any word within H1, e.g. word "title"press Bold modifier once or twice Expected:Selected text became non-bold Actual:Text remains bold Those steps above are for CKE editor, which is now enabled on ne...

robsonsobral

This looks like a flaw of logic to me. <Hn> elements aren't bold, but titles. As you mentioned, even the browser native execCommand, used on built-in editor, doesn't know what to do. @fedulovivan, do you have a suggestion of a possible HTM...

fedulovivan

Hi, @robsonsobral An html, generated by built-in RTE is correct: Original: <h1>Insert title here</h1> After making word "title" non-bold: <h1>Insert <span style="font-weight: normal">title</span> here</h1> The problem is it's not rendered...

robsonsobral

I dig a little into this. After the blur event, the markup changes from <span style="font-weight: normal">title</span> to <span data-gjs-type="default"><span data-gjs-type="text">title </span></span>. If I try again, it becomes <span data-...

#2849Jun 21, 2020by meyerco3 answers
1 reactions

Using image url for background-image is not working properly

DescriptionOn our project for images assets we use url instead of base64 code .Expected behavior When setting a background-image to a control , it has to update the css of this control .The css have to be reflected on the canvas and the style panel .What happens instead ? If the image have spaces or parentheses on its...

meyerco

Hi @artf , #2975 Here is a PR to fix the issue . Please update me if its good enough . Thanks

artf

Thanks for the report, I'd appreciate a PR for this issue

meyerco

Can you direct me to a file , where background-image is set ?

#2828Jun 12, 2020by kuhelbeher3 answers
0 reactions

Problem with link and CKEditor

There is a problem with link and CKEditor. I enabled editable property for <a> tags: And when I doubleclick on the link it is editable, all works as it should. But when I finish editing and trying to edit it again I cannot do it. Can you help with this?

artf

Please create a reproducible demo

kuhelbeher

@artf Here it is: https://codesandbox.io/s/link-ckeditor-8md7v?file=/src/index.js

artf

I see how the contenteditable remains false which is the reason of the bug but I'm not sure what is the cause. It might also be the CKEditor which prevents the propagation for some reason. If someone is willing to help I'd really appreciat...

#2824Jun 11, 2020by tonypartridge3 answers
0 reactions

Dragging items do not position on intital drag?

So when I drag a component/item from the bar to the center it will not go where I told it to go... IT always goes about 20% page width to one side? Once added it's adjustable. See this gif: https://gyazo.com/87076de55a1853e80b5dd7ea14ccb94e Does anyone have any suggestions?

RJCAM

Hi @tonypartridge Do you have the last GrapesJS version? This is working fine for me with the dragMode: "absolute", Check this basic code below:

artf

yeah... I can actually reproduce the same issue when a smaller device view is enabled, probably some kind of regression. I need time to investigate but at the moment I'm kind of busy with other stuff and dragMode is not my priority right n...

soltanloo

I have the same issue when I'm using the absolute drag mode. Blocks always fall out of the canvas and I need to scroll to grab them and place them back into the original desired position. @tonypartridge Did you figure out any way to fix th...

#2774May 14, 2020by vinceumo1 answer
0 reactions

MediaCondition: "min-width" breakpoints not applying the correct style in canvas

Hi, I'm having some issue with mobile first approach. The canvas render the wrong style when setting different styles at multiple breakpoints. But the code generated is good, this issue only happen in the canvas. https://codesandbox.io/s/xenodochial-shockley-s02lp?file=/index.js:496-524Are you using the latest release...

artf

We should apply the same logic from https://github.com/artf/grapesjs/blob/201e1f9a61783080f7be885e9e0be9a40ecc16cc/src/codemanager/model/CssGenerator.js#L151-L162 here https://github.com/artf/grapesjs/blob/201e1f9a61783080f7be885e9e0be9a40...

#2771May 13, 2020by antman33513 answers
12 reactions

Component with textable:1 not working since version 0.16.12

Hello, I've just updated to the lasted version 0.16.12 and have a bug when trying to move a component that has the property textable:1 into a text component. It works on the previous version 0.16.3. When i move the component I get an error in the console Uncaught TypeError: Cannot read property 'attributes' of undefin...

artf

I'm leaving here a working example of a textable component https://jsfiddle.net/artur_arseniev/0b9ox72g/

0099FF

Looks to have been introduced in 9c24108dadf2ded39e8805b6c4a5f00c626c468b. As pointed out by @antman3351 the model.getView().render(); call is the trouble maker. A little further down the call stack we attempt to update the view's attribut...

bogdanbs

My 2 ct to this. The problem lies on mixing asynchronous and synchronous code. The enabling of the rte: enable(view, rte) as well as the ComponentTextView.onActive and ComponentTextView.disableEditing are now, since the fix for issue #3475...

#2769May 12, 2020by cartifon1 answer
0 reactions

Event Handler from KeyMap should trigger the core events?

Hey @artf, question, should the core commands be triggered when the keyMap is activated? The situation: I added this listeners: When I delete a component using the delete icon it calls my listener, but when I press the delete key, it does not trigger the listener... Am I doing anything wrong here? You can check it her...

artf

Yeah, you're right, the command handler is executed directly here https://github.com/artf/grapesjs/blob/fbfa812eaaeeb467337107896ee6decfbfbc028e/src/keymaps/index.js#L154 it should pass through Commands.run(id, opts) https://github.com/art...

#2748Apr 30, 2020by jsychova3 answers
1 reactions

Slider doesn't work with a non-integer step value

Default StyleManager property "slider" doesn't work with a non-integer step value. GrapesJS version: 0.16.1 In many cases, it’s convenient to use a slider with a non-integer step value: seems that Grapesjs supports only integer and rounds non-integer values. Steps to reproduce: Add a property with type 'slider'

adamwpe

Ah, you mean the arrows - sorry, thought you meant in general that the slider doesn't work. Never noticed that - always use the slider order the mouse dragging over the arrows. I'll have a look at the view - not too sure where to start hah...

adamwpe

Oddly enough - this works for me (I know I'm creating the sector at the same time): Can you make a demo?

jsychova

Yes of course. I've created a sample with your snippet, but seems that it doesn't want to work with me. https://codepen.io/sjul66/pen/VwvMwNY Thanks!

Browse all topics