Los componentes en modal personalizado no son editables

Hola, estoy intentando añadir un bloque modal personalizado a mi proyecto y quiero cambiar el contenido de este modal también con arrastrar y soltar. Aquí tienes el código de mi bloque modal: '''javascript editor. BlockManager.add("modal", { etiqueta: "Modal", categoría: "Básico", Contenido: { Contenido: ' <tipo de botón="botón" clase="modal-abierto-botón">Modal abierto</button> <div class="modal-wrapper"> <div class="modal-content"> <div class="modal-content__header"> <h3 class="modal-content__title">Encabezado modal</h3> <tipo de botón="botón" clase="modal-content__close-botón">×</button> </div> <p>Algo de texto en modal...</p> </div> </div> <style> .modal-wrapper { pantalla: ninguna; posición: fija; índice z: 100; Tapa de acolchado: 100px; izquierda: 0; arriba: 0; ancho: 100%; altura: 100%; desbordamiento: auto; color de fondo: RGBA (0,0,0,0,4); }

.modal-content { Color de fondo: #fefefe; margen: auto; relleno: 20px; borde: 1px sólido #888; ancho: 80%; }

.modal-content__header { posición: relativa; pantalla: flex; justificar-contenido: espacio-entre; Alinear-elementos: Arranque flexible; }

.modal-content__title { ancho: 100%; marje: 0; relleno: 0; }

.modal-content__close-button { color: #aaaaaa; relleno: 4px; tamaño de fuente: 24px; Peso-fuente: negrita; frontera: ninguna; Color de fondo: transparente; cursor: puntero; }

.modal-content__close-botón:pasa el cursor, .modal-content__close-button:focus { color: #000; } </style> `, script() { const button = this.querySelector(".modal-open-button"); const modalWrapper = this.querySelector(".modal-wrapper"); const modalCloseButton = this.querySelector( ".modal-content__close-button" );

button.addEventListener("click", () => { modalWrapper.style.display = "bloque"; });

modalCloseButton.addEventListener("click", () => { modalWrapper.style.display = "ninguno"; }); } } });

El problema de este código es que grapesjs envuelve todo el contenido con el envoltorio de div cuando el usuario lo deja en lienzo y todo lo que hay dentro de este div no es editable, seleccionable, droppable, etc. Aquí tienes el enlace para [demo](https://codesandbox.io/s/grapes-modal-block-067rq?file=/src/index.js).
Pasos para reproducirse:
1. Dejar caer bloque modal en el lienzo
2. Haz clic en el botón "Abrir modal"
3. Intenta editar o eliminar algo en contenido modal
Además, no puedo seleccionar el botón "Abrir modal" para cambiar su estilo o texto.

¿Puedes ayudarme con esto o quizá hay otro enfoque para implementar modales personalizados?
Necesito funcionalidad para abrirlo y cerrarlo y modificarlo.