BUG: Components in custom modal isn't editable

Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my modal block:

editor.BlockManager.add("modal", {
  label: "Modal",
  category: "Basic",
  content: {
    content: `
      <button type="button" class="modal-open-button">Open modal</button>
      <div class="modal-wrapper">
        <div class="modal-content">
          <div class="modal-content__header">
            <h3 class="modal-content__title">Modal header</h3>
            <button type="button" class="modal-content__close-button">&times;</button>
          </div>
          <p>Some text in the Modal..</p>
        </div>
      </div>
      <style>
        .modal-wrapper {
          display: none;
          position: fixed;
          z-index: 100;
          padding-top: 100px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
        }

        .modal-content__header {
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
        }

        .modal-content__title {
          width: 100%;
          margin: 0;
          padding: 0;
        }

        .modal-content__close-button {
          color: #aaaaaa;
          padding: 4px;
          font-size: 24px;
          font-weight: bold;
          border: none;
          background-color: transparent;
          cursor: pointer;
        }

        .modal-content__close-button:hover,
        .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 = "block";
      });

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

The problem with this code is that grapesjs wraps whole content with div wrapper when user drops it on canvas and everything inside this div isn't editable, selectable, droppable etc. Here's link for demo. Steps to reproduce:

1. Drop modal block on canvas
2. Click "Open modal" button
3. Try to edit or drop something in modal content Also I cannot select "Open modal" button to change it styles or text.

Can you help me this or maybe there is another approach how to implement custom modal? I need functionality to open and close it for modifying.