Optional Newline support

[matthewmueller]

Not sure the best place to put this issue, but it'd be good to have optional newline support built into the JSX compiler.

Here's an example:

render: function () {
  return (
     <Markdown preserveWhitespace="true">
       # Hi whitespace is important in this tag

       Please add an option to keep all my spaces!
     </Markdown>
  )
}

I see this as giving developers more power to create better elements.

[mathieumg]

You can do:

render: function () {
  return (
     <Markdown>
       {"# Hi whitespace is important in this tag

       Please add an option to keep all my spaces!"}
     </Markdown>
  )
}

[sophiebits]

Not quite right, but you can use an ES2015 template string, which can contain newlines:

render: function () {
  return (
     <Markdown>
       {`# Hi whitespace is important in this tag

       Please add an option to keep all my spaces!`}
     </Markdown>
  )
}

We're unlikely to do anything beyond this.

[mathieumg]

@spicyj I stand corrected. Worthy of note is also that it will only "work" inside a <textarea> (which I assume <Markdown> wraps, so it's fine), in other cases the newlines will show up in the generated source but will have no effect on the page display, which is normal HTML behavior.

[sophiebits]

Whitespace also matters with white-space: pre;.

[matthewmueller]

@spicyj thanks for the help, still wish that handling whitespace was in user land, but this isn't bad.

Whitespace also matters with white-space: pre;.

I tried this, but may have done it wrong, you're suggesting:

<Markdown style={{ whiteSpace: "pre" }}>
  # Hi whitespace is important in this tag

  Please add an option to keep all my spaces!
</Markdown>

?

[sophiebits]

@matthewmueller No, you need the backticks. (@mathieumg was saying that whitespace is collapsed (by the browser) in most HTML tags with the notable exception of textarea so I just pointed out that changing the white-space CSS on other tags will also preserve space.)