💬 Answered: Los tramos consecutivos muestran el espac…

Pregunta

He pasado la mayor parte de una tarde intentando depurar esto. Aunque he reducido esto a un caso de prueba pequeño y fácil de reproducir, aún no he encontrado la causa raíz de este problema. Espero que alguien pueda ayudar.

Fíjate en la siguiente plantilla HTML:

<!DOCTYPE html>
<html>
<head>

<style>
cuerpo {
  marje: 0;
}

.navbar-main .main-navigation__list {
  marje: 0;
  relleno: 0; 
}

.navbar-main .main-navigation__list .main-navigation__list-item {
  pantalla: bloque en línea;
}
</style>
</head>

<body>
  <nav class="navbar-main">
    <div>
      <ol class="main-navigation__list">
        <li class="main-navigation__list-item">
          <span>Nuestra solución</span>
        </li>
        <li class="main-navigation__list-item">
          <span>Acerca</span> de
        </li>
      </ol>
    </div>
  </nav>
</body>
</html>

Si lo renderizas en un navegador, se renderiza como:

Fíjate en el espacio en blanco entre "Nuestra solución" y "Acerca de".

Si luego usas el HTML y estilo exactos como plantilla de Grapes, se renderizará como:

Fíjate que el espacio en blanco ya no es visible. El comportamiento esperado es que las uvas rendericen la plantilla de la misma manera que un navegador sin uvas.

JSFiddle para reproducir:

https://jsfiddle.net/szLp8h4n/89/

Cambia 'autorender: 0' por 'autorender: 1' para activar el bug.

¿Podría deberse a que Grapes tiene un analizador HTML y CSS manual, lo que significa que las reglas del DOM o CSS se replican inválidamente en este caso particular? ¿Puedes averiguar dónde falla?

Respuestas (3)

artf• 5 de abril de 2018

Sí, Tom, gracias, creo que una opción configurable (por ejemplo, 'keepWhitespace'?!?) podría ser una buena solución

artf• 1 de abril de 2018

Esto se debe a la limpieza de nodos durante el recorrido https://github.com/artf/grapesjs/blob/dev/src/parser/model/ParserHtml.js#L155-L158

tommedema• 2 de abril de 2018

Gracias@artf, ya veo. Sugeriría eliminar esto o al menos hacerlo configurable (por defecto en true entonces para evitar cambios que se rompan). ¿Aceptarías una residencia permanente por esto?

Los tramos consecutivos muestran el espacio en blanco de forma diferente en el editor de uvas que en una ventana normal

Pregunta

Respuestas (3)

Preguntas y respuestas relacionadas

¿Restringir los elementos arrastrables a los padres?

No se puede restablecer el fondo del cuerpo

Integración con GWT

Rasgo de lista/array

Plugins de pago que cumplen con este problema

Tutoriales relacionados

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Explorar categorías de plugins