GrapesJS Issues

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

203 issues found

πŸ” enhancement
#2374Nov 4, 2019by MartinPutz3 answers
0 reactions

Component style is not updated after the drag event in Dragmode('absolute')

In the new dragmode the component's style is not updated after dragging the component. Expected behaviour:Drag element by clicking on the component(or the toolbar icon)After the components is 'dropped' the style should be updated with the new position Current behaviour:You drag the component somewhere elseThe x and y...

artf

Have a set x and y values(for example 0px and 0px) For x/y you mean left/top?

MartinPutz

Yes, left and top should change and should be updated but they remain the same.

artf

I see them changing only after reselecting the component, can you confirm?

#2373Nov 4, 2019by FedericoPalma923 answers
1 reactions

Wrong position for datapicker and element controls

[Bug]: Hello, I integrated grapes js into an asp.net core / angular project I have two problems:Randomly after adding blocks the toolbar and the highlighter are displayed in wrong positions.When I click on the datapicker it is displayed in a wrong position outside my window.

artf

To the color position issue refer to this one https://github.com/artf/grapesjs/issues/1533#issuecomment-432146597

artf

@picozzo92 Are you able to create a minimal reproducible demo of this issue? I'm working on a big canvas refactoring that will probably fix all related issues, having a reproducible demo will help to understand that

SaleDrache

I had same issue for colorpicker positioning and concluded that it's position is given related to screen / html tag (position: absolute , left: x px) , but if any parent element containing gjs-editor has position: relative , it will affect...

#2366Nov 1, 2019by benvmatheson3 answers
1 reactions

Text-shadow removes rgb values when element selected

Example: https://jsfiddle.net/benvmatheson/g1ft06qh/8/ Import a style with a text property. text-shadow:rgb(51, 166, 58) 4px 4px 4px; This works correctly, and the item is displayed correctly. However, once the item is selected, the rgb value is dropped and replaced with 0. text-shadow:0 4px 4px 4px;

benvmatheson

It looks like targetUpdated is run twice when the element is clicked. Once with the correct value rgb(89, 89, 89) 5px 6px 7px and a second time with rgb cleared 0 5px 6px 7px. This would explain why it's confused whether the first or last...

artf

Yeah, I'm already aware of this issue. Unfortunately, the Style Manager parser is quite dumb and what it does is simply splitting the value by a separator, in this case ' ' (space), and distributing splits to relative properties by their o...

benvmatheson

This seems like it could turn into a big project due to cross browser dependencies. Would it be worth bringing in a 3rd party module instead of trying to solve this inside grapes?

#2364Oct 31, 2019by mario-digital3 answers
9 reactions

How to add toolbar functionality to the layers panel.

I am trying to add the toolbar to the layers panel and I am not sure how to go about this. Is there any way to accomplish this? toolbar Where I would like to place them: Thank you for your response guys!

artf

At the moment, there is no easy way to change/customize navigator items content. What we could add next is a new callback option in configs that would be executed inside ItemView template and would allow any HTML content (similar to custom...

mario-digital

@pouyamiralayi This is what i mean

artf

Actually, it should be possible now to use the layerManager.onRender callback option

#2355Oct 25, 2019by ned-kelly3 answers
2 reactions

Rulers support in designer mode?

I know there's an older thread with Rulers support as a suggested roadmap item (but it's been closed) - Just wondering if there's any chance of seeing this in GJS in the future? - Would be an awesome addition - I'm currently in the process of writing crop/bleed marks plugins also for responsive print design (aka one d...

ronaldohoch

Hello, may it help: https://github.com/Ju99ernaut/grapesjs-rulers

artf

Just wondering if there's any chance of seeing this in GJS in the future? Sure we might see it one day but for now, it's not my priority so if someone else would like to start this as a PR it would be great

artf

Thanks @ronaldohoch, I'll close this in favor of the plugin

#2315Oct 7, 2019by tom-sherman3 answers
1 reactions

Allow returning promises from StorageManager `.load` and `.store` methods

This would offer a more modern and clean API than the current callback based approach. Proposed API: --- There are a few ways this could be implemented:Detect if the load/save method is thenable, if so await This would complicate the API and code a little as users would need to make a choice between using either the c...

tom-sherman

Thanks for your thoughts! Hopefully I'll have time to implement it this week

artf

Really cool feature request Tom, I'd totally appreciate a PR. For sure I'd go with your first approach, not breaking the current API is always a goal to reach. Just adding the ability to create async-await enabled custom storage managers w...

artf

With the new StorageManager refactor this can be closed https://github.com/artf/grapesjs/pull/4223

#2213Aug 22, 2019by benvmatheson2 answers
1 reactions

CSS property always added to the end of sector

I wanted to add min-height and max-width to the default properties. Is it possible to add these next to max-height instead of at the end of the sector? Or will I need to just manually define the entire sector in order to manage property order? Also, I was just curious why these weren't included in the defaults? Thanks...

benvmatheson

For future reference, looks like this is a default configuration if anyone needs to use it as a base: https://github.com/artf/grapesjs/blob/dev/index.html#L89

artf

Is it possible to add these next to max-height instead of at the end of the sector? Or will I need to just manually define the entire sector in order to manage property order? Unfortunately, currently, you have to define the entire sector....

#2211Aug 22, 2019by abozhinov3 answers
0 reactions

How to set style for pseudo elements (:after and :before)

Hi, I add STATE in style manager :before and :after but all the styles are applied to the component.

artf

Do you mean during the editing? Do you see it good if you deselect the component?

abozhinov

Yes during the editing. My idea was to implement the pseudo elements. When you select component to select state like hover, but to be :after or :before. The problem is that I need to set content: '' in the css rule and all the styles are a...

artf

Ok but is it correct once you deselect the component?

#2210Aug 22, 2019by HommeSauvage3 answers
0 reactions

Editing text in Safari doesn't work

When you open the demo page in Safari, you cannot edit the text.

artf

mmm seems like the draggable (introduced in https://github.com/artf/grapesjs/releases/tag/v0.15.3 with the draggableComponents option) and contendeditable are not working great together in Safari For now, I can only suggest disabling dragg...

gaglioffo

Hi, the same problem with Firefox and Edge last version. Thank's

jesusdp

mmm seems like the draggable (introduced in https://github.com/artf/grapesjs/releases/tag/v0.15.3 with the draggableComponents option) and contendeditable are not working great together in Safari For now, I can only suggest disabling dragg...

#2207Aug 20, 2019by niisar3 answers
0 reactions

Can't drag component if there is some space on top/left with Mode Absolute

Given the following code example... Results in no ability to drag and drop elements to correct position using drag icon on the panel. See Fiddle for demonstration... https://jsfiddle.net/niisar/zc51gtnv/

pouyamiralayi

this is only for the drag icon, right? the manual dragging is fine. using the drag icon, it resets the position of the element from the top as it seems.

niisar

this is only for the drag icon, right? the manual dragging is fine.using the drag icon, it resets the position of the element from the top as it seems. Yes this is only for drag icon.

artf

Yeah the problem here is the different Event object based on the context. When you trigger the drag on the component itself the Event is in the context of the iframe (because the clicked element is in iframe) but component's buttons are ou...

Browse all topics