[solved] Autoform - textarea paragraphs/linebreaks not visible?

help
1

I feel like I’m missing something simple!
I’m using autoform to let users create entries.

#Problem
When I fill a textarea with paragraphs and output it in one of my templates the DOM looks like this:

<div class="description">
At vero eos et accusam et justo duo dolores et ea rebum.  

At vero eos et accusam et justo duo dolores et ea rebum.  

At vero eos et accusam et justo duo dolores et ea rebum. 
</div>

Unfortunately on the frontend these linebreaks are not visible. Its just on big paragraph.

Whats happening here?
How can I change this behavior?

Thanks a lot!

2

What do you mean by “output”? Do you render this as html? Or as a string in textarea?

If you render this as html, html doesn’t treat this as linebreaks. To achieve linebreaks you need to use actual paragraphs like:

<div class="description">
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
</div>

Or at least <br>, but that’s not a good practice.

3

Hi @brajt,

sorry, I think I was a bit unclear. Basically this is what I’m doing:

###1. The Schema:

Products.attachSchema(new SimpleSchema({
    description: {
        type: String,
        label: "Description",
        optional: false,
        max: 1000
    }
}));

###2. The Form:

{{> afFieldInput name='description' id='description' rows=12 placeholder="Max: 1000 Characters"}}

###3. The Output:

<template name="product_outputfield_description">
    <div class="item">{{description}}</div>
</template>

#Problem
This generally works as intended. Only that, when a user writes a longer Text with a few paragraphs those paragraphs never show up in the output. I’m not sure how to approach this.

4

If you want to show the user’s input as separate paragraphs in place of his linebreaks, you need to transcribe his input into html code (or use some editor / package that does it for you).

You can do this f.e. this way:

description = '<p>' + description.replace('\n', '</p><p>');
description.slice(0, -3); //cuts off the last <p>

Do this before rendering, not before putting user’s input into database. Otherwise you’ll see <p> in textarea when the user edits his description.

Remember to use triple brackets {{{description}}} to render with html.

1 Like
5

Hey @brajt,

awesome, thanks for this!

I’ve modified it like so:
description = description.replace(/(?:\r\n|\r|\n)/g, '<br />');

Thank you for mentioning the triple brackets! Would have forgotten that! :smile:

6

If you want to do this with <br>, it’s fine for your own projects. Just remember not to do it when you work at some professional company or during the job interview, they won’t love it.

<br> is to be used for different purpose than creating paragraphs (f.e. to divide postal address or poetry verses into separate lines) and it’s considered a bad practice. You also lose the ability to specify common paragraph related css settings, such as text-indent or bottom-margin.

7

You could also parse it as markdown.

I can give you an example on this if needed.

8

Now, when on proper keyboard, little example:

I used package chuangbo:marked.

Then, on a template:

{{#markdown}} {{description}} {{/markdown}}