GrapesJS / studio

GrapesJS Studio repo for discussion and issue tracking
MIT License
7 stars 0 forks source link

BUG: For Project Type: Email, drag-and-drop options are not working #6

Closed ramswaroopdigidoers closed 2 weeks ago

ramswaroopdigidoers commented 2 weeks ago

GrapesJS version

What browser are you using?

129.0.6668.58

Reproducible demo link

https://useful-scarcely-gibbon.ngrok-free.app/grapesjs

Describe the bug

Drag and Drop Not Working in Email Project Type

Issue Description

The drag and drop functionality is not working when using project.type: 'email' in the GrapesJS Studio SDK.

Steps to Reproduce

  1. Initialize GrapesJS Studio with project.type: 'email'
  2. Attempt to drag elements from the blocks panel
  3. Elements cannot be dragged and dropped into the editor canvas

Video Demonstration: Watch Bug Demo

Expected Behavior

Current Behavior

Environment

Code Example


<!DOCTYPE html>
<html lang="en">
 <head>
   <script src="https://unpkg.com/@grapesjs/studio-sdk/dist/index.umd.js"></script>
   <link rel="stylesheet" href="https://unpkg.com/@grapesjs/studio-sdk/dist/style.css"/>
 </head>
 <body>
   <div id="studio-editor" style="height: 100dvh"></div>
   <script>
     GrapesJsStudioSDK.createStudioEditor({
       root: '#studio-editor',
       licenseKey: '4e2ad42142134a16890eb5b22e94c2d3b24006921ec44c89a2ab25649f695d9b',
       project: {
         type: 'email',
         id: '9d53f761-1fa6-4ae4-9ede-09ebb3ff1cb7'
       },
       identity: {
         id: '9d5458bc-dd2c-4915-9b47-ff399b31dd38'
       },
       assets: {
         storageType: 'cloud'
       },
       storage: {
         type: 'cloud',
         autosaveChanges: 100,
         autosaveIntervalMs: 10000
       }
     });
   </script>
 </body>
</html>

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct
artf commented 2 weeks ago

Thanks for the report @ramswaroopdigidoers I think the issue might be having an empty canvas. Are you able to drop them after importing a basic template like:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column><mj-text>My email</mj-text></mj-column>
    </mj-section>
  </mj-body>
</mjml>
ramswaroopdigidoers commented 2 weeks ago

Thank you!