Al añadir componentes al lienzo, se crean duplicados en el DOM (pero no en el modelo)

Vale, por lo que puedo ver el problema está en Sorter.js y gira en torno a este código:

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

if (!dropModel) {
        const comps = em.get('DomComponents').getComponents();
        const opts = {
          evitarNiños,
          avoidStore: 1,
          avoidUpdateStyle: 1
        };
        const tempModel = comps.add(dropContent, { ... opts, temporales: 1 });
        dropModel = comps.remove(tempModel, opts);
        dropModel = instancia dropModel de Array ? dropModel[0] : dropModel;
        this.dropModel = dropModel;

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

return dropModel;
    }

Este código se llama por onMove cada vez que empiezas a arrastrar un componente al lienzo. Veo que creas un componente temporal y luego lo eliminas inmediatamente en la siguiente línea.

El problema está en este bloque de código:

 A menos que esté silenciado, es hora de lanzar todos los eventos apropiados para añadir/ordenar/actualizar.
      if (!options.silent) {
        para (i = 0; i < toAdd.length; i++) {
          si (en != nulo) options.index = en + i;
          model = toAdd[i];
          model.trigger('añadir', model, esto, opciones);
        }
        if (sort || orderChanged) this.trigger('ordenar', esto, opciones);
        si (toAdd.length || toRemove.length || toMerge.length) {
          options.changes = {
            añadido: paraAñadir,
            eliminado: toRemove,
            fusionados: toMerge
          };
          this.trigger('update', this, options);
        }
      }

Por alguna razón... cuando se ejecuta model.trigger, crea DOS copias idénticas del componente; aunque el array toAdd solo contiene uno. No entiendo por qué dispara dos veces... Pero el resultado neto es que se crean dos componentes en lugar de uno, y la línea de código:

''' dropModel = comps.remove(tempModel, opts);'''

... solo elimina uno de los dos componentes, lo que genera un componente fantasma extra, que creo que causa el #2493. No sé por qué esto solo pasa con una plantilla cargada y otra nueva... está llamando a una eventApi que sospecho que por alguna razón está duplicando los pares. Supongo que algo está suscribiéndose al cambio de modelo y escribiendo el componente en el DOM, y por alguna razón esa cosa tiene dos suscripciones en lugar de la que debería tener.

No sé por qué sería así. Este código activa _onModelEvent, que parece reactivar la función eventsApi; pero cuando se reactiva, hay DOS componentes idénticos en vez de uno.

@artf A estas alturas, espero que tengas alguna sospecha sobre lo que está pasando y que puedas indicarme en la dirección correcta.

Todo este problema desaparece cuando elimino esta línea de mi configuración en el init:

    domComponents: {
       ...
       storeWrapper: cierto,
    },

Algo en ese entorno causa este comportamiento. Todavía no entiendo qué.

Gracias @andrewryan1906 por todos los aportes, de hecho el archivo Sorter estuvo en mi lista de por refactor durante un tiempo, pero aún no encontré tiempo para gestionarlo... De todas formas, sigo confundido sobre lo que está pasando, seguro que necesito que crees una demo reproducible, si no no puedo ayudarte... Y una última cosa, ¿estás usando la última versión de GrapesJS?

PD: si el #2493 es causado por este problema, creo que puedes cerrarlo