GrapesJS Issues

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

336 issues found

πŸ” style-manager
#3377Apr 1, 2021by assadnazar3 answers
1 reactions

StyleManager options repeating 2 times

Version: 0.16.45 If i add grapejs-preset-js, then stylemanager repeats each option 2 times. Here is the jsfiddle link where you can check the same behaviour. https://jsfiddle.net/assadnazar/2asojqrc/1/ Maybe it's not merging the options

Ju99ernaut

Use:

assadnazar

bump!

GJSBlock

Thanks for reporting this, @assadnazar. Thanks for sharing your report about StyleManager options repeating 2 times. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddle) Yo...

#3362Mar 23, 2021by qweiop8013 answers
0 reactions

Double click problem

grapesjs - 0.16.105 When I click in one element(form - this element have disable cloning), next second element(column). First element clone in to second element and lost all styles. Can You help me? https://user-images.githubusercontent.com/44744754/112153667-cb534080-8be3-11eb-90ef-dbccc866fde2.mp4

artf

Hi, at first, you need to update your grapesjs version, it's too much old, and I can't help you without a reproducible demo of the issue

qweiop801

I update grapesjs to 0.16.45 and problem still exist

GJSBlock

Thanks for reporting this, @qweiop801. Great question about double click problem. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Look for the...

#3359Mar 23, 2021by qweiop8012 answers
0 reactions

Double click copy bug.

When I click in one element, next second element first element clone to second element and lost all styles. Can You help me?

artf

Hi @qweiop801 please follow the issue template by following all the steps

GJSBlock

Thanks for reporting this, @qweiop801. The issue with double click copy bug. appears to be a race condition or state management timing problem. This typically happens when component lifecycle events and DOM modifications overlap, creating...

#3354Mar 22, 2021by ThetripGr2 answers
1 reactions

Having two instances of grape present makes the asset manager of the first "stop" working

Version: 0.16.44 What is the expected behavior? I expect to have 2 separate instances of grape in one single page and being able to utilize the asset manager properly Describe the bug detailed I have initialized 2 instances of grape in a page with the config below what happens is that in the second instance of the edi...

ThetripGr

OK so after a little bit more investigating, the real issue was due to how I was initiating the editors so my bad. I wasn't making sure the instances were truly separate and I was overwritting the first instance even though it appeared as...

GJSBlock

Thanks for reporting this, @ThetripGr. The issue with having two instances of grape present makes the asset manager of the first "stop" working appears to be a race condition or state management timing problem. This typically happens when...

#3353Mar 19, 2021by jcsofts2 answers
0 reactions

The colorpicker scroll off the input box

thanks for your work, this is a good project, this may be is not a bug I trying to make the colorpicker in style manager scroll with the input box. for example: the (color,background) input boxopen the colorpickerscroll the style manager the input box moved, but the colorpicker stay at the old position I try this on t...

artf

The color picker is placed absolutely. Unless you'll find a way to update it on the scroll of the style manager, I don't see alternatives.

GJSBlock

Thanks for reporting this, @jcsofts. Great question about The colorpicker scroll off the input box. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific m...

#3347Mar 18, 2021by xinnai4 answers
0 reactions

How can I get Uncompressed JS code for me to edit?

Hi, thank you for reviewing my problem. I want to use my own JSEditor to edit html、css and js. 1、First, I use getHtml, getCss, getJs to display the code in my JSEditor. And I found that the JS code is compressed. How can I get an Uncompressed code? I use editor.CodeManager.getCode(model, 'js') and it's also a compress...

artf

The script used by components with JS relies on the same code from your source. For example, if you create a plugin and then build it with webpack/babel, then the component will print the result from build. I guess you could create separat...

xinnai

@artf Hi, I'm not sure if you understand my question. I want to edit the js code in my own js editor, first I set the js code from your editor using getJs(), but it looks like this in your demo.html: These code are all compressed. I want a...

artf

autoBeautify is an option passed to CodeMirror but in any case, it might beautify the code but it won't uncompress it as the code itself is stored like that in the component

#3346Mar 18, 2021by xinnai4 answers
0 reactions

Can I develop my own stylemanager and bind the properties conveniently?

I want to build my own stylemanager useing some UI framework like Element-UI to make a beauty UI quickly. But how can I bind the properties to a selected component? I didn't see any API like setProperties to an element... . Can you help how to do that, thank you very much!!!

RutujaBadbe

#2296 This might help you!

artf

I guess something like this should work, if you need to create the Style Manager from scratch

xinnai

@artf That is totally what I need! Thank you very much!

#3345Mar 17, 2021by joshk1324 answers
0 reactions

Panels and Buttons section of getting started not working with Vue.js

I am working to get grapejs to work with Vue.js and am having no luck, I am following the getting started however I am unable to get it to work properly. So far I have added it to the mounted() section and have gotten some buttons with blocks to show up and add in however I have had no luck getting the Panels and Butt...

uchoaaa

Take a look at this issue, maybe helps: https://github.com/artf/grapesjs/issues/275

artf

Hi @joshk132 honestly the code looks good, are you able to create a reproducible demo (on something like Codesandbox)?

joshk132

@artf I've gotten it working where the panels show up however it now doesn't display right. The solution I had to do was change to use the below code. Pretty much I had to have "editor" as a variable which I had removed in my initial code...

#3335Mar 11, 2021by zachsnoek3 answers
0 reactions

Creating trait with Style Manager property UI

I have a component using the background-url Style Manager property: I would like to reuse this UI that is shown in the Style Manager for a background URL trait that shows up under "Settings": Is it possible to make a Style Manager property behave like a trait and show up in the "Settings" section, or would I have to c...

artf

Unfortunately, it's not yet possible, but there is a plan to add soon a new UI module that should allow the reuse of UI elements

zachsnoek

:+1: Thank you!

GJSBlock

Thanks for reporting this, @zachsnoek. Great question about Creating trait with Style Manager property UI. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your spe...

#3331Mar 10, 2021by Abhisheknanda13444634 answers
2 reactions

Custom Asset Manager

Hi @artf I followed the documentation to make new type of asset manager here ( https://codepen.io/abhi_punk81/pen/MWbWzaq) I've created new type like the same one in the docs How can i open that asset manager after dropping my custom block of icon -: At first it'll work fine but when i drop the image block after that...

Abhisheknanda1344463

@artf Achieved it and handle case-insensitive also https://user-images.githubusercontent.com/20657737/112457190-82d18980-8d81-11eb-895b-b5c42e849f3a.mov Thank you!! ❀️

Abhisheknanda1344463

Hi @artf somehow I've managed to do it On component active I called this -: It'll open my asset manager and I've added assets for this custom manager as well as you can see in the screenshot <img width="1105" alt="Screenshot 2021-03-20 at...

artf

Should be similar to what you've already done here editor.AssetManager.render(editor.AssetManager.getAll().filter(asset => asset.get('type') == 'svg-icon')); So find assets by search and update it with render

Browse all topics