GrapesJS Issues

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

220 issues found

πŸ” canvas
#4474Jul 22, 2022by bimsina3 answers
2 reactions

Running in headless mode requires window

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome 103.0.5060.134Reproducible demo link https://stackblitz.com/edit/node-zrdtg4?file=index.jsDescribe the bug How to reproduce the bug?Initialize Editor in headless modeLoad the project data with just a basic text node <...

skru

see #4473

artf

Fixed here https://github.com/artf/grapesjs/commit/f61222ec904ed56794f7b97e362ea2006dfceaf6

GJSBlock

Thanks for reporting this, @bimsina. Great question about Running in headless mode requires window. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific m...

#4435Jul 10, 2022by bovealexandre4 answers
0 reactions

Pages Manager

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome latest versionReproducible demo link none for the momentDescribe the bug How to reproduce the bug?create a Page Manager with functions from Pages APItest the select function (if you have something in your head it will...

bovealexandre

so the add function is fixed there was an error with the data I sent but I still can't understand why Tailwind css doesn't apply despite the fact that it is in the head tags

artf

Are you using config.canvas.styles option? https://github.com/artf/grapesjs/blob/b657428b3efc343513f6c92eb6b418935d2a8ac9/src/canvas/config/config.js#L14-L22 Can you create a reproducible demo of your use case?

bovealexandre

Hi @artf unfortunately I can't create a reproducible demo on CodePen or JSFiddle because there are way too many things on it and I'm using technologies like nextJS but I can give you access to the repository if you need it is a private rep...

#4432Jul 9, 2022by booellean2 answers
0 reactions

Undo Manager creates Duplicate CSS during custom command

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? 103.0.5060.66 (Official Build) (64-bit) (cohort: Stable) Reproducible demo link https://codesandbox.io/s/cranky-morning-fh5diz?file=/index.js Describe the bug How to reproduce the bug?Drop the custom block "picture" into t...

artf

I'm not sure exactly what is happening but I'd suggest switching to styleable:change event and pass its options to setStyle, eg.

GJSBlock

Thanks for reporting this, @booellean. Great question about Undo Manager creates Duplicate CSS during custom command. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS documentation f...

#4386Jun 15, 2022by contentfree2 answers
0 reactions

CanvasView.getPosition returns strange values in designer mode with a narrow device

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Version 102.0.5005.61 Reproducible demo link https://jsfiddle.net/tLvwfhu3/ Describe the bug Starting at the demo fiddle, drop a text block into the narrow canvas. An alert pops up with the result of CanvasView.getPosition...

artf

Yeah I'd say it's definitely confusing (width and height refer to the canvas, top and left to the frame) but any direct change to those functions breaks some functionality in other points as those were built around this confusing logic 😞...

GJSBlock

Thanks for reporting this, @contentfree. The issue with CanvasView.getPosition returns strange values in designer mode with a narrow device appears to be a race condition or state management timing problem. This typically happens when comp...

#4362Jun 2, 2022by tuongnguyendev2 answers
1 reactions

Background image preview show error link

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 102.0.5005.61 Reproducible demo link https://jsfiddle.net/tuongnguyendev/25kcypuj/ Describe the bug How to reproduce the bug?Thow a column in canvas.Select component test backgroundDecoration => Background =...

tuongnguyendev

Hi @artf Updated new bug from #4350 Thank you.

GJSBlock

Thanks for reporting this, @tuongnguyendev. Great question about Background image preview show error link. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

#4350May 26, 2022by ronaldohoch3 answers
1 reactions

Style Manager don't update background when component is selected

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Brave Browser V1.39.111 Reproducible demo link https://jsfiddle.net/e7oau8v6/ Describe the bug How to reproduce the bug?Thow a column in canvas.Select the text componentGo to style tab and find background on decorationsSet...

artf

Hi @ronaldohoch the issue here is with your custom type background and the way you're adding it is not correct (proper usage of the API). The addType is mainly for adding new UI inputs, if you don't need a new type of UI (like in your case...

tuongnguyendev

Hi @artf , I have a problem quite similar to @ronaldohoch when use the latest version of GrapesJS Background image preview show error link Details are in the image below:

GJSBlock

Thanks for reporting this, @ronaldohoch. Great question about Style Manager don't update background when component is selected. The recommended approach with StyleManager is to use the event-driven API. Start here: Check the GrapesJS docum...

#4323May 12, 2022by mohdSuhailCoditation4 answers
10 reactions

Performance issue while dragging component to canvas when you have 2k component on canvas

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Google Chrome Version 101.0.4951.41 (Official Build) (64-bit)Reproducible demo link https://jsfiddle.net/Laze0pyg/Describe the bug How to reproduce the bug?Add 2k components using the below script.for(let i = 0;i<2000;i++) e...

GedMarc

but.... add 2000 dom elements with any basic styling to any page and you'll get lag? that might not be the tool, but how the tool is being used? also check your browser render speed in relation to your pc - http://speed-battle.com/speedtes...

artf

With the latest release, containing the refactor of the Sorter by @mohamedsalem401, the previous demo seems to be working fine now πŸ₯³

vizardkill

https://github.com/GrapesJS/grapesjs/assets/37307788/2d653d49-1a57-458c-bc8c-4833c8c7a690 I have the same problem, and I don't think it is due to the size, I am using the pageManager and I preload an html template and trying to drag new el...

#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...

#4249Apr 8, 2022by iamqinglong3 answers
0 reactions

Image src won't change in exported HTML

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome 100 Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug?I am using externalDrag an image block to canvasSelect an image from the custom modalView the codeCheck the model/t...

m-jojo-s

either use selected.set('src', doc.url) or enable unsafe html attributes Refer to #4148

artf

Yeah, I'd say you should simply switch to selected.set('src', doc.url) as already suggested.

GJSBlock

Thanks for reporting this, @iamqinglong. Great question about image src won't change in exported HTML. The recommended approach with ProseMirror is to use the event-driven API. Start here: Check the GrapesJS documentation for your specific...

#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...

Browse all topics