Add hyperlinks in messages

Author: alxlion

CHANGELOG.md

@@ -3,6 +3,8 @@
 ### Fixes and improvements
 
 - Improve performance of presentation to load slides faster
+- Fix manager layout on small screens
+- Add clickable hyperlinks in messages
 
 ### v.2.3.0
 

lib/claper_web/helpers.ex

@@ -0,0 +1,17 @@
+defmodule ClaperWeb.Helpers do
+  def format_body(body) do
+    url_regex = ~r/(https?:\/\/[^\s]+)/
+
+    body
+    |> String.split(url_regex, include_captures: true)
+    |> Enum.map(fn
+      "http" <> _rest = url ->
+        Phoenix.HTML.raw(
+          ~s(<a href="#{url}" target="_blank" class="cursor-pointer text-primary-500 hover:underline font-medium">#{url}</a>)
+        )
+
+      text ->
+        text
+    end)
+  end
+end

lib/claper_web/live/event_live/manageable_post_component.ex

@@ -119,7 +119,7 @@ defmodule ClaperWeb.EventLive.ManageablePostComponent do
           <% end %>
 
           <p class="text-xl">
-            <%= @post.body %>
+            <%= ClaperWeb.Helpers.format_body(@post.body) %>
           </p>
         </div>
       </div>

lib/claper_web/live/event_live/post_component.ex

@@ -76,7 +76,7 @@ defmodule ClaperWeb.EventLive.PostComponent do
               ) %>
             </span>
           </div>
-          <p><%= @post.body %></p>
+          <p><%= ClaperWeb.Helpers.format_body(@post.body) %></p>
 
           <div class="flex h-6 text-sm float-right text-white space-x-2">
             <%= if @post.like_count > 0 do %>
@@ -176,7 +176,7 @@ defmodule ClaperWeb.EventLive.PostComponent do
             </div>
           <% end %>
 
-          <p><%= @post.body %></p>
+          <p><%= ClaperWeb.Helpers.format_body(@post.body) %></p>
 
           <div class="flex h-6 text-xs float-right space-x-2">
             <%= if @reaction_enabled do %>
@@ -273,7 +273,5 @@ defmodule ClaperWeb.EventLive.PostComponent do
          end))
   end
 
-  defp pinned?(post) do
-    post.pinned == true
-  end
+  defp pinned?(post), do: post.pinned
 end