Arrastrar y soltar roto en la versión 20.2

Versión GrapesJS

• Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Chrome v108

Enlace de demo reproducible

ver más abajo

Describe el bicho

¿Cómo reproducir el bicho?

1. Crear un componente personalizado

export const appearBlock = {
    Vista:{
        valores predeterminados:{
            etiquetaNombre: 'div',
            atributos: {
                Clase: 'Aparente-element_view'
            },
            estilos:'
                Borde: 2px discontinuo gris
            `
        }
    },
    modelo: {
        Predeterminados: {
            tipo:'elemento de aparición',
            etiquetaNombre: 'div',
            atributos: {
                Clase: 'Elemento Apariencia'                
            },
            Estilos: '
                .elemento-aparece{
                    pantalla:flex;
                    Altura: 50px;
                    ancho:50px;
                    color-fondo:rojo
                }
             
`
        }
    }
}

2. Añadelo al editor como un componente y bloque arrastrable

editor. Components.addType('appear-block', appearBlock)
editor. BlockManager.add('id-appear', {
  contenido:{ tipo: 'aparecer-bloquear'},
  etiqueta: "Bloque de Aparición personalizada"
})

3. Pon el editor en modo de arrastre absoluto cuando se añade el componente, y luego haz que el componente en sí sea absoluto una vez que se solte. Reiniciar el editor

editor.on('bloqueo:arrastrar:inicio', (bloqueo) => {
        if(block){
            editor.setDragMode('absolute');
        }
    })

editor.on('bloque:arrastrar:stop', (componente, bloque) => {

si (componente) {
            editor.setDragMode("translate")
            var res = component.setDragMode('absoluto');
}

¿Cuál es el comportamiento esperado? El componente permanece donde se ha dejado (esto funciona como se espera en la v 0.20.1)

¿Cuál es el comportamiento actual? El componente se ajusta al lado derecho de la pantalla (este comportamiento es nuevo en la 0.20.2)

Código de conducta

• Acepto seguir el Código de Conducta de este proyecto