GrapesJS Issues

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

644 issues found

🔍 components
#4576September 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...

#4503August 5, 2022by gustavohleal4 answers
0 reactions

Missing inline styles used by CKEditor when adding raw html components

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chromium v96 Reproducible demo link https://grapesjs.com/demo-newsletter-editor.html Describe the bug How to reproduce the bug?Open the developer tools at the console tabRun the code belowSelect the text addedEdit somethin...

shkhalid

+1

pety-dc

Hey I've been having similar issues. I think it's quite serious as both newsletter and mjml demo are affected. (Both use CKeditor as RTE) When I import a content that has a text (mj-text) that has styled elements (span) the imported conten...

raymondmakz

ckeditor output: <div>some rich text from <span style="color:blue">ckeditor</span></div> after parsing into editor, become like: <div data-gjs-type="text">some rich text from <span style="color:blue" data-gjs-type="default">ckeditor</span>...

#4497August 3, 2022by benryanwilliams4 answers
3 reactions

Updating to GrapesJS v19.5 from v18.4 results in Chrome becoming unresponsive

GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 104.0.5112.79Reproducible demo link https://jsfiddle.net/gvrnw2c3/4/Describe the bug How to reproduce the bug? I'm currently unable to reproduce the bug using jsfiddle, which leads me to believe it's a problem with Ch...

tyuterry

A reproduce on Fiddle (with vue) I can not reproduce without vue jsfiddle Steps to reproduce the issue:Add a text componentSelect the text component then click the 'Convert to Conditional' button at the bottomHover over the conditional tex...

artf

Thanks guys, I was actually able to reproduce it by wrapping the example inside Vue but I'm not sure exactly why is stuck in the loop here. At first look, it seems to be related to Vue's Proxy observers. By comparing the demo with the prev...

benryanwilliams

Thanks @artf, all working perfectly now upon declaring the editor outside of the Vue instance.

#4481July 27, 2022by skru2 answers
0 reactions

v0.19.5 Breaks headless editor.setComponents() (with Map/Video block)

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 102.0.5005.115 (Official Build) (64-bit) Reproducible demo link Describe the bug This is an extension of #4473 When adding a map or video block via editor.setComponents() in a headless environment you get a similar...

artf

Thanks @skru I've actually already taken care of the parseUri here so it should work in the next release

ClaudeCode

Thanks for reporting this, @skru. The issue with v0.19.5 Breaks headless editor.setComponents() (with Map/Video block) appears to be a race condition or state management timing problem. This typically happens when component lifecycle event...

#4473July 22, 2022by skru2 answers
0 reactions

v0.19.5 Breaks headless editor.setComponents(): "Uncaught (in promise) ReferenceError: window is not defined"

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 102.0.5005.115 (Official Build) (64-bit) Reproducible demo link Describe the bug How to reproduce the bug? I'm unable to reproduce this on JSFiddle, but that sort of makes sense. #4373 has introduced a bug in editor...

artf

Thanks @skru I'll take care of it

ClaudeCode

Thanks for reporting this, @skru. Great question about v0.19.5 Breaks headless editor.setComponents(): "Uncaught (in promise) ReferenceError: window is not defined". The recommended approach with Components is to use the event-driven API....

#4440July 11, 2022by skru2 answers
1 reactions

Extending text component breaks textable blocks

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 102.0.5005.115 (Official Build) (64-bit)Reproducible demo link https://jsfiddle.net/trh1sbmk/17/Describe the bug How to reproduce the bug?GoTo supplied fiddle.Drag "Extended text component" block into editor.Try to d...

artf

Thanks @skru yes, there is an internal issue I have to fix to properly handle extended text components but once it's fixed another thing to keep in mind when you extend text components, it's to use components property instead of content.

ClaudeCode

Thanks for reporting this, @skru. Great question about Extending text component breaks textable blocks. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

#4384June 15, 2022by froodian1 answer
0 reactions

index.d.ts says that components must be Backbone.Collection<Component> but the docs say Component[] is also accepted

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? AnyReproducible demo link https://grapesjs.com/docs/modules/Components.html#component-definitionDescribe the bug How to reproduce the bug?https://github.com/artf/grapesjs/blob/dev/index.d.ts#L2055 shows components as Backbon...

ClaudeCode

Thanks for reporting this, @froodian. Great question about index.d.ts says that components must be Backbone.Collection<Component> but the docs say Component[] is also accepted. The recommended approach with Components is to use the event-d...

#4371June 10, 2022by clonefunnels4 answers
3 reactions

All editors broken after last update that broke storage manager.

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://www.teamfunnels.net/login.php demo demo Describe the bug Please help me understand how to fix everything that this update broke. I don't understand why you wouldn't make it compatible...

Vac1911

@clonefunnels I made a quick function to load data with backwards compatibility:

Vac1911

@artf Quick sidenote: editor.loadProjectData should be added to the type declarations

artf

Please, read the release notes carefully https://github.com/artf/grapesjs/releases/tag/v0.19.4 https://github.com/artf/grapesjs/pull/4223#issuecomment-1152331298

#4336May 19, 2022by javadsamiee2 answers
1 reactions

"Import template" don't work for removing extra styles

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 101.0.4951.64 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Add paragraph blockOpen "Import template" and add these lines and press "Import" h1, h2, h3, h4, h5, h6{...

artf

Thanks for the report @javadsamiee but the issue is actually from the preset-webpage plugin https://github.com/artf/grapesjs/issues/3727#issuecomment-908255324 and not the core itself. The PR for the fix is welcome

ClaudeCode

Thanks for reporting this, @javadsamiee. Great question about "Import template" don't work for removing extra styles. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation fo...

#4323May 12, 2022by mohdSuhailCoditation4 answers
10 reactions

Performance issue while dragging component to canvas when you have 2k component on canvas

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Official Build) (64-bit)Reproducible demo link https://jsfiddle.net/Laze0pyg/Describe the bug How to reproduce the bug?Add 2k components using the below script.for(let i = 0;i<2000;i++) e...

GedMarc

but.... add 2000 dom elements with any basic styling to any page and you'll get lag? that might not be the tool, but how the tool is being used? also check your browser render speed in relation to your pc - http://speed-battle.com/speedtes...

artf

With the latest release, containing the refactor of the Sorter by @mohamedsalem401, the previous demo seems to be working fine now 🥳

vizardkill

https://github.com/GrapesJS/grapesjs/assets/37307788/2d653d49-1a57-458c-bc8c-4833c8c7a690 I have the same problem, and I don't think it is due to the size, I am using the pageManager and I preload an html template and trying to drag new el...