Improve html tree component

lib/outlook_web/components/html_tree_component.ex

@@ -3,6 +3,7 @@ defmodule OutlookWeb.HtmlTreeComponent do
    use Phoenix.Component
   # use OutlookWeb, :html
   import OutlookWeb.CoreComponents
+  import OutlookWeb.ViewHelpers
 
   alias Phoenix.LiveView.JS
 
@@ -15,10 +16,14 @@ defmodule OutlookWeb.HtmlTreeComponent do
   end
 
   def attributes(assigns) do
-    ~H"&nbsp; <%= @name %>=&quot;<%= @value %>&quot;"
+    ~H"&nbsp; <%= @name %>=&quot;<%= elipsed_text(@value, 16) %>&quot;"
   end
 
-  def tnode(%{node: %{status: _}} = assigns), do: ~H"<%= String.slice(@node.content, 0..20) %><%= if String.length(@node.content) > 20 do %>...<% end %><br>"
+  def tnode(%{node: %{status: _}} = assigns) do
+    ~H"""
+    <span title={@node.content} {@node.eph.attributes}><%= elipsed_text(@node.content, 30) %></span><br>
+    """
+  end
 
   def tnode(assigns) when assigns.node.type == :element do
     ~H"""
@@ -32,7 +37,7 @@ defmodule OutlookWeb.HtmlTreeComponent do
 
   def tnode(assigns) when assigns.node.type == :text do
     ~H"""
-     "<%= String.slice(@node.content, 0..35) %><%= if String.length(@node.content) > 35 do %>..."<% end %><br>
+     "<%= elipsed_text(@node.content, 30) %><br>
     """
   end
 

lib/outlook_web/live/article_live/new_components.ex

@@ -45,7 +45,7 @@ defmodule OutlookWeb.ArticleLive.NewComponents do
     ~H"""
       <div>Review Translation Units</div>
       <div class="flex gap-4">
-        <div id="html-tree" class="w-96 overflow-auto whitespace-nowrap">
+        <div id="html-tree" class="article w-96 overflow-auto whitespace-nowrap">
           <.render_tree tree={@raw_internal_tree} ></.render_tree>
         </div>
         <div id="partition-preview" class="article show-boundary overflow-auto h-full">

lib/outlook_web/view_helpers.ex

@@ -18,4 +18,13 @@ defmodule OutlookWeb.ViewHelpers do
   def strip_links(html) do
     raise "Yet to be implemented!"
   end
+
+  def elipsed_text(text, length) do
+    if String.length(text) < length do
+      text
+    else
+      part_length = (length - 3) / 2  |> trunc()
+      "#{String.slice(text, 0..part_length)} … #{String.slice(text, -part_length..-1)}"
+    end
+  end
 end