BUG: Drag Blocks to Canvas performance when you have 1000+ custom blocks
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome v96
Reproducible demo link
No demo
Describe 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 every font awesome pro icons as single block, use the below code, where jsonIcons is a json variable that contains all the 7,864 icons, i need to archieve this to drag and drop every icon of the list to the canvas
$.each(jsonIcons,function(index, value) {
let fontAwesomeIcon = {
category: 'Icons',
label: value,
media: '<em class="' + value + ' fa-4x"></em>',
attributes: {
class: "gjs-fonts"
},
content: '<i class="' + value + ' fa-2x"></i>',
id: "fontAwesomeIcon" + index
};
editor.BlockManager.add(fontAwesomeIcon.id, fontAwesomeIcon);
});
the main trouble is when i try to drag an icon block, the performance of the dragging events and drop the block are too slow, same for the green drop marker, how can i solve this issue? there is a way to improve the performance having a lot of blocks?
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (1)
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.)
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4015
BUG: Drag and drop not working well in case of RTL
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v96 Reproducible demo link https://...
Issue #5795
BUG: How to add a addtional custom block manager like tab or section like block manager and style manager ,and add some blocks it to it?
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome v9 Reproducible demo link Describe...
Issue #4323
BUG: 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 (Officia...
Issue #6318
BUG: Unable to use transparent fill in Block media svg
GrapesJS version[X] I confirm to use the latest version of [email protected] when this issue was filedWhat browser are you using? Fir...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.