Markdown compiler handling line-breaks wrong

[NQNStudios]

What happened

When compiling Markdown files, Fractive is inserting a <br> element for every newline in the Markdown file. Here's the proper way to handle newlines.

[invicticide]

Try removing the softbreak: "<br/>" from the commonmark.HtmlRenderer constructor near the top of Compiler.ts, or alternately changing it to something else per the commonmark.js readme.

[invicticide]

I added a hardLineBreaks option to fractive.json which controls this behavior. It's enabled by default which preserves the existing behavior without needing to rewrite our examples/documentation. It also feels easier and more intuitive to work with (to me), specifically for use cases like this:

{{Start}}

Here is some text in a regular ol' paragraph. This part is fine.

[Do a thing]({@DoThingA})
[Do another thing]({@DoThingB})

I find this sort of usage very natural. With hardLineBreaks:true this renders the links on two separate lines (not paragraphs) which is what I expect based on the Markdown source formatting:

Do a thing
Do another thing

With hardLineBreaks:false this renders the links side-by-side because the \n in the rendered HTML source is collapsed to a single space by the browser:

Do a thing Do another thing

That's fixable by putting the two trailing spaces after the first link, which is technically correct per the official Markdown spec, but is also counterintuitive and invisible, which makes me kind of hate it. 😒

Anyway, with the above-referenced commit this behavior can be switched on or off in fractive.json on a per-story basis so the only thing really left to resolve is what the default setting should be and why.

[NQNStudios]

You're right about the use-case where links are separated by line breaks. It's what I've been doing, and when I tried switching to markdown-it-attrs, those links appearing on the same line was one of the major things that bothered me.

On the other hand, if using a text editor with automatic line wrapping (which is really nice), Fractive devs will end up with a story where line breaks are placed according to their text editor's settings, making responsive design impossible. Which is a huge problem for making webgames.

The best of both worlds would be adopting hard line breaks as the default, but hacking in some kind of solution for the link situation. Not pretty, but better for an average Fractive dev.

[NQNStudios]

Or, just turn every set of links into an unordered list.

* [Do a thing]({#DoIT})
* [Do another thing]({#DoTHAT})