Preserve newline in text area with Ruby on Rails

Question

To practice Ruby on Rails, I am creating a blog which includes a text area (following Mackenzie Child's tutorial). When the text is submitted, all of the newlines are removed. I know variations of the question have been asked already, but I have been unable to replicate any of the results despite an entire day trying. I am not very familiar with JQuery.

Is there a set of steps that will preserve the newlines?

_form.html.erb

<div class="form">
    <%= form_for @post do |f| %>
        <%= f.label :title %><br>
        <%= f.text_field :title %><br>
        <br>
        <%= f.label :body %><br>
        <%= f.text_area :body %><br>
        <br>
        <%= f.submit %>
    <% end %>
</div>

posts_controller.rb

class PostsController < ApplicationController before_action :authenticate_user!, except: [:index, :show]

def index
    @posts = Post.all.order('created_at DESC')
end

def new
    @post = Post.new
end

def create
    @post = Post.new(post_params)

    @post.save
    redirect_to @post
end

def show
    @post = Post.find(params[:id])
end

def edit
    @post = Post.find(params[:id])
end

def update
    @post = Post.find(params[:id])

    if @post.update(params[:post].permit(:title, :body))
        redirect_to @post
    else
        render 'edit'
    end
end

def destroy
    @post = Post.find(params[:id])
    @post.destroy

    redirect_to posts_path
end

private

    def post_params
        params.require(:post).permit(:title, :body)
    end
end

Notch

Answer 1

Newlines are actually being preserved(as \r\n), you just don't see them in your index/show views.

In these views, call simple_format on your post.body field to replace \ns with <br>s(HTML newlines):

simple_format(post.body)

From docs:

simple_format(text, html_options = {}, options = {}) public

Returns text transformed into HTML using simple formatting rules.
Two or more consecutive newlines(\n\n) are considered as a paragraph and wrapped 
in <p> tags. One newline (\n) is considered as a linebreak and a <br /> tag is 
appended. This method does not remove the newlines from the text.

Tyrosine

Thank you so much! I spent all day trying to figure this out. I can't believe the solution was this easy. – Notch

Everytime I hit enter, it leaves a linebreak. Anyway to avoid this? – Notch

@JonRoby sorry, I am not sure what do you mean. If you have new question, please ask it by clicking Ask Question button and describe your issue showing related code. Include a link to this question if it helps provide context. – Tyrosine

Wow what a really great answer this is! I've been doing it manually all this years. – Tralee

I've been working in Rails for 7 years and didn't know I could do this! Thank you – Gareri

Answer 2

An easier (and dare I say better) way to handle this is to apply this CSS style to the paragraph or similar HTML element that you use to display user input inside of.

white-space: pre-wrap;

One advantage is this will persevere newlines just like simple_format without adding the extra formatting that it applies, such as turning two consecutive newlines characters into a paragraph element or automatically adding newlines to the end of the content. Just switched from using simple_format to this myself in a similar project. Way more predictable.

Bozuwa

For some reason, I was struggling to incorporate simple_format in the active admin. So fixed it via css, thanks – Parade

Glad it was helpful to you. I was experiencing issues with some of the extra formattings it was applying causing a negative impact on my project so searched out this solution. – Bozuwa

In addition to solving the line break, I saw this css-solution also kept indentations done in the form, that simple_format didn't add at least per default. – Warsle

Answer 3

I agree with Gino's answer, except I find that using:

white-space: pre-line

instead helps me to eliminate unnecessary whitespace at the beginning of the first line of my emails.

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Indicative

Worked in my case. Encountered first line space in pre-wrap, break-spaces, pre (overflow). – Pettaway