GrapesJS Issues

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

466 issues found

πŸ” components
#3206Dec 23, 2020by jrkd4 answers
6 reactions

Page Manager Plugin

Feature: The ability to create multiple pages in Grapesjs. Functional design Globally:[ ] Include a link to the right of 'Device [dropdown list]' in the top banner that says 'Current Page: <page-name>'[x] Include a new menu item to the right of 'Blocks' in the right column. The icon will be something like the FA pages...

artf

The Pages module is now merged https://github.com/artf/grapesjs/pull/3411 and the new version will be soon released. A simple demo using the Pages API: https://codepen.io/artf/pen/XWpJQoY

artf

Sounds great, I really like the idea of having this one as a plugin, so if you think we need something to add (eg. some event) to make it work better, let me know.

jrkd

Got the core of this functionality working this arvo. @artf Let me know if this is still desired and I'll spend some more time on it in Jan. Note to self, TODO: add/remove page actions, visual tweaks, integrate with the storage manager & r...

#3200Dec 20, 2020by sprklinginfo3 answers
0 reactions

Help needed: Get the component that a block being dropped onto?

Hello, If I drag and drop a block on a dynamically added component, how can I get/access the component that the block is dropped onto? I set dragMode to 'absolute' (design mode) so users can freely drop a block anywhere on pages with a background image for each page. The pages are dynamically added when the editor is...

artf

Sorry mate, but here I reply only to your main questionIf I drag and drop a block on a dynamically added component, how can I get/access the component that the block is dropped onto? all other things seem too much confusing to me and hones...

inthismachine

@artf is there a way to wrap <mj-text>xxx</mj-text> inside a mj-section and mj-column if it is dropped illegally? Like if the user tried to drop it on the body. Reason is I would like to auto add a dropped text block in to a 1 column row i...

GJSBlock

Thanks for reporting this, @sprklinginfo. Great question about Help needed: Get the component that a block being dropped onto?. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS docum...

#3197Dec 19, 2020by craighaworth2 answers
0 reactions

Are you able to reproduce the bug from the demo?

Version: "0.16.30 Are you able to reproduce the bug from the demo? [ x] Yes (the news letter demo) What is the expected behavior? Image resize handles should resize image without throwing an exception. Describe the bug detailed Clicking on any of the image resize handles throws an Uncaught TypeError. PropertyView.js:5...

artf

Thanks for the report, it'll be fixed in the next release.

GJSBlock

Thanks for reporting this, @craighaworth. 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 Gr...

#3194Dec 18, 2020by stljeff13 answers
0 reactions

How do I repurpose the Spectrum Color Picker?

I would like to repurpose the color picker used in GrapesJS. I have to use a color picker for some project level settings. These settings are accessible from the GrapesJS editor. I would like to leverage the existing color picker that is used for traits like font colors, etc. I've seen this post about extending a trai...

artf

Currently, the only way is to use this, not public, API. I've started working on a new UI module, to handle similar situations (ability to add/replace GrapesJS UI elements) but unfortunately, I have no idea when it'll be released, as it's...

himedlooff

is there a way to keep the color picker but configure the spectrum options? for example if i wanted to force hex colors i could pass { preferredFormat: "hex" }?

GJSBlock

Thanks for reporting this, @stljeff1. Great suggestion about How do I repurpose the Spectrum Color Picker?! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system:...

#3192Dec 18, 2020by niveth092 answers
0 reactions

How to make components not editable in preview mode?

I am trying to make components not editable in the preview mode. The following code isn't working. Please help me to fix it. editor; ngOnInit(){ this.editor = this.initializeEditor(); this.editor.on('load', () => this.editor.runCommand('preview')); this.editor.on('run:preview', () => { this.editor.Panels.getPanels().r...

artf

Fix your function in this way

GJSBlock

Thanks for reporting this, @niveth09. Great question about How to make components not editable in preview mode?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your...

#3189Dec 16, 2020by marcepoblet2 answers
3 reactions

ChangesCount is incremented, without changes applied

double-click.pptx Is it possible that the "changesCount" parameter is not incremented when you only double click on a component? The parameter "changesCount" is incremented when you double click and no changes are made. I have attached a video in the pptx file, showing this behavior. This is reproducible in any browse...

artf

Should be fixed in the next release

GJSBlock

Thanks for reporting this, @marcepoblet. Great question about changesCount is incremented, without changes applied. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for y...

#3188Dec 16, 2020by GoodPHP1 answer
0 reactions

Custom Block for component - your opinion?

Hello, my team developed this custom block for GrapesJS. <img src="https://devfuture.pro/wp-content/uploads/2020/12/GrapesJS-Preset-Webpage-2020-12-16-00-35-02.png"> We have video example, here: https://www.youtube.com/watch?v=ZDnWS0X145s What do you think? Do you like? Our service on GrapesJS: https://devfuture.pro/g...

GJSBlock

Thanks for reporting this, @GoodPHP. Great question about Custom Block for component - your opinion?. The recommended approach with GrapesJS is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific mod...

#3185Dec 11, 2020by Stiggi2 answers
0 reactions

How to get the models trait of a component?

Hi there, I added a new type "array" to the TraitManager. So I can add several sub traits. On one point I have to check the traits of the model. I do this with a construct like this: Is there an easier way to get the model of a component directly from the component? Best regards, Michael

Stiggi

simpler than I thought :) editor.getSelected().defaults.traits

GJSBlock

Thanks for reporting this, @Stiggi. Great question about [QUESTION] How to get the models trait of a component?. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your...

#3177Dec 9, 2020by anatoli-dp3 answers
0 reactions

QUESTION/FEATURE REQUEST: Changing Selected Component Tooltip

Is there a way through the api to change the selected component tooltip or is that something that can only be done by editing the source? If so with the api please exlain as I am not bright enough to be able to effectively change the source and every time i try to make other changes I end up with errors when using the...

artf

Hi, when you define a new component, you can customize its toolbar You can also update the toolbar at runtime in this way: but won't be stored (eg. on a refresh of the page), so I always suggest to think more in a component-oriented way.

anatoli-dp

Thanks, that is a big help to some of the things i want to add for my own use. On Tue, Dec 29, 2020 at 1:01 PM Artur Arseniev <[email protected]> wrote: Closed #3177 <https://github.com/artf/grapesjs/issues/3177>. β€” You are receivin...

GJSBlock

Thanks for reporting this, @anatoli-dp. The issue with QUESTION/FEATURE REQUEST: Changing Selected Component Tooltip appears to be a race condition or state management timing problem. This typically happens when component lifecycle events...

#3176Dec 9, 2020by mcottret4 answers
1 reactions

`setStyle` & `setComponents` options parameter not taken into account

Version: 0.16.30 Are you able to reproduce the bug from the demo? [x] Yes [ ] No Steps to reproduce:Open the consoleExecute editor.setComponents('', {avoidStore: true});Execute editor.setStyle('', {avoidStore: true});The "Stored ..." log still appears (see attached screenshot) What is the expected behavior? The option...

artf

Thanks @mcottret the fix is ready for the next release

artf

Unfortunately, due to the bad initial naming, avoidStore is intended to skip the UndoManager and not the Storage 😁 The good news, I had to introduce the new noCount option, in order to fix #3189, this will skip triggering the editor chang...

mcottret

Hello @artf ! I'm sorry to reopen this issue but the setStyle issue still seems to be present. Redoing the steps above, the "Stored ..." log still appears while calling setStyle with the noCount option. I'm seeing the fixed handleChanges h...

Browse all topics