Problema con copiar y pegar un nodo

He intentado localmente pero el nodo está colocado correctamente. ¿Puedes crear una demo en directo, por favor?

Perdón, no expliqué el escenario en el que ocurrió este error. Los componentes que vienen con los grapesjs no producen este error, porque no tienen espacios, retornos de carro ni pestañas. Encontré este problema mientras personalizaba componentes. He personalizado muchos de mis propios componentes, y algunos de ellos tendrán esta situación. Un ejemplo de la inicialización del nodo componente personalizado que encontró este problema es el siguiente.

viewTemplate() {
    volver '
      <form data-gjs-type="form-panel" class="form-panel">
      </form>
    '
  },
...
 onViewInit() {
    const comps = this.model.get('components');
    if (!comps.length) {
      comps.reset();
      comps.add('
        <div class="form-panel-group" data-gjs-type="form-panel-group"><label class="label">多/单选:</label><div data-gjs-type="select-comp" class="select-comp"></div></div>
        <div class="form-panel-group" data-gjs-type="form-panel-group"><label class="label">多选选择:</label><div data-gjs-type="mdc-checkbox-group" class="mdc-checkbox-group"></div></div>
       </div>
      ')
    }
    ...
  }

Si quieres reproducir este problema en el componente predeterminado grapesjs, puedes introducir un espacio entre nodos a través del "Editor como HTML" de los elementos f12. A continuación. ! live_demo

@artf cerré el problema por accidente.

Gracias por informar de esto, @nanaya1.

El problema con Problema de copiar y pegar un nodo parece ser una condición de carrera o un problema de sincronización de gestión de estado. Esto suele ocurrir cuando los eventos del ciclo de vida de los componentes y las modificaciones del DOM se superponen, creando un estado inconsistente.

Qué probar:

1. Añadir un envoltorio setTimeout para asegurar que el DOM se ha asentado: '''javascript setTimeout(() => { Tu operación aquí }, 0);

2. **Comprobar el orden de inicialización** — asegúrate de que los componentes estén completamente cargados antes de interactuar con ellos

3. **Utilizar el sistema de eventos del editor** — escuchar los eventos de finalización:
'''javascript
editor.on('component:mount', (component) => {
  Es seguro interactuar con el componente aquí
});

Recomendaciones de siguientes pasos:

• Prueba con la última versión de GrapesJS si no lo has hecho
• Proporcionar un ejemplo mínimo reproducible (CodeSandbox) — esto ayuda al equipo a identificar la causa raíz más rápido
• Incluir errores de GrapesJS, de navegador y de consola en tu informe