Update sorting

src/dom_components/model/Components.js

@@ -86,8 +86,7 @@ export default Backbone.Collection.extend({
     }
 
     const { domc, em } = this;
-    const allByID = domc ? domc.allById() : {};
+    const isTemp = opts.temporary || opts.fromUndo;
-    const isTemp = opts.temporary;
     removed.prevColl = this; // This one is required for symbols
 
     if (!isTemp) {
@@ -96,6 +95,7 @@ export default Backbone.Collection.extend({
       const sels = em.get('SelectorManager').getAll();
       const rules = em.get('CssComposer').getAll();
       const canRemoveStyle = (opts.keepIds || []).indexOf(id) < 0;
+      const allByID = domc ? domc.allById() : {};
       delete allByID[id];
 
       // Remove all component related styles
@@ -120,7 +120,6 @@ export default Backbone.Collection.extend({
 
       const inner = removed.components();
       inner.forEach(it => this.removeChildren(it, coll, opts));
-      // removed.empty(opts);
     }
 
     // Remove stuff registered in DomComponents.handleChanges

src/dom_components/view/ComponentTextView.js

@@ -136,7 +136,7 @@ export default ComponentView.extend({
     }
   },
 
-  insertComponent(content) {
+  insertComponent(content, opts = {}) {
     const { model, el } = this;
     const doc = el.ownerDocument;
     const selection = doc.getSelection();
@@ -164,13 +164,13 @@ export default ComponentView.extend({
 
         const result = newCmps.filter(Boolean);
         const index = result.indexOf(content);
-        cmps.reset(result);
+        cmps.reset(result, opts);
 
         return cmps.at(index);
       }
     }
 
-    return model.append(content);
+    return model.append(content, opts);
   },
 
   /**

src/utils/Sorter.js

@@ -1061,39 +1061,36 @@ export default Backbone.View.extend({
     const targetCollection = $(dst).data('collection');
     const { trgModel, srcModel, draggable } = validResult;
     const droppable = trgModel instanceof Backbone.Collection ? 1 : validResult.droppable;
-    let modelToDrop, modelTemp, created;
+    let modelToDrop, created;
 
     if (targetCollection && droppable && draggable) {
-      const opts = { at: index, noIncrement: 1 };
+      const opts = { at: index, undoContext: 'move-component' };
 
       if (!dropContent) {
-        // Putting `avoidStore` here will make the UndoManager behave wrong
+        const srcIndex = srcModel.index();
-        opts.temporary = 1;
+        const sameCollection = targetCollection === srcModel.collection;
-        modelTemp = targetCollection.add({}, { ...opts });
+        const sameIndex = srcIndex === index || srcIndex === index - 1;
 
-        if (srcModel.collection) {
+        if ((!sameCollection || !sameIndex) && srcModel.collection) {
-          modelToDrop = srcModel.collection.remove(srcModel, { temporary: 1 });
+          modelToDrop = srcModel.collection.remove(srcModel, { temporary: true });
         }
       } else {
         modelToDrop = isFunction(dropContent) ? dropContent() : dropContent;
-        opts.silent = false;
+        opts.avoidUpdateStyle = true;
-        opts.avoidUpdateStyle = 1;
+        opts.undoContext = 'add-component';
       }
 
-      if (this.isTextableActive(srcModel, trgModel)) {
+      if (modelToDrop) {
-        created = trgModel.getView().insertComponent(modelToDrop);
+        if (this.isTextableActive(srcModel, trgModel)) {
-      } else {
+          delete opts.at;
-        created = targetCollection.add(modelToDrop, opts);
+          created = trgModel.getView().insertComponent(modelToDrop, opts);
-      }
+        } else {
-
+          created = targetCollection.add(modelToDrop, opts);
-      if (!dropContent) {
+        }
-        targetCollection.remove(modelTemp);
-      } else {
-        this.dropContent = null;
       }
 
-      // This will cause to recalculate children dimensions
+      this.dropContent = null;
-      this.prevTarget = null;
+      this.prevTarget = null; // This will recalculate children dimensions
     } else if (em) {
       const dropInfo = validResult.dropInfo || trgModel?.get('droppable');
       const dragInfo = validResult.dragInfo || srcModel?.get('draggable');