Fix and refactor Sorter.ts

The idea is to refactor the sorter for improved maintainability and readability. We can implement the following changes:

1. Make Sorter class depend on an abstract tree structure rather than relying on specific implementations like Component or Layers, make the Sorter class work with a more generic, abstract tree structure. This will make it more flexible and reusable.
2. Split the code to multiple smaller classes each with a single responsibility
3. ComponentManager.canMove: Use the ComponentManager.canMove method to determine if a Component can be moved. This avoids duplicating code and ensures consistent behavior across different parts of your application.

We will see how we can apply those points one by one

1. To make the Sorter class independant of any model implementation, we can add an argument in the SorterOptions that’s a function returning whether an element can be dragged into another element.

   export interface SorterOptions {
     container?: HTMLElement;
     canMove: (targetModel: Model<any>, srcModel: Model<any>, index: number) => Boolean;
     ...
   }
   

   For example the initializing the Sorter for the Layers in the StyleManager

   new utils.Sorter({
     container: this.el,
     canMove: (targetModel, srcModel, index) => {
   	  return targetModel.view === this.el // Allow dropping iff the target is the container
     },
     em,
   })
   

   And for anything depending on Component would be

   new utils.Sorter({
     container: this.el,
     canMove: editor.Components.canMove,
     em,
   })
   

2. Splitting the functionality of Sorter class into multiple classes

   • DropLocationDeterminer
     • Receives input: Takes mouse movement data, the HTML element being dragged, the tree structure, and the canMove function as input.
     • Calculates drop location: Analyzes the mouse position, the structure of the tree, and the canMove function to determine the most suitable index for the dropped element.
   • DragAndDropHandler
     • Creates and manages elements: Creates and manages the placeholder, drag helper, and the actual element being dragged, ensuring their proper appearance and positioning.

Thanks for reporting this, @mohamedsalem401.

Thanks for sharing your report about [Fix] Fix and refactor Sorter.ts. To help the team investigate and prioritize this:

Please provide:

1. A minimal reproducible example (CodeSandbox/JSFiddle)
2. Your GrapesJS version number
3. Browser and OS information
4. Any error messages from the browser console
5. Steps to reproduce the issue

What helps most:

• Minimal code example (not your full project)
• Screen recording or screenshot showing the issue
• Expected vs actual behavior clearly stated
• GrapesJS configuration you're using

With these details, the maintainers can identify and prioritize a fix much faster. The GrapesJS team is very responsive to well-documented issues.