Blog Site 02 - Loading Tags/Text Wrap

I wanted to do a quick update to the code for the blog website. I noticed that whenever I wanted to edit a post I would lose all the tags and have to reset them.

To start I already had a function that would set the tags (select-able) for a post that had a atom, value pair for selected.

defp tag_options(selected_ids \ []) do

list_tags()
|> Enum.map(fn tag ->
  [key: tag.name, value: tag.id, selected: tag.id in selected_ids]
end)

end
As you can see there is the selected: tag.id in selected_ids

With that I just need to send in the tags that are part of that post with every time I edit. Ill just put the entire edit function here:

def edit(conn, %{“id” => id}) do

post =
  Posts.get_post!(id)
  |> Repo.preload([:tags])
 # preloaded all the needed info

changeset = Posts.change_post(post)
# need to take the list of tags and grab only the tag.id
selected_tags = Enum.map(post.tags, fn tag -> tag.id end)

render(conn, :edit,
  post: post,
  changeset: changeset,
  tags: tag_options(selected_tags)
)

end

It was really as simple as that.

Now let’s work on a bounding box for the content in a post. When dealing with the text box no dealing with the newlines I had to add this line to the content line:

<:item title=”Content”>

  <pre><%= @post.content %></pre>
</:item>

This made sure that:
Preserve all white space (including tabs and line breaks).
Use monospaced fonts (by default).
Disable wrapping, meaning if a line is too long, it will overflow the container or cause horizontal scrolling.

Which created an issue with the long lines that don’t have a new line will overflow, but still solved the issue with new-lines being seen.

To deal with the new issue I added this to the <pre>
class=”whitespace-pre-wrap break-words”

This is a tailwind version of a CSS that does:
<%!– CSS version –%>
white-space: pre-wrap;
<%!– Tailwind –%>
whitespace-pre-wrap

<%!– CSS version %>
overflow-wrap: break-word;
<%!– Tailwind –%>
break-words

Now that we see the difference between the 2 we can see what is happening:

pre does the same before but adding in the pre-wrap makes sure that the content wraps.

break-word
This makes sure that any long on-space word will be broken up.