Fix dragging (absolute dragging mode) (#6192)

* Fix dragging in absolute dragging mode

* Remove caching temp models

---------

Co-authored-by: Artur Arseniev <artur.catch@hotmail.it>

packages/core/src/utils/Droppable.ts

@@ -29,6 +29,7 @@ export default class Droppable {
   dragStop?: DragStop;
   draggedNode?: CanvasNewComponentNode;
   sorter!: ComponentSorter<CanvasNewComponentNode>;
+  setAbsoluteDragContent?: (cnt: any) => any;
 
   constructor(em: EditorModel, rootEl?: HTMLElement) {
     this.em = em;
@@ -123,7 +124,6 @@ export default class Droppable {
     // any not empty element
     let content = dragSourceOrigin?.content || '<br>';
     let dragStop: DragStop;
-    let dragSource;
     em.stopDefault();
 
     // Select the right drag provider
@@ -137,7 +137,7 @@ export default class Droppable {
         target,
         onEnd: (ev: any, dragger: any, { cancelled }: any) => {
           let comp;
-          if (!cancelled) {
+          if (!cancelled && !!content) {
             comp = wrapper.append(content)[0];
             const canvasOffset = canvas.getOffset();
             const { top, left, position } = target.getStyle() as ObjectStrings;
@@ -156,7 +156,7 @@ export default class Droppable {
         },
       });
       dragStop = (cancel?: boolean) => dragger.stop(ev, { cancel });
-      dragSource = (cnt: any) => (content = cnt);
+      this.setAbsoluteDragContent = (cnt: any) => (content = cnt);
     } else {
       const sorter = new utils.ComponentSorter({
         em,
@@ -255,6 +255,7 @@ export default class Droppable {
     if (this.draggedNode) {
       this.draggedNode.content = content;
     }
+    this.setAbsoluteDragContent?.(content);
     this.endDrop(!content, ev);
   }
 

packages/core/src/utils/sorter/CanvasNewComponentNode.ts

@@ -8,40 +8,6 @@ import { isComponent } from '../mixins';
 type CanMoveSource = Component | ContentType;
 
 export default class CanvasNewComponentNode extends CanvasComponentNode {
-  /**
-   * A cache of shallow editor models stored in the source node.
-   * This is a map where each content item is associated with its corresponding shallow wrapper model.
-   */
-  private _cachedShallowModels: Map<ContentElement, Component> = new Map();
-
-  /**
-   * Ensures the shallow editor model for the given contentItem is cached in the source node.
-   * If not cached, retrieves it from the shallow wrapper and stores it in the cache.
-   * @param contentItem - The content item to retrieve or cache.
-   * @returns {Component | null} - The shallow wrapper model, either cached or retrieved.
-   */
-  cacheSrcModelForContent(contentItem: ContentElement | Component): Component | undefined {
-    if (isComponent(contentItem)) {
-      return contentItem;
-    }
-
-    if (this._cachedShallowModels.has(contentItem)) {
-      return this._cachedShallowModels.get(contentItem)!;
-    }
-
-    const wrapper = this.model.em.Components.getShallowWrapper();
-    const srcModel = wrapper?.append(contentItem)[0];
-    // Replace getEl as the element would be removed in the shallow wrapper after 100ms
-    const el = srcModel?.getEl();
-    srcModel!.getEl = () => el;
-
-    if (srcModel) {
-      this._cachedShallowModels.set(contentItem, srcModel);
-    }
-
-    return srcModel;
-  }
-
   canMove(source: CanvasNewComponentNode, index: number): boolean {
     const realIndex = this.getRealIndex(index);
     const { model: symbolModel, content, dragDef } = source._dragSource;
@@ -51,13 +17,11 @@ export default class CanvasNewComponentNode extends CanvasComponentNode {
 
     if (Array.isArray(sourceContent)) {
       return (
-        sourceContent.every((contentItem, i) =>
+        canMoveSymbol && sourceContent.every((contentItem, i) => this.canMoveSingleContent(contentItem, realIndex + i))
-          this.canMoveSingleContent(source.cacheSrcModelForContent(contentItem)!, realIndex + i),
-        ) && canMoveSymbol
       );
     }
 
-    return this.canMoveSingleContent(source.cacheSrcModelForContent(sourceContent)!, realIndex) && canMoveSymbol;
+    return canMoveSymbol && this.canMoveSingleContent(sourceContent, realIndex);
   }
 
   private canMoveSingleContent(contentItem: ContentElement | Component, index: number): boolean {