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.