New lines are concatenated and not broken, need two lines

[freak4pc]

Describe the bug
When I have a Markdown as follows:

Markdown(
    """
    Test1
    Test2
    Test3
    """
)

I get the following result:

If I add an extra line between them, they get separated:

To me, this seems like the wrong behavior, as you can see even from the markdown rendered here in GitHub:

Test1
Test2
Test3

Is there any way to fix it, or control this behavior?

Thanks :)

Checklist

• I can reproduce this issue with a vanilla SwiftUI project.
• I can reproduce this issue using the main branch of this package.
• This bug hasn't been addressed in an existing GitHub issue.

Steps to reproduce
Shown in problem description

Expected behavior
Shown in problem description

Screenshots
Shown in problem description

Version information

• MarkdownUI: [e.g. 2.0.0, or a commit hash]
• OS: iOS 17.4
• Xcode: 16 Beta 5

Additional context
Add any other context about the problem here.

[Coosis]

Also ran into this issue this morning.
Version: MarkdownUI 2.3.1
Xcode: 16.0 Beta

[gonzalezreal]

Hi @freak4pc,

Thanks for reporting this. There has been some discussion in the past about how MarkdownUI renders single line breaks.

In Markdown, single line breaks within a paragraph are treated as soft line breaks. Soft line breaks are typically rendered as spaces, which is consistent with what a browser would do.

For instance, the following HTML:

<p>foo
baz</p>

Is rendered as:

foo baz

GitHub's behavior varies depending on the context:

• It renders soft breaks as line breaks in issue descriptions and comments, like you demonstrated.
• It renders soft breaks as spaces in md files.

For instance, if you edit the repository's README.md file adding a line break on the first line, nothing changes in the preview.

Edit	Preview

In Markdown, you can use a backslash \ at the end of a line to force a line break within a paragraph.

struct LineBreakView: View {
  var body: some View {
    Markdown {
      """
      Test1\\
      Test2\\
      Test3
      """
    }
  }
}

MarkdownUI also supports the <br /> tag.

struct LineBreakView: View {
  var body: some View {
    Markdown {
      """
      Test1<br />
      Test2<br />
      Test3
      """
    }
  }
}

Unfortunately, there is currently no workaround if you want to avoid changing the text as suggested above.

I don't have the time right now, but it should be feasible to add an environment value to let users configure how a Markdown view renders soft breaks.

[freak4pc]

Hi @freak4pc,

Thanks for reporting this. There has been some discussion in the past about how MarkdownUI renders single line breaks.

In Markdown, single line breaks within a paragraph are treated as soft line breaks. Soft line breaks are typically rendered as spaces, which is consistent with what a browser would do.

For instance, the following HTML:

<p>foo
baz</p>

Is rendered as:

foo baz

GitHub's behavior varies depending on the context:

• It renders soft breaks as line breaks in issue descriptions and comments, like you demonstrated.
• It renders soft breaks as spaces in md files.

For instance, if you edit the repository's README.md file adding a line break on the first line, nothing changes in the preview.

Edit Preview

In Markdown, you can use a backslash \ at the end of a line to force a line break within a paragraph.

struct LineBreakView: View {
  var body: some View {
    Markdown {
      """
      Test1\\
      Test2\\
      Test3
      """
    }
  }
}

MarkdownUI also supports the <br /> tag.

struct LineBreakView: View {
  var body: some View {
    Markdown {
      """
      Test1<br />
      Test2<br />
      Test3
      """
    }
  }
}

Unfortunately, there is currently no workaround if you want to avoid changing the text as suggested above.

I don't have the time right now, but it should be feasible to add an environment value to let users configure how a Markdown view renders soft breaks.

Thanks, appreciate the detailed answer :)
I'm happy to try and work on a PR for this - would you mind directing to me to the place in the code where a soft break is detected / handled ?

[freak4pc]

This seems like a reasonable place to allow configuration via environment, let me know if that strategy feels good to you and I'm happy to cook something up :)

[gonzalezreal]

Thanks for working on this, @freak4pc! I really appreciate it.

I wouldn't add this configuration to the theme. I like the idea of having a soft break mode enum and add it to the environment using a dedicated view modifier.

struct LineBreakView: View {
  var body: some View {
    Markdown {
      """
      Test1
      Test2
      Test3
      """
    }
    .markdownSoftBreakMode(.lineBreak)
  }
}

I will have a look at your PR over the weekend. Thanks again for your contribution!