GrapesJS Issues

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

23 issues found

πŸ” inactive
#1914Mar 22, 2019by lyczos2 answers
0 reactions

Change default font size unit to EM instead of REM.

Now in GrapesJS editor, we have some of font sizes in REM. I think they should be in EM unit because if we want to embed editor in the existing page there may be some issues with proper font size - in case when the parent font size is set to other then default size (ex. :root { font-size: 10px }). https://i.imgur.com/...

artf

Yeah, I think you're right, would you like to create a PR?

lyczos

Yep, sure, I will do it later :)

#1909Mar 20, 2019by iggolob3 answers
1 reactions

SetComponents is sometimes very slow

Hi all We're working on a newsletter app and are using grapesjs as the email editor with the newsletter preset plguin and some custom changes. We store the HTMLs in our database and I noticed that some templates take a very long time to load with the editor.setComponents method. I tried to load the templates in the de...

artf

This shows you how to find issues with performances https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

artf

Hi @iggolob can you provide an example of a template and exact steps to reproduce the issue (talking about the fact is slower when you select a component)?

iggolob

Hi @artf The news letter demo page can be used to reproduce the issue ( https://grapesjs.com/demo-newsletter-editor.html ). As a template you can use the preset HTML set for the demo page. Just copy the HTML from Export template option. No...

#1599Nov 20, 2018by 00salmon3 answers
0 reactions

Drag and drop rendering improperly

Version 0.14.40Click "Continue"Select "You have successfully signed up!" header (sqh-header)Drag sqh-header block between "Give $10 and Get $10" and text belowsqh-header appears visually above the Give $10 Header, but below the Give $10 Header in the layer managerDrag sqh-header beneath "Rewards Dashboard" back inside...

artf

Seems like the issue is due to different empty "textnode"s you have in your JSON. How do you obtain that structure?

00salmon

Hey @artf, Thanks for pointing that out. The JSON came from an internal example with more components and the missing bits must've been converted to empty textnodes. I've removed the empty textnodes in the jsfiddle, but still seem to be get...

artf

Please update the live demo with cleaned JSON

#1516Oct 15, 2018by FrciSmrci3 answers
2 reactions

Ckeditor 5 [enhancement]

Hey @artf , as described in the following task I made a build of the ckeditor 5 which works with GrapesJS, however some of the functionalities don't behave as expected. The bullet points and number points are created without a problem, but the Bold, Italic and Link option aren't. Is there any possibility you could tak...

FrciSmrci

Hi @artf, thanks for the reply. The custom build is not necessary anymore, because the fix was inside the latest release. I'm using the @ckeditor/ckeditor5-editor-inline build version. I'll check out the BountySource and give it a try. :)

FrciSmrci

@Unsigno The code should be a new plugin that can be provided in the GrapesJS like grapesjs-plugin-ckeditor, just that this plugin should support ckeditor5 (grapesjs-plugin-ckeditor5). @gabrigcl developed a great part of the mentioned plug...

artf

Hi @FrciSmrci I can't say it's one of my priorities but you can actually evaluate opening a bounty on https://www.bountysource.com/teams/grapesjs and see if someone else can check it out. BTW I'd prefer an integration with the original CKE...

#1368Aug 16, 2018by shlomoko3 answers
2 reactions

Resize canvas

Is there a way to have a dynamic resizing of the canvas? i.e not using the Device Manager, but having a drag and drop of the width, similar to what you can do with panels or components? Thanks

jvillena

@artf and @shlomoko, I will explain the step little by little. Firstly, I need to use Jquery but you can use other library or integrate inside the GrapesJS engine. In my case I wanted to do it transparent to the engine. 1) I have two hidde...

artf

No @shlomoko, canvas is not resizable but I'd be glad to see a PR for that (possibly with the same logic used in panels)

jvillena

Hi @artf, I've just implemented a resizing canvas bar but I don't know if exist a way to refresh the position of the highlight borders. Take a look in the video please: http://recordit.co/jKlppYg2dD gjs-badge gjs-toolbar Best regards.

#826Feb 1, 2018by maxtacco1 answer
0 reactions

Element auto generated id not added back after custom id is used and then cleared

Hi, I think there is a bug related to the generation of element id attributes. When modifying element's style the value of the element's id attribute is auto generated and added to the HTML that once can see in the Code editor. Then the id attribute value is updated correctly when Id editor is used in the Settings to...

maxtacco

Also, if this is the case would be nice to set the default "empty" value strategy for traits in the configuration of a component. For example, emptyValue: "" or emptyValue: null or emptyValue: () => {}.

#391Oct 7, 2017by tomichal3 answers
7 reactions

Namespace CSS?

Hi there, Is there a way to setup the grapesjs editor such that the CSS generated for the HTML content is namespaced? In other words, how to avoid the style rules defined for the content created/edited in the editor to leak out to the rest of the website page? In the case of my website the user can edit a large part o...

danfitz36

do you think you could just prefix all class names generated by grapejs? if instead of .row you use .grape-row or whatever (i'd probably make the prefix a variable), you'll mostly get the effect that @tomichal is after.

artf

Actually, you can add a listener on new selectors and add a prefix there

devmohitagarwal

HI, People looking to sandbox, prefix the exported CSS can give this a try, we had the same use case and took the sass approach. To do so, I used sass.js (https://github.com/medialize/sass.js/) Steps:enclose the cssString with your custom...

#386Oct 5, 2017by RuudH3 answers
3 reactions

Extend Pannel/Command examples/documentation with opening a new view

Hi Artur, First of all grapesjs is awsome! At the moment i am trying to puzzle together how to create a pannel with a button that opens a new view, like the blocks and layermanager buttons do. I want to render my own set of items in that new view. I am looking at the code you use to open those views but that uses the...

daniel-farina

A good practice to get familiar with GrapeJS would be to attempt to duplicate the blocks manager and create your own. You can accomplish that by editing the files below. A good example would be to copy the src/blockmanagerand call it src/s...

Moikapy

Hey, was looking into doing something similar and found this here. Was wondering if there is any documentation further explaining the process of creating new views.

artf

Hi @RuudH thanks for the suggestion, I hope to publish soon something more about this argument. For now, I can only suggest you check commands used for those panels (eg. OpenBlocks)

Browse all topics