Edit EMA: Research react drag and drop solutions for move contentlets

[fmontes]

Parent Issue

#26644

Task

Find ReactJS drag and drop libraries:

1. Research and pick at least 2 well-known libraries.
2. Check for community support, stability, ease of integration, and compatibility.

Test the chosen libraries:

1. Try installing and integrating each library.
2. Review their documentation for clarity and helpful examples.
3. Ensure they support moving content between page containers.
4. Check if they can be easily added to our SDK.

Test the drag and drop feature:

1. Create scenarios to test moving content between containers.
2. Implement these scenarios and check if the content moves correctly.
3. Evaluate the libraries' performance and responsiveness.
4. Ensure they work well with other components in our SDK.

Check customization options:
a. See how flexible the libraries are in customizing the drag elements' look and behavior.

Proposed Objective

Core Features

Proposed Priority

Priority 3 - Average

Acceptance Criteria

A document explaining the results and next steps to solve the problem of moving contentlets from one place to another.

External Links... Slack Conversations, Support Tickets, Figma Designs, etc.

No response

Assumptions & Initiation Needs

No response

Quality Assurance Notes & Workarounds

No response

Sub-Tasks & Estimates

No response

[fmontes]

React Drag and Drop Libraries Evaluation Document

Introduction

This document presents the findings from the evaluation of two popular ReactJS drag and drop libraries: react-dnd and react-beautiful-dnd. The aim was to assess their suitability for integrating a drag and drop feature into our Content Management System (CMS) page editor.

Evaluation Criteria

The libraries were evaluated based on:

• Community support and stability
• Ease of integration and compatibility
• Documentation quality
• Support for moving content between containers
• Performance and responsiveness
• Compatibility with other components in our SDK

Evaluated Libraries

1. React-DnD (React-DnD)

• Last Commit: Last year
• Open Issues/Pull Requests: 403 issues, 21 pull requests
• Implementation: Utilizes hooks for handling drag and drop operations.
• Ease of Integration: Moderately easy to implement, though slightly more complex API compared to react-beautiful-dnd.
• Documentation: Adequate but not as comprehensive as react-beautiful-dnd.
• Concerns:
  • Intrusive nature of hooks, potentially impacting performance when not in use. We might gave to create our own components.
  • Lack of clear method to drag a proxy element instead of the actual content. I still think is doable I just don't know how yet.
• Advantages:
  • Auto-scroll feature.

2. React-Beautiful-DnD (React-Beautiful-DnD)

• Last Commit: 6 months ago
• Open Issues/Pull Requests: 534 issues, 77 pull requests
• Implementation: Component-based, enhancing ease of inclusion in pages.
• Documentation: Excellent, with a wide range of examples.
• Concerns:
  • No support for dragging a proxy element; requires dragging the actual content.
  • Does not work in React strict mode, necessitating its disablement.
  • Lack of clear method to drag a proxy element instead of the actual content. I still think is doable I just don't know how yet.
• Advantages:
  • Auto-scroll feature.
  • More intuitive documentation and implementation.

Recommendation

After thorough testing and consideration, react-beautiful-dnd is recommended due to its component-based approach and superior documentation. However, it's important to note the limitation regarding React strict mode which might not be well receive for our customers.

Alternative Solutions

Given the multi-framework nature of our projects, integrating a React-specific library may not be the most efficient approach. Alternative solutions to consider:

1. Mini Map in Page Editor: A visual representation allowing for easier content management.
2. Window.postMessage System: Utilizes a communication system between the editor and different framework components (like Angular, Vue, etc.).
3. Web Component Drag and Drop Library: A framework-agnostic solution that might fulfill our diverse requirements.

Conclusion

Considering the project's timeframe and diverse framework requirements, the first alternative solution, implementing a Mini Map in the Page Editor, is chosen. This approach promises broader compatibility and easier integration across different frameworks in our ecosystem.