GrapesJS Issues

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

877 issues found

πŸ” question
#4577Sep 12, 2022by joukhar2 answers
0 reactions

Prevent event using custom plugin

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latestReproducible demo link there is not demoDescribe the bug I want to prevent event but i can't i tried this and how to prevent store event please help Code of Conduct[X] I agree to follow this project's Code of Co...

artf

You can use Discussions if you have questions, Issues are only for reproducible bugs

GJSBlock

Thanks for reporting this, @joukhar. Great question about prevent event using custom plugin. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look...

#4576Sep 12, 2022by benryanwilliams4 answers
1 reactions

Clicking 'wrap for style' button affects the inner components of other components inside the same text box

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.101 Reproducible demo link https://jsfiddle.net/7cLr0xt2/3/Describe the bug How to reproduce the bug? For some reason I'm unable to reproduce the bug inside the fiddle linked above, since line 34 selectedCo...

artf

RTE relies on the DOM content during the editing so if you remove it deliberately with something like inner components will be removed once the editing is finished.

benryanwilliams

Ok thanks @artf, that makes sense. However, those lines of code, along with are required to render the correct selected state inside the canvas as follows (both upon the component initially being rendered and when the user selects a differ...

benryanwilliams

I need to do some more testing but it looks like I've got around this behaviour by saving the inner components inside the component itself when first creating it / editing it, then using the rte:disable hook as follows: It seems a bit hack...

#4575Sep 10, 2022by Aventrue3 answers
1 reactions

Custom is missing in the AssetManagerConfig

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link this is a compile error Describe the bug The property custom is missing in the AssetManagerConfig. It works if I use the untyped grapesjs but I want use it with types. Is there a workaround fo...

Singwai

Feel free to update the type definition, here is an example commit. https://github.com/artf/grapesjs/commit/49deeeeab74aff3e46f22d0bb06e7f7608955afd

Aventrue

My workaround: let assetConfig: grapesjs.AssetManagerConfig = {}; assetConfig["custom"] = { open: (props) => { this.openGalleryDialog(props); }, close: (props) => { this.dialog.closeAll(); }, };

GJSBlock

Thanks for reporting this, @Aventrue. The issue with Custom is missing in the AssetManagerConfig appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modification...

#4573Sep 9, 2022by ahmafi3 answers
1 reactions

ParseStyle is not a function

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Firefox 104.0.1Reproducible demo link https://codesandbox.io/s/grapesjs-parsestyle-bug-13h771Describe the bug How to reproduce the bug?Create a custom component with style property in it's model.Use this.addAttributes in the...

Singwai

This is behaving as expected. There are two similar keys that can alter the style of the component. (styles and style) styles takes a CSS string and is attached to the final payload once. I usually define the default CSS or default CSS wit...

artf

I guess parseStyle is not a function refers to this one already fixed: https://github.com/artf/grapesjs/pull/4520

GJSBlock

Thanks for reporting this, @ahmafi. Great question about parseStyle is not a function. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look fo...

#4572Sep 9, 2022by stljeff14 answers
0 reactions

Page update event doesn't fire

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome Reproducible demo link https://jsfiddle.net/1hza4t9n/ Describe the bug How to reproduce the bug?init grapescreate event handler for when a page is updated.Update the pageobserve the event handler not firing What is...

artf

Update the page How do you update the page? Worth nothing, page:* events are only triggered for page models, not the content of the page, eg.

stljeff1

any update, dragging a block, changing text color. changing text content. In the JS Fiddle, I drag a Text block, change content, and change color. I do not see an event triggering when i make these updates, so I am questioning my expectati...

artf

Ok so page:update event is not what you need as it doesn't trigger on content change (so I'm closing the issue as the event is working as expected). Can you explain what kind of custom Storage manager you're trying to build? The Storage ma...

#4570Sep 8, 2022by rahul-singh-bv2 answers
1 reactions

TypeError: m.render is not a function

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 105.0.5195.102 (Official Build) (x86_64) Reproducible demo link Describe the bug How to reproduce the bug?Create a new custom code block and add an iframe tag such as `<iframe src="http://localhost:8888/embe...

artf

Thanks for the report @rahul-singh-bv The bug was actually already reported and fixed https://github.com/artf/grapesjs/issues/4480 but unfortunately the fix is not yet released 😞

GJSBlock

Thanks for reporting this, @rahul-singh-bv. Security and dependency issues are important. The GrapesJS team actively works on keeping dependencies up-to-date. For you right now: Run npm audit fix to see available patches Check for a newer...

#4546Sep 2, 2022by FaisalShaikhHA4 answers
2 reactions

Component disappears when we select all the inner text and use backspace. Link component disappears even when we try to update the text.

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 104.0.5112.101 (Official Build) (arm64)Reproducible demo link https://codepen.io/faisal-praella/pen/rNvOwgRDescribe the bug How to reproduce the bug?Select a component, double click, and ctrl+a to select the text and...

artf

This happening due to these styles. Remove them and it will work properly.

artf

@FaisalShaikhHA are you able to provide a reproducible demo as I'm not able to reproduce it from the official demo?

FaisalShaikhHA

@artf here is the demo: https://codepen.io/faisal-praella/pen/rNvOwgR Select a component, double click, and ctrl+a to select the text and click backspace. Notice component disappears, and is not selectable or editable. Link component disap...

#4544Sep 1, 2022by akhalid-dev1 answer
0 reactions

Layer Manager can have names removed and unable to select again

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v91 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Open the layer manager.Select any item under "Body". Double-click to select the name and be able to "Edit" it.Press...

GJSBlock

Thanks for reporting this, @akhalid-dev. Great question about Layer Manager can have names removed and unable to select again. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentat...

#4537Aug 29, 2022by salemkode2 answers
0 reactions

RangeError Maximum call stack size exceeded

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave 1.33.105 Chromium: 96.0.4664.93 Reproducible demo link https://codesandbox.io/s/relaxed-mccarthy-v2e37w Describe the bug How to reproduce the bug?Add type of component have img or svg tagAdd this component to canvas...

artf

Hi @salemkode based on how custom components are handled by having that isComponent, which returns true with no conditions, generates the maximum call stack issue. It keeps creating new components as you have also the components property b...

GJSBlock

Thanks for reporting this, @salemkode. Great question about RangeError Maximum call stack size exceeded. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific mo...

#4529Aug 24, 2022by FaisalShaikhHA4 answers
6 reactions

When we resize an image with a class 'xyz', all the elements on the page with same class also gets resized because editor adds css to those classes.

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 104.0.5112.101 (Official Build) (arm64)Video demo link https://d.pr/i/27EgH2Describe the bugWhen we resize an image with a class 'xyz', all the elements on the page with the same class also get resized because the ed...

DevMetwaly

https://grapesjs.com/docs/modules/Components.html#components-cssComponent-first styling By default, when you select a component in the canvas and apply styles on it, changes will be applied on its existent classes. This will result on chan...

FaisalShaikhHA

Thanks, @DevMetwaly it worked, my bad I missed this.

FaisalShaikhHA

Hi @artf, first of all, amazing framework, and thanks for making it open source. As described in the above comment I am facing this weird issue, please let me know if I am doing something wrong or a way to fix this thanks.

Browse all topics