How to insert a non-breaking space?

[ezhlobo]

It's not a bug or issue, probably, just a question.

My task is to make a text inside a template better by inserting   and other symbols.

pug`
  p Hello, World!
`

It outputs Hello, World! in browser but expected behavior is to have a real space. Could you help me to leverage this?

[brayhoward]

I think your no-break-space entity just needs spaces around it.

pug`
  p Hello,   World!
`

If not try passing it as a string w/ the unicode number

pug`
  p #{`Hello, ${String.fromCharCode(160)} World!`}
  // or 
  p ${"Hello, \u00A0 World!"}
`

And if all else fails

pug`
  p dangerouslySetInnerHTML={__html: 'First   Second'}
`

Be careful generating html like that though. You can read more about it here

[ezhlobo]

@brayhoward thank you for the answer. I was inspired by your suggestions and found this solution:

pug`
  p= 'Hello,\u00A0World'
`

But why   does not work in general? React supports it by default, but it's not available for us through react-pug...

PS. Why do you add spaces around the non-breaking space? I can't imagine a case for this...

[ezhlobo]

I investigated how it works internally (I mean this package and babel plugins) and realized, that it's definitely a problem in babel. They transform   to \u00A0 (actually to \xA0) during parsing phase if it's inside JSXText.

This message is just for your information. We still need to figure out the best way to do it for this plugin.

[ezhlobo]

It works from the 5th version.