GrapesJS Issues

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

466 issues found

πŸ” components
#4273Apr 20, 2022by boomshakar4 answers
1 reactions

How to trigger the 'Import Template (modal)' on page load

Hello, Please i'm in need of the logic on how to the import template modal on initialization of the page... I'm using the newsletter preset plugin What i'm trying to achieve?: Make the user upload their code once the page has been loaded. Below are the logics I've tried, editor.on('load',(model, argument )=> { //open...

boomshakar

@boomshakar please don't convert discussions to issues Noted. Thanks

boomshakar

Hi @artf, I was able to get what I want by triggering click() on the button itself, const modal = edit.Modal; const query = new URLSearchParams(location.search); const uploadQuery = query.get('key'); if (uploadQuery === 'upload-code') { co...

artf

@boomshakar please don't convert discussions to issues

#4257Apr 13, 2022by DavidHarvey4 answers
3 reactions

Background modification doesn't work for non-images

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v100 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Click any component, scroll to Decorations > Background in the style managerAttempt to create a background with a...

bit-ocean

Hi @artf Is there a chance that this feature could get some attention? I find it fundamental. There is a lot of great functionality added to grapesjs since 0.17.29 (the last one grapesjs-style-bg plugin supports) and I would love to use th...

Vac1911

You can use the background color input for an image color but the UI looks confusing and should be changed.

artf

Yeah, I disabled the previous plugin with color/gradients as it's not compatible with the latest versions but I'll work on it soon. For now, I close this issue as it has nothing to do with the core itself.

#4256Apr 13, 2022by m-jojo-s2 answers
1 reactions

Touch drag-and-drop does not work

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 98.0.4758.80 (Official Build) (arm64) Reproducible demo link https://jsfiddle.net/bd2kpjwf/ Describe the bug How to reproduce the bug?Add two componentsOpen browser dev-tools and enable device mode (CMD+SHIF...

artf

The touch plugin polyfill will work only if you load it with touch device already enabled (try to use the demo), so if you enable touch device later it won't work.

GJSBlock

Thanks for reporting this, @m-jojo-s. Great question about touch drag-and-drop does not work. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific module Lo...

#4255Apr 13, 2022by am1rb2 answers
0 reactions

The initial toolbar move button does not get removed if you set the draggable prop to false programmatically

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v98.0.4758.80Reproducible demo link https://jsfiddle.net/am1rb/3uzkn5t7/8/Describe the bug How to reproduce the bug?Render a simple component on the canvasSet draggable=false for the component programmaticallySelect t...

artf

Yeah the toolbar is not really dynamic, so if you need to recalculate it, you have to force it manually

GJSBlock

Thanks for reporting this, @am1rb. Great question about The initial toolbar move button does not get removed if you set the draggable prop to false programmatically. The recommended approach with Canvas is to use the event-driven API. Star...

#4248Apr 7, 2022by protozoo2 answers
0 reactions

Block drag and drop interaction fails within vscode extension webview

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? VSCode (WebView within VSCode extension) Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Create a new vscode extension (or use one that you already have)Create a Webview that...

artf

Hi @protozoo I'm not sure exactly why but looks like the vscode iframe (probably sandboxed) is blocking the native HTML5 Drag & Drop (this is what is used on Blocks). As this is not strictly related to the core I'll move this one to the di...

GJSBlock

Thanks for reporting this, @protozoo. Great question about Block drag and drop interaction fails within vscode extension webview. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS doc...

#4247Apr 7, 2022by gustavohleal2 answers
0 reactions

Components disappearing/not being rendered at cloning, moving or adding

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chromium v96 Reproducible demo link https://grapesjs.com/demo-mjml.html Describe the bug How to reproduce the bug?Add a one column componentSelect the columnClick the copy button on the toolbarRepeat the steps 2 and 3 with...

artf

Sorry but demo-mjml is a plugin and not related directly to the core. As I see no issues with the default renderer of components that might be related to the mjml renderer of components and I have no reason to keep this issue open. Despite...

GJSBlock

Thanks for reporting this, @gustavohleal. Great question about Components disappearing/not being rendered at cloning, moving or adding. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJ...

#4239Apr 5, 2022by codingaddicted1 answer
0 reactions

In component first mode, sync works only the first time on UI feedback

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v100 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Create a text blockApply a style to block (text color)Create a class and sync the value on itEdit again the color...

GJSBlock

Thanks for reporting this, @codingaddicted. Great question about in component first mode, sync works only the first time on UI feedback. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the Grape...

#4236Apr 4, 2022by m-jojo-s1 answer
0 reactions

Paste command does not respect draggable/droppable properties

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 98.0.4758.80 (Official Build) (arm64) Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?Add a "Tabs" blockCopy a tab from the added componentPaste the tab anywhe...

GJSBlock

Thanks for reporting this, @m-jojo-s. Great question about paste command does not respect draggable/droppable properties. The recommended approach with Components is to use the event-driven API. Start here: Check the GrapesJS documentation...

#4225Mar 30, 2022by Sudhin354 answers
0 reactions

The facebook plugin is not working in the grapes js

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v9Reproducible demo link Not thereDescribe the bug How to reproduce the bug?Install the Grapes js in react app and run itMake the facebook plugin components and import it in grapes js ( get the facebook page listing c...

Sudhin35

@artf Please help me on this

artf

I see no issue when I run editor.setComponents(...FB HTML..) Please provide a reproducible demo.

Sudhin35

@artf Thanks for the reply but you have added editor.setComponents(...FB HTML..) by default and then loaded the editor Please create a component of FB HTML and Drag& drop the component in editor , it wont load This way i have tried

#4196Mar 15, 2022by shelendravashishtha24 answers
0 reactions

Ids gets changed while trying to set components on the canvas using json

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link no link Describe the bug How to reproduce the bug?... use a demo json that can generate some component on the canvas, set an id in attributes ... use editor.setComponents(json)... set style us...

artf

Hi @shelendravashishtha2 can you please indicate the exact steps (I need to know what is the json you're referring to)

JonathanRiche

I've seen this happen to if you don't save a reference to the CSS before using the editor.setComponents() method All of the CSS markeup from the elements id selector/reference is removed when using editor.setComponents() method The exact s...

JonathanRiche

I think I found the issue on my end using editor.getComponents().toJSON(); adds an empty "style":"" field to some of the components which is clearing out there CSS ie "components": [ { "type": "box", "style": "", "attributes": { "id": "ic7...

Browse all topics