[BUG] Consecutive spans render whitespace differently in grapes' editor than in ordinary window

Question

I've spent the greater part of an afternoon trying to debug this. While I have reduced this to a small and easy to reproduce test case, I didn't find the root cause of this issue yet. Hopefully someone can help.

Note the following HTML template:

<!DOCTYPE html>
<html>
<head>

<style>
body {
  margin: 0;
}

.navbar-main .main-navigation__list {
  margin: 0;
  padding: 0; 
}

.navbar-main .main-navigation__list .main-navigation__list-item {
  display: inline-block;
}
</style>
</head>

<body>
  <nav class="navbar-main">
    <div>
      <ol class="main-navigation__list">
        <li class="main-navigation__list-item">
          <span>Our solution</span>
        </li>
        <li class="main-navigation__list-item">
          <span>About</span>
        </li>
      </ol>
    </div>
  </nav>
</body>
</html>

If you render this in a browser, it renders as:

Notice the whitespace between "Our solution" and "About".

If you then use the exact HTML and style as Grapes's template, it will render as:

Notice that the whitespace is now not visible. The expected behavior is for grapes to render the template in the same manner as a browser does without grapes.

JSFiddle to reproduce:

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

Change autorender: 0 to autorender: 1 to trigger the bug.

Could this be because Grapes has a manual HTML and CSS parser, meaning that the DOM or CSS rules are replicated invalidly in this particular case? Can you figure out where it goes wrong?

Answers (3)

artf• April 5, 20181 reactions

Yeah Tom thanks, I think a configurable option (eg. keepWhitespace?!?) might be a good solution

artf• April 1, 20180 reactions

This is due to the node cleaning while traversing https://github.com/artf/grapesjs/blob/dev/src/parser/model/ParserHtml.js#L155-L158

tommedema• April 2, 20180 reactions

Thanks @artf, I see. I would suggest removing this or at least making this configurable (defaulting to true then to prevent breaking changes). Would you accept a PR for this?

[BUG] Consecutive spans render whitespace differently in grapes' editor than in ordinary window

Question

Answers (3)

Related Questions and Answers

[BUG] Link elements are not copyable/deletable

[BUG]: RTE Editor not scrolling

[Bug]: Grapes change page position

Greapes editor cannot read "template" tag

Paid Plugins That Match This Issue

Browse Plugin Categories