GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Edge (Version 143.0.3650.46), Chrome (Version 143.0.7499.41) Reproducible demo link https://grapesjs.com/demo Describe the bug Test Environment: OS: Windows 11 version 25H2 (OS Build 26220.7271) Browser: Edge (Version 143....
msftedad
Hi Team, Any update on this issue?
GJS Helper
This is a valid accessibility concern. The GrapesJS editor's canvas is rendered within an <iframe> element. For screen readers to properly identify and announce the purpose of this iframe, it needs an accessible name, typically provided by...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome & Firefox Reproducible demo link Describe the bug How to reproduce the bug? Chrome & Firefox: Add padding to a image / Text Sometimes the error occurs, sometimes it doesn't. https://github.com/user-attachments/asset...
trebor94
I've been running into the same issue and also using the grapesjs-mjml plugin. Apparently it only occurs when a project is loaded which has the style property present on the attributes of a component when the project is loaded. After each...
trebor94
Unfortunately haven't been able to figure out where or when exactly the style property gets added to the component style when exporting project data from a previously loaded project. Maybe someone else can pinpoint what causes the issue. @...
GJS Helper
It appears you've encountered a bug in GrapesJS, specifically when working with MJML components and applying styles like padding, which leads to invalid attributes being generated and stored. This issue seems to be a regression, as it work...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 141.0.7390.123 Reproducible demo link https://grapesjs.com/demo.html Describe the bug Our application serves clients that require all pages to be accessible for all users. I am running the latest grapesjs libraries:...
niemyjski
I'm also seeing this behavior.
artf
This is related to https://github.com/GrapesJS/preset-webpage You're free to update styles on top of that plugin or submit a PR with the fixes there.
GJS Helper
Achieving full accessibility compliance in a complex, dynamic web editor like GrapesJS requires careful consideration and customization. The WAVE Evaluation Tool often flags issues related to missing ARIA attributes, insufficient contrast,...
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Edge Version 135.0.2535.51 (Official build) (64-bit), Chrome Version 135.0.6422.112 (Official Build) (64-bit) Reproducible demo link https://grapesjs.com/demo Describe the bug Test Environment: OS: Windows 11[Version 24H2(...
artf
Hey @msftedad the website repo is here, feel free to submit a PR with the fix (file/GrapesEditor.tsx)). I'm closing the issue as it's not related to the core.
GJS Helper
This is a valid and important accessibility bug report for the GrapesJS demo page. The issue stems from the <img> tag for the GrapesJS logo having an empty alt attribute, which incorrectly signals to screen readers that the image is purely...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Version 123.0.6312.123Reproducible demo link Uncaught TypeError: _webpackrequire_.r is not a function at ./nodemodules/grapesjs/dist/grapes.mjs (grapes.mjs:1:1) at _webpackrequire (bootstrap:789:1) at fn (bootstrap:150:1) at...
Mustufask
@artf pls help me solve this issue as this node modules files doesnt allows grapesjs to work in my react based project
artf
Related discussion https://github.com/GrapesJS/grapesjs/discussions/5400 Please use the search before opening an issue.
GJS Helper
The Uncaught TypeError: _webpackrequire.r is not a function error you're encountering is a common Webpack-specific issue related to how it handles ES Modules (files ending in .mjs) and its internal module interop logic. The webpackrequire....
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Reproducible demo link https://jsfiddle.net/szLp8h4n Describe the bug How to reproduce the bug?Insert <a> tag with link inside the table cell(td).give float left or right to the table cell(td). What is the expected...
artf
Provide valid reproducible demo
GJS Helper
The issue you're encountering where a <td> element changes its display behavior (appearing as a table-row or table-body) when float: right or float: left is applied is not a bug specific to GrapesJS. Instead, it's a fundamental behavior of...
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? latest version of Chrome Reproducible demo link https://grapesjs.com/demo.html Describe the bug How to reproduce the bug? editor.addComponents( <ul class="mb-5 flex list-none flex-row flex-wrap border-b-0 pl-0" role="tabli...
artf
Already reported and fixed https://github.com/GrapesJS/grapesjs/issues/5525
GJS Helper
The issue you're experiencing, where GrapesJS crashes or becomes unresponsive when adding and selecting elements with a large number of utility classes (especially from frameworks like Tailwind CSS or component libraries using data-[...] a...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome v96Reproducible demo link No demoDescribe the bug How to reproduce the bug?Add to Block manager more than 1000 blocks, in my case 7,864 font awesome icons.Try to drag any block from block panel Explanation I added eve...
artf
For your case, I'd suggest creating a custom block manager where you can adapt the UI for your blocks as you wish (eg. search, DOM virtualization, etc.)
GJSBlock
Thanks for reporting this, @jloguercio. Great question about Drag Blocks to Canvas performance when you have 1000+ custom blocks. The recommended approach with Canvas is to use the event-driven API. Start here: Check the GrapesJS documenta...
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? chrome new versionReproducible demo link https://codesandbox.io/s/grapejs-reactjs-forked-zqnqo?file=/src/Editor.jsDescribe the bug How to reproduce the bug?Just drag and drop image block to canvasalso drag and drop custom im...
throne1986
I solved the issue for future reference first I removed this function : editor.on("component:add", (model, argument) => { if (model.getName() === "Image") { modal.setContent(ModalImages); } }); I replaced with this function editor.Commands...
artf
when you run editor.command.run('open-assets') you have to pass options, eg.
throne1986
@artf I solved the issue it was about closure problem , the solution just passing the URL as options as follows editor.Commands.run("open-assets", { target: editor.getSelected() url: imageUrl }); editor.Commands.add("open-assets", { run(ed...
Hello, Fairly new to this great project but I am trying to change the display of a component onClick of another component after the component id is selected from the dropMenu. I'm having trouble trying to add an onClick attribute to the component after selection from a dropMenu trait. I can't seem to access the value...
GJSBlock
Thanks for reporting this, @tmrowe123. Thanks for sharing your report about Trying to add onClick attribute to component. To help the team investigate and prioritize this: Please provide: A minimal reproducible example (CodeSandbox/JSFiddl...