Automáticamente envolve cada arrastre de componente en lienzo con otro componente

Estoy intentando asegurarme de que cada componente se arrastre hacia el lienzo para ser envuelto con un componente columna. Para lograrlo uso el evento de lienzo.

Primero desactivé el evento de ventana para evitar que se disparara el evento de arrastrar y soltar por defecto de HTML 5. Evento 'Canvas:Drop' '''javascript ditor.on('canvas:drop', function (dataTransfer) { event.preventDefault() })

Supongamos que mi componente de columna es tan simple, solo una div.

evento 'canvas:dragdata'
'''javascript
editor.on('canvas:dragdata', handleDragData)

function handleDragData (dataTransfer, result) {
    if (!event.currentTarget.closest('.column')) {
        result.content.'
            <div class="column" data-gjs-type="column">
                <div class="column-inner">
                    ${dataTransfer.getData(dataTransfer.types[0])}
                </div>
            </div>
        `
}

Error de retorno de código anterior, indicando que DataTransfer no está definido

Por lo que entiendo, podemos personalizar lo que dejamos caer en el lienzo con 'result.content'

Algo así como '''javascript //...

result.contenido = { tipo: 'encabezado' }

o 

'''javascript
//...

result.content = '<div>Reemplazaré el componente arrastrado por defecto</div>'

Lo que no entiendo es cómo envolver el componente arrastrado con elemento/componente.