GrapesJS Issues

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

877 issues found

🔍 question
#3289Feb 23, 2021by bgrand-ch4 answers
2 reactions

Components have lost their styles

Version: 0.16.41 Are you able to reproduce the bug from the demo? [X] Yes [ ] No What is the expected behavior? 1) Copy selected parent component (container) to the clipboard. 2) Paste selected parent component (container) from the clipboard (into the same page or an other page). 3) All components keep ID styles and i...

artf

That because you've updated original commands with your versions (incorrectly). Indeed, if I remove your plugin from the demo everything works as expected. Please check the original copy and paste command, you should clone components befor...

artf

Just check the original commands https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js

bgrand-ch

@artf Thanks for your answer. A link or an example or more explanations please? 😅

#3288Feb 23, 2021by ilsantuzzo2 answers
0 reactions

Edit a clone without affect the cloned components

I realized that the cloned and all the clone components have mirror editing. Is there a way to avoid it?

artf

I should be able to release the fix today 😬 https://github.com/artf/grapesjs/issues/3291

GJSBlock

Thanks for reporting this, @ilsantuzzo. Great question about Edit a clone without affect the cloned components. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your...

#3287Feb 23, 2021by RaresVlaiduc4 answers
1 reactions

Wrapper styling

First of all, congrats @artf for this amazing project 💯 I am currently working on a project and I wanted to ask if I can edit the wrapper (body) like I edit other components inside it. For example I would like to edit the padding of the wrapper as I do with the background-color. I've had a look over the configs but c...

artf

Yes @kuhelbeher, now the wrapper is created post plugins, so you can entirely extend it as any other component

artf

LE: I have found a way. I am overwritting the stylable array from getWrapper() but I'm not 100% sure this is the correct way. Can you confirm this? Yeah sure it's ok, but if you need, you can change the wrapper properties on init via mainC...

kuhelbeher

you can change the wrapper properties on init via mainConfig.domComponents.wrapper optionhttps://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.js#L9 Hello, I've noticed that this op...

#3286Feb 23, 2021by abulka3 answers
0 reactions

Codemirror custom keys and addons

Is there a way of adding shortcut keys and add-ons for the built in Codemirror editor? I especially want a commenting hot key. There are various plugins that use the Grapesjs editor, incl. https://github.com/artf/grapesjs/issues/324#issuecomment-330571539 and the custom html code plugins https://github.com/Ju99ernaut/...

abulka

I finally got the Grapesjs bundled commentRange to work - it must be invoked directly cm.commentRange not via cm.execCommand. Furthermore, it takes parameters. Thus I was able to get some commenting working, as long as you select the area...

artf

Yeah, I think it's not a problem exposing it in CodeMirrorEditor.js

GJSBlock

Thanks for reporting this, @abulka. 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 GrapesJS...

#3285Feb 21, 2021by ashercoren4 answers
6 reactions

Doctype in the canvas iframe

Hi. This question has already been asked twice (here and here) but has never got an answer. Is there a way to add <!DOCTYPE html> as the beginning of the canvas iframe so that the iframe will be in standards mode. I need this since I am trying to use tinyMce as the custom RTE, and tinyMce requires standards mode.

artf

In the next release, I'll add a new event helper that will allow editing iframe content before load:

bgrand-ch

Hello, For future questions or technical issues, which aren't bugs, GitHub's Discussions tab is the place to be. Don't forget to close this issue if it is resolved or write a new detailed message in Discussions -> Q&A category (and close t...

artf

Not really, but I'm open to solutions on how to make it customizable.

#3282Feb 20, 2021by ThomasPof2 answers
0 reactions

CleanId function not working with MJML code

CleanID is still not working for MJML code, even on latest version of grapesJS (0.16.41) It's related to this closed issue : https://github.com/artf/grapesjs/issues/3276 This function is not reading MJML tags : attrs are empty, and I cannot find why...

artf

The id issue should be solved already on the latest mjml plugin release

GJSBlock

Thanks for reporting this, @ThomasPof. Great question about CleanId function not working with MJML code. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

#3280Feb 19, 2021by bgrand-ch1 answer
0 reactions

Renderless

What are you trying to add to GrapesJS? I try to styling GrapesJS and positioning its elements (panels, buttons, canvas, etc.), it's annoying to override all style elements. Describe your feature request A renderless GrapesJS.Append a specific GrapesJS element (panels, buttons, canvas, etc.) into any container in the...

GJSBlock

Thanks for reporting this, @bgrand-ch. Great suggestion about FEAT: Renderless! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: List...

#3279Feb 19, 2021by abulka2 answers
0 reactions

How to make textnode editing update component content?

I'm building a custom textarea component and want it to behave like the built in text component such that editing the textnode on the grapesjs canvas updates the textnode found in .components. And I want the component exported as HTML correctly e.g. <textarea>MY user edited TEXTNODE CONTENT</textarea>. At the moment,...

artf

Hi @abulka, as the editing is happening in the view, you should update the component model once the view is updated. So it should work with something like this

GJSBlock

Thanks for reporting this, @abulka. The issue with how to make textnode editing update component content? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM mod...

#3278Feb 18, 2021by Dmurl51 answer
0 reactions

Custom component view onRender is called early

Version: Reproduced in codepen below using 0.16.34 (returned from https://unpkg.com/grapesjs) and 0.16.22 in a Preact project Describe the bug detailed A custom GrapesJS component calls its view's "onRender" function when the component is rendered to the canvas. Per the documentation: I would expect this to be called...

GJSBlock

Thanks for reporting this, @Dmurl5. The issue with Custom component view onRender is called early appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificatio...

#3277Feb 18, 2021by FrancoFasano2 answers
1 reactions

Default PDF size: US letter How to set A4?

WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueJSFiddle Starter template https://jsfiddle.net/szLp8h4nCodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl *Version:0.16.3 You can get the version by typing grapesjs.version into the console Are you able to reproduce the bug fr...

artf

Hi Franco, you can define the frame size by changing devices

GJSBlock

Thanks for reporting this, @FrancoFasano. The issue with Default PDF size: US letter How to set A4? appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modificat...

Browse all topics