Line breaks in description boxes

[jessyclubsoda]

We are having some problems inserting line breaks into text boxes.

It says in the guide that we should be able to use break tags to do so for venue descriptions (and I assumed other text boxes across the site).

However, these don't seem to be working on the staging or live site.

Normally this isn't a problem because venue description boxes accept the enter key but brand description boxes do not, and they won't accept break tags either.

Some images below: Here I just tried to use the enter key in the text box in the way that we can with venue descriptions But no breaks came up

Here I tried to use break tags

But no breaks came up

I'm not sure if this is either because 1. I'm using break tags wrong or 2. The text boxes aren't accepting them Ideally it would be best if the brand description boxes just accepted the enter key in the way they do for venues but otherwise it'd be great if they could have some paragraphing possible

Either way it doesn't currently seem to be working as the guide suggests it would

[SimonLab]

A few paths in mind to investigate:

• Are the line break properly saved in Postgres (are they removed on saved?)

• Is the drink description retrieved from Postgres the correct one and not an older one which don't have line breaks

• Are line breaks properly interpreted/displayed on the page? Do we need to call the raw function for example? see https://hexdocs.pm/phoenix_html/Phoenix.HTML.html

• Check the difference between the venue description input and the text inputs for brand and drinks, are the same inputs used for all the description?

[SimonLab]

• The inputs for drinks, venues and brands are all created with textareas
• When the description is saved, all html tags are removed (ie <br>, <h1>,...) and new lines in the description are saved as \n in Postgres
• All descriptions are displayed in a p tag but only the venue description converts \r to <br>

Now looking at how venues do this conversion (maybe with text_to_html function ?) and how to apply the same logic to brands and drinks:

The add_line_breaks function is used to convert new line to <br> tag in the venue: https://github.com/club-soda/club-soda-guide/blob/4eafe921cc0dbbebfee559270b03d60852493e62/lib/cs_guide_web/templates/venue/info.html.eex#L25

and the function is implemented here: https://github.com/club-soda/club-soda-guide/blob/4eafe921cc0dbbebfee559270b03d60852493e62/lib/cs_guide_web/views/venue_view.ex#L58-L60

For the brand description we can use directly the text_to_html function:

<p class="pv3 lh5"><%= raw text_to_html(@brand.description) %></p

However for the drinks, the description is displayed with Elm, so we need to find a way to display new lines with Elm. Instead of rewriting all the Elm code for the description we could use another solution with css: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Applying this style to the description will display the new line correctly with Elm

[jessyclubsoda]

Thanks for taking a look at this @SimonLab

Looking on staging it seems that we can still only do one line break e.g. we can't create paragraphs Here even though I've used the enter button twice it only gives me one break

Similarly < br > tags seem to have no effect

[SimonLab]

Thanks for spotting that @jessyclubsoda . This is due to the text_to_html function(https://hexdocs.pm/phoenix_html/Phoenix.HTML.Format.html#text_to_html/2)

So new paragraphs (

tags) are created if there are 2 or more consecutive lines. This means that empty paragraph are removed. If you add a space in front of the new line then a new paragraph will be created to only display the space.

I think that's why the add_line_breaks helper function is used for the venues' description and not the text_to_html function: https://github.com/club-soda/club-soda-guide/blob/75a3446dd2814bf15a7210a2533a0146311f99aa/lib/cs_guide_web/views/venue_view.ex#L58-L60 I'll do a bit more test but I think the solution is to reuse the add_line_breaks function