When adding components to the canvas, duplicates are created in the DOM (but not the model)

OK, as far as I can tell the problem is in Sorter.js and centers around this code:

if (dropContent && em) {
      if (isTextable(dropModel)) {
        dropModel = null;
      }

      if (!dropModel) {
        const comps = em.get('DomComponents').getComponents();
        const opts = {
          avoidChildren,
          avoidStore: 1,
          avoidUpdateStyle: 1
        };
        const tempModel = comps.add(dropContent, { ...opts, temporary: 1 });
        dropModel = comps.remove(tempModel, opts);
        dropModel = dropModel instanceof Array ? dropModel[0] : dropModel;
        this.dropModel = dropModel;

        if (isTextable(dropModel)) {
          return this.getSourceModel(src, { target, avoidChildren: 0 });
        }
      }

      return dropModel;
    }

This code is called by onMove any time you start to drag a component onto the canvas. I see that you create temporary component, and then immediately remove it on the next line.

The problem is in this block of code:

 // Unless silenced, it's time to fire all appropriate add/sort/update events.
      if (!options.silent) {
        for (i = 0; i < toAdd.length; i++) {
          if (at != null) options.index = at + i;
          model = toAdd[i];
          model.trigger('add', model, this, options);
        }
        if (sort || orderChanged) this.trigger('sort', this, options);
        if (toAdd.length || toRemove.length || toMerge.length) {
          options.changes = {
            added: toAdd,
            removed: toRemove,
            merged: toMerge
          };
          this.trigger('update', this, options);
        }
      }

For some reason... when model.trigger runs, it creates TWO identical copies of the component; even though the toAdd array only contains one. I can't figure out why it's firing twice... but the net result is that two components get created instead of one, and the line of code:

dropModel = comps.remove(tempModel, opts);

...deletes only one of the two components, which generates an extra ghost component, which I think causes #2493. I don't know why this only happens to a template that's been loaded vs a fresh one... it's calling an eventApi which I suspect is duplicating the evens for some reason. My guess is something is subscribing to the model change and writing the component to the DOM, and for some reason that thing has two subscriptions instead of the one it's supposed to have.

Not sure why that would be. This code triggers _onModelEvent, which appears to retrigger the eventsApi function; but by the time its retrigger, there are TWO identical components instead of one.

@artf At this point I'm hoping you might have some suspicions about what's going on where you can point me in the right direction?

This entire problem disappears when I remove this line from my configuration init:

    domComponents: {
       ...
       storeWrapper: true,
    },

Something about that setting causes this behavior. Still don't understand what.

Thanks @andrewryan1906 for all the insights, actually the Sorter file was in my to refactor list for a while now but didn't yet find the time to handle it... Anyway I'm still confused about what is going on, for sure I need you to create a reproducible demo otherwise I'm not able to help... and one last thing, are you using the latest version of GrapesJS?

ps: if the #2493 is caused by this issue I think you can close it