Twig component renders incorrectly from the docs

Steps to reproduce the issue

1. clone https://github.com/uandco/fractal-twig-issue
2. run npm install
3. run fractal start --sync

The navigation component shows up OK when viewed as a component or rendered via another component (I rendered it in the example component)

The rendering fails when rendered from the docs (HTML code is displayed). I tried to use the twig engine for docs too but get the same result.

Reproduces how often:

100%

Reduced test case

https://github.com/uandco/fractal-twig-issue

Context

• Fractal version: 1.3.0
• Node version: 10.15.1
• OS: MacOS 10.14.6

[mihkeleidast]

If some HTML is indented and has an empty line before it, our markdown parser will convert that to a code block, for example:

some text

    <div>this is now a code block</div>

In your component, your macro ends with a newline:

...
</ul>
{% endmacro %}

These newlines are also visible when viewing the component source in the browser.

To remove the newlines and fix the issue, an inline spaceless helper can be added to the endmacro tag:

...
</ul>
{%- endmacro %}

This will trim the ending newline from the macro output & fix the issue.

[mel-miller]

I’m trying to figure out why this is happening to some blocks of code and not others. I don’t have a huge sample size yet, but this only seems to be happening when the base templates (in my case Twig) are multi-line and have a for loop in them.