Proper way to render newline (\n) in a template?

[Victor Hooi]

I have a MongoDB string field that contains escaped newlines ("\n").

My question is, what is the correct way of rendering these as actual newline in a Meteor template?

One approach discussed elsewhere seems to be use a Handlebars helper to do a regex replace of "\n" with "<br>".

However, is that a recommended practice? Or is there another way I should be doing this?

[Daniel Dornhardt - Daniel Dornhardt Development]

Hi,

I guess the question is unclear: A "\n" should be output as a newline inside of the HTML sourcecode (as a line break). But HTML doesn't display "\n" - Linebreaks, you need to either wrap each paragraph in <p>'s or add <br />'s, as you said.

HTML ignores line breaks and multiple white space characters in text, manual breaks in the layout have to be added via markup.

It really depends on your layout.

The issue is with HTML, not with Meteor Templates in general, I recon.

I wrote this nice little package for this: https://github.com/DanielDornhardt/yagni-split-on-newlines

With which you can iterate over each line separately:

{{#each splitOnNewlines someText}}

    <p>{{this}}</p>

{{/each}}

- because I don't like <br />'s in my texts as much as clean paragraphs wherever the user entered breaks manually.

Best wishes

Daniel

Daniel Dornhardt, Daniel Dornhardt Development

dan...@dornhardt.com

+49 152 - 56 17 22 61

--
You received this message because you are subscribed to the Google Groups "meteor-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to meteor-talk...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/meteor-talk/d3ccfae7-0aed-47c7-9aa2-691558050bd0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rob Fallows]

Is there any reason why this data could not be put into a <pre></pre> block?

[Victor Hooi]

Hi,

I'll provide a little more context.

The field is the body text of an email, that has been parsed from an .eml file. I've provided a sample document from the collection below:

meteor:PRIMARY> db.parsed_emails.findOne()
{
        "_id" : ObjectId("54eec93569ca9cacf0d76ea2"),
        "Body" : "Hello,\r\n\r\nI just completed my two-step verification.  Can you please set up the rest\r\nof my G-Mail goodies?\r\n\r\nThank you\r\n_<REMAINDER_TRUNCATED>",
        "To" : "B...@example.org",
        "BOB_Error" : "\r\n\"Could not find a corresponding issue to comment and 'Create a new issue from each email' is not selected.\"\r\n",
        "Sender_Email" : "FOO BAR",
        "Sender_Name" : "foo...@example.com",
        "Subject" : "Re: [FOOBAR-BAR] Account created",
        "Google_Group_URL" : "SANITISED",
        "Datetime" : ISODate("2015-02-25T23:21:43Z")
}

In this case, the "body" field contains \n characters to indicate newlines (and a \r). (This is as per the RFC 2822 email spec).

As you say though, HTML isn't going to render "\n" - it will just print it out as a literal. Hence, it needs to be converted either to <p></p>, or to <br> (If anybody is aware of another option, please let me know.)

So my question is, if I want to render the "body" field in a Meteor template, what is most idiomatic way to do so in Meteor?

Rails and Django both have inbuilt filters to do this - Rails has simple_format

http://api.rubyonrails.org/classes/ActionView/Helpers/TextHelper.html#method-i-simple_format

Django has linebreaks:

https://docs.djangoproject.com/en/1.7/ref/templates/builtins/#std:templatefilter-linebreaks

For Meteor, I did find this package which offers a linebreaksbr helper, which seems to do the job:

https://github.com/msamoylov/meteor-missing-helpers

Is this something that would be an inbuilt part of Meteor? Or is there already an idiomatic way to do this with just the Meteor stdlib?

Cheers,

Victor

[Jan Hendrik Mangold]

On Thursday, 26 February 2015 03:39:45 UTC-8, Victor Hooi wrote:

Hi,

I'll provide a little more context.

The field is the body text of an email, that has been parsed from an .eml file. I've provided a sample document from the collection below:

meteor:PRIMARY> db.parsed_emails.findOne()
{
        "_id" : ObjectId("54eec93569ca9cacf0d76ea2"),
        "Body" : "Hello,\r\n\r\nI just completed my two-step verification.  Can you please set up the rest\r\nof my G-Mail goodies?\r\n\r\nThank you\r\n_<REMAINDER_TRUNCATED>",
        "To" : "B...@example.org",
        "BOB_Error" : "\r\n\"Could not find a corresponding issue to comment and 'Create a new issue from each email' is not selected.\"\r\n",
        "Sender_Email" : "FOO BAR",
        "Sender_Name" : "foo...@example.com",
        "Subject" : "Re: [FOOBAR-BAR] Account created",
        "Google_Group_URL" : "SANITISED",
        "Datetime" : ISODate("2015-02-25T23:21:43Z")
}

Why don't you let CSS do the work?

<style type="text/css">.email-body{white-space: pre-wrap;}</style>

<div  class="email-body">{{Body}}</div>

 This is the same as a PRE tag without changing the font.

[Serkan Durusoy]

It may not be relevant in this context, but in the context of an seo-aware app, the best solution would be to split the text by each \n (ommitting repetitive delimeters) to wrap the pieces with <p> tags.

[David Greenspan]

As others have said, your options are:

1. Use a <pre> tag or CSS white-space

2. Split into lines and put each line in a <p> or <div>: `{{#each lines}}<div>{{this}}</div>{{/each}}`

3. Split on '\n' and join on '<br>'.  If you do this, you must *make sure* to HTML-escape each line to avoid XSS injection attacks.  Before joining, run each line through Blaze._escape (we are planning to have a name for this without an underscore, see https://github.com/meteor/meteor/issues/3267).

I think it's more a matter of web dev style than Meteor idiom, but I would personally pick (1) or (2).

On Thu, Feb 26, 2015 at 5:36 AM, Serkan Durusoy <serkan....@dna-tr.com> wrote:

It may not be relevant in this context, but in the context of an seo-aware app, the best solution would be to split the text by each \n (ommitting repetitive delimeters) to wrap the pieces with <p> tags.

--

You received this message because you are subscribed to the Google Groups "meteor-talk" group.
To unsubscribe from this group and stop receiving emails from it, send an email to meteor-talk...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/meteor-talk/154be11c-ff93-4c07-b615-669f07219314%40googlegroups.com.