Issue #4029Opened December 22, 2021by jloguercio0 reactions

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?

  1. Add to Block manager more than 1000 blocks, in my case 7,864 font awesome icons.
  2. 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)

artfJanuary 4, 20220 reactions

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.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.