BUG: Cannot drag drop in mobile screen even add grapejs-touch

[loclovepop]

GrapesJS version

• [X] I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome, IOS

Reproducible demo link

https://www.lovepoptestsite.com/products/disney-s-hocus-pocus-black-flame-candle-pop-up-card?variant=40356218077273&preview_link=124907487321 password: ilovecards

Describe the bug

How to reproduce the bug? I tried to drag and drop in mobile screen with grapejs editor alone everything is fine. But when i tried to do it after inject editor to test store it's not working as expected.

What is the expected behavior? ... It should allow drag and drop components

What is the current behavior? ... It's only grey out component and cannot drag

If is necessary to execute some code in order to reproduce the bug, paste it here below:

 const editor = grapesjs.init({
            container: editorId ? `#${editorId} #gjs` : `#editor_container #gjs`,
            height: editorHeight,
            width: editorWidth,
            avoidInlineStyle: true,
            fromElement: true,
            canvasCss: 'border-radius: 50px',
            noticeOnUnload: false,
            selectorManager: {
                componentFirst: true,
            },
            storageManager: {
                type: 'remote',
                autosave: true,
                autoload: false,
                stepsBeforeSave: 3
            },
            colorPicker: {
                appendTo: 'parent',
                offset: { top: 26, left: -166, },
            },
            panels: {
                defaults: [
                    // {
                    //     buttons: [
                    //         {
                    //             id: 'myNewButton',
                    //             className: 'fa-solid fa-eraser',
                    //             command: 'Clear',
                    //             attributes: {
                    //                 title: 'Some title',

                    //             },
                    //             active: false,
                    //         }
                    //     ]
                    // }
                ],
            },
            commands: {
                // defaults: [
                //     {
                //         id: 'Clear',
                //         async run() {
                //             await editor.load({});
                //         },
                //     }
                // ],
            },
            plugins: [plugin, grapesjsTouch],
            richTextEditor: {
                actions: ['bold', 'italic', 'underline', 'strikethrough']
            },
            styleManager: {
                appendTo: editorId ? `#${editorId} .styles-container` : '.styles-container',
                sectors: []
            },
            blockManager: {
                appendTo: editorId ? `#${editorId} #blocks` : '#blocks',
                blocks: []
            }
        });

        editor.Storage.add('remote', {
            load: handleLoad,
            store: handleStore
        });

        const updateStyleManager = (model) => {
            const typoStyleElement: any = document.querySelector('.gjs-sm-sector__typography');

            if (model.attributes.type !== 'text') {
                typoStyleElement.style.display = 'none';
            } else {
                typoStyleElement.style.display = 'block';
            }

            editor.refresh();
        }

        // Triggers on component change
        editor.on('component:selected', updateStyleManager);

        (editor.Blocks.getCategories() as any).forEach(x => {
            x.on('change:open', (e) => {
                // editor.DomComponents.clear();
                // editor.setStyle([{}])
                editor.refresh();
            })
        });

        (editor.StyleManager.getSectors() as any).forEach(x => {
            x.on('change:open', (e) => {
                editor.refresh();
            })
        });

        editor.on("load", () => {
            if (card && card.id > 0) {
                editor.load({});
            }

            const categories = editor.BlockManager.getCategories();
            (categories as any).each(category => {
                category.set('open', false).on('change:open', opened => {
                    opened.get('open') && (categories as any).each(category => {
                        category !== opened && category.set('open', false)
                    })
                })
            })
        });

        // editor.on('change:changesCount', (e) => {
        //     var count = editor.getDirtyCount();
        // });

        setEditor(editor);

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[loclovepop]

screencast-www.lovepoptestsite.com-2023.06.01-00_17_11.webm

This is video of bug

[artf]

I see the touch plugin works properly, ensure to have the mobile device enabled on load (eg. not simulated post load) so the polyfill could be loaded properly.