¿Cómo hacer que el carrusel bootstrap 4 funcione con grapesjs?

He conseguido construir con éxito un pequeño generador de arrastrar y soltar con grapesjs. Funciona genial. El problema que tengo es cuando arrastro un carrusel bootstrap dentro del constructor. El carrusel funciona como se espera en una página normal. Pero cuando estoy dentro del framework, solo aparece la primera imagen y no puedo usar los controles para cambiar de una imagen a otra. He mirado el plugin de Lory pero me encantaría poder hacerlo con Bootstrap. ¿Algún experto en grapesjs que pueda ayudar?

Consulta mi constructor aquí en Codepen: Ejemplo

Para reproducir: Bloques abiertos. Luego arrastra y suelta uno de los carruseles dentro del constructor.

grapesjs

function customPlugin(editor){
    diapositiva1
    editor. BlockManager.add('slide1', {
    categoría: 'Carrusel',
    etiqueta: '<h1><i class="far fa-play-circle fa-lg"></i></h1> Solo diapositivas',
    contenido : '<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg"> </div> </div> </div>'
    });
    diapositiva2
    editor. BlockManager.add('slide2', {
    categoría: 'Carrusel',
    etiqueta: '<h1><i class="far fa-play-circle fa-lg"></i></h1> Slides With Controls',
    contenido : '<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(45).jpg" alt="Primera diapositiva"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(46).jpg" alt="Segunda diapositiva"> </div> <div class="carousel-item"> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(47).jpg" alt="Tercera diapositiva"> </div> </div> <a onclick="prevSlide()" class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span onclick="prevSlide()" class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Anterior</span> </a> <a onclick="nextSlide()" clase="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>'
    });
  
}
    
var editor = grapesjs.init({
    contenedor: '#gjs_container',
    storageManager: {
    Tipo: 'A distancia',
    autoguardado: cierto,// Almacena datos automáticamente
    autoload: true,// Autoload los datos almacenados en init
    pasos Antes de guardar: 1,
    urlStore: 'consultas/save_webpage.php',
    urlLoad: 'consultas/load_webpage.php',
    Para parámetros/encabezados personalizados en peticiones
    params: { _some_token: '' },
    encabezados: { Autorización: 'Basic' },
    },
    Plugins: [
    customPlugin
    ],
    pluginsOpts: {},
    lienzo: {
    Estilos: [
    'https://use.fontawesome.com/releases/v5.8.2/css/all.css',
    'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap',
    'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css',
    'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css',
    ],
    guiones: [
    'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js',
    'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js',
    ],
    }
    });