No se pueden mostrar bloques en la barra lateral derecha

Versión: 0.14.62

¿Puedes reproducir el error de la demo?

• Sí
• No No soporta Vue.js ni NPM

¿Cuál es el comportamiento esperado? Bloques para mostrar en la barra lateral derecha con el responsable de estilo

Describe el error detallado Estoy intentando que el gestor de bloques aparezca en la barra lateral derecha, pero no importa dónde coloque el div de bloques, lo pone fuera de esa barra lateral aunque lo ponga justo debajo del gestor de estilos/contenedor.

¿Cuál es el comportamiento actual? Mostrará tanto por encima como por debajo de la división de #gjs

¿Puedes adjuntar capturas de pantalla, screencasts o una demo en directo?

• Sí (adjuntar)
• No

https://imgur.com/a/ca8Lzf8

Código de App.vue

<template>
  <div class="base">
    <div class="panel__top">
      <div class="panel__basic-actions"></div>
      <div class="panel__devices"></div>
    </div>
    <div class="panel__right">
      <div class="styles-container"></div>
      <div id="bloques"></div>
    </div>
    <div class="editor-row">
      <div class="editor-canvas">
        <div id="gjs">
          <!-- <h1>¡Componente Hello World!</h1> -->
        </div>
      </div>
    </div>
    <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
  </div>
</template>

<script>
Importen uvas de 'uvasjs'
importar uvasjsblocksbootstrap4 de 'grapesjs-blocks-bootstrap4'
exportar default {
  Nombre: 'App',
  data () {
    return {

}
  },
  montado(){
    const editor = grapesjs.init({
      Indica dónde iniciar el editor en el editor. También puedes aprobar un HTMLElement
      Contenedor: '#gjs',
      Consigue el contenido del lienzo directamente del elemento
      Como alternativa, podríamos usar: 'components: '<h1>¡Hello World Component!</h1>' `,
      fromElement: cierto,
      Tamaño del editor
      Altura: '1000px',
      Ancho: 'Auto',
      Desactiva el gestor de almacenamiento por el momento
      storageManager: false,
      Plugins: ['grapesjs-bloques-bootstrap4'],
      Plugins: [grapesjsblocksbootstrap4],
      pluginsOpts: {
        'grapesjs-bloques-bootstrap4': {
          bloqueos: {
            // ...
          },
          bloqueCategorías: {
            // ...
          },
          Etiquetas: {
            // ...
          },
          // ...
        }
      },
      lienzo: {
        Estilos: [
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'
        ],
        guiones: [
          'https://code.jquery.com/jquery-3.3.1.slim.min.js',
          'https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js',
          'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'
        ],
      },
      Permite la creación de "bloques"
      blockManager: {
        appendTo: '#blocks',
        Bloqueos: [
          {
            ID: 'Sección', // ID es obligatorio
            label: '<b>Section</b>', // Puedes usar HTML/SVG dentro de las etiquetas
            atributos: { Class:'GJS-Block-section' },
            Contenido: '<section>
              <h1>Este es un título sencillo</h1>
              <div>Esto es solo un texto de Lorum: Lorem ipsum dolor sit amet</div>
            ',</section>
          }, {
            id: 'texto',
            etiqueta: 'Texto',
            contenido: '<div data-gjs-type="text">Inserta tu texto aquí</div>',
          }, {
            id: 'imagen',
            etiqueta: 'Image',
            Selecciona el componente una vez que se haya soltado
            select: cierto,
            Puedes pasar componentes como JSON en lugar de una simple cadena HTML,
            En este caso también usamos un tipo de componente definido llamado 'imagen'
            Contenido: { Tipo: 'Imagen' },
            Esto activa un evento 'activo' en componentes caídos y en la 'imagen'
            reacciona abriendo el AssetManager
            ACTIVAR: Cierto,
          }, {
            id: 'botón',
            etiqueta: 'Botón',
            contenido: '<tipo de botón="botón" clase="btn btn-lg btn-info">Info</button>',
            estilo: {
              Altura: '35px',
              Ancho: '70px'
            },
          }
        ]
      },
    });
    editor. Panels.addPanel({
      id: 'panel-top',
      EL: '.panel__top',
    });
    editor. Panels.addPanel({
      id: 'Acciones-básicas',
      EL: '.panel__basic-acciones',
      botones: [
        {
          Id: 'visibilidad',
          activo: true, // activo por defecto
          NombreClase: 'btn-toggle-borders',
          etiqueta: 'Borders',
          comando: 'sw-visibility', // Comando incorporado
        }, {
          id: 'exportar',
          NombreClase: 'btn-open-export',
          etiqueta: 'Exportación',
          comando: 'export-plantilla',
          contexto: 'export-plantilla', // Para agrupar el contexto de botones del mismo panel
        },
      ],
    });
  }
}
</script>

<style>
#gjs {
  familia tipográfica: 'Avenir', Helvetica, Arial, sans-serif;
  -suavizado de fuentes webkit: antialiasado;
  -moz-osx-font-suavizado: escala de grises;
  text-align: center;
  color: #2c3e50;
  Margen arriba: 60px;
  borde: 3px sólido #444;
}

/* Reiniciar algo de estilo predeterminado */
.gjs-cv-canvas {
  arriba: 0;
  ancho: 100%;
  altura: 100%;
}

.gjs-block {
  Ancho: Auto;
  Altura: Auto;
  Altura mínima: Auto;
}

.panel__top {
  relleno: 0;
  ancho: 100%;
  pantalla: flex;
  posición: inicial;
  justificar-contenido: centro;
  justificar-contenido: espacio-entre;
}

.panel__basic-acciones {
  posición: inicial;
}

.panel__right {
  Base flexible: 230px;
  posición: relativa;
  desbordamiento: auto;
}

.panel__devices {
  posición: inicial;
}
</style>

Package.json

{
  "nombre": "Grapejs-vue-test-vue-2",
  "version": "0.1.0",
  "Privado": Cierto,
  "guiones": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "pelusa": "vue-cli-service lint"
  },
  "dependencias": {
    "core-js": "^3.6.5",
    "uvapesjs": "^0.14.62",
    "grapesjs-blocks-bootstrap4": "^0.2.3",
    "vue": "^2.6.11",
    "vue-grapesjs": "^0.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "Raíz": Cierto,
    "env": {
      "nodo": verdadero
    },
    "extiende": [
      "plugin:vue/essential",
      "Eslint:Recomendado"
    ],
    "parserOptions": {
      "analizador": "babel-eslint"
    },
    "reglas": {}
  },
  "browserslist": [
    "> 1%",
    "últimas 2 versiones",
    "No muerto"
  ]
}