Sanitize HtmlTreeComponent

lib/outlook_web/components/html_tree_component.ex

@@ -6,52 +6,40 @@ defmodule OutlookWeb.HtmlTreeComponent do
 
   alias Phoenix.LiveView.JS
 
-  attr :tree_items, :list, required: true
+  attr :tree, :list, required: true
 
-  def treeview(assigns) do
+  def render_tree(assigns) do
     ~H"""
-      <div class="font-mono whitespace-nowrap">
-      <%= for tree_item <- @tree_items do %>
-        <%= case tree_item do %>
-          <% %{node: %{type: :element}} = item -> %>
-            <.tree_element node={item.node} level={item.level}></.tree_element>
-          <% %{node: %{type: :text}} = item -> %>
-            <.tree_text node={item.node} level={item.level}></.tree_text>
-          <% %{node: %{type: :comment}} = item -> %>
-            <.tree_comment node={item.node} level={item.level}></.tree_comment>
-        <% end %>
-      <% end %>
-      </div>
-      <.link  phx-click={JS.push("apply_modifier", value: %{modifier: :unwrap})}>
-        <.button  title="unwraps selected elements">Unwrap</.button>
-      </.link>
-      <.link  phx-click={JS.push("partition_text", value: %{modifier: :unwrap})}>
-        <.button  title="splits text into sentences">Partition</.button>
-      </.link>
+    <.tnode :for={node <- @tree} node={node} />
     """
   end
 
-  def tree_element(assigns) do
+  def attributes(assigns) do
+    ~H"&nbsp; <%= @name %>=&quot;<%= @value %>&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(assigns) when assigns.node.type == :element do
     ~H"""
-      <div nid={@node.nid} phx-click={JS.push("select", value: %{nid: @node.nid})}>
-        <%= "#{String.duplicate("  ", @level)}<#{@node.name}>" %>
-      </div>
+     &lt;<%= @node.name %><.attributes :for={{k,v} <- @node.attributes} name={k} value={v}
+     />&gt;<br>
+    <div class="ml-8">
+      <.tnode :for={child_node <- @node.content} node={child_node} />
+    </div>
     """
   end
 
-  def tree_text(assigns) do
+  def tnode(assigns) when assigns.node.type == :text do
     ~H"""
-      <div nid={@node.nid} phx-click={JS.push("select", value: %{nid: @node.nid})}>
-        <%= "#{String.duplicate("  ", @level)}\"#{String.slice(@node.content, 0, 15)}...\"\n" %>
-      </div>
+     "<%= String.slice(@node.content, 0..35) %><%= if String.length(@node.content) > 35 do %>..."<% end %><br>
     """
   end
 
-  def tree_comment(assigns) do
+  def tnode(assigns) when assigns.node.type == :comment do
     ~H"""
-      <div nid={@node.nid} phx-click={JS.push("select", value: %{nid: @node.nid})} title={@node.content}>
-        <%= "#{String.duplicate("  ", @level)}<!-- #{String.slice(@node.content, 0, 15)}...-->\n" %>
-      </div>
+     &lt;!--<%= String.slice(@node.content, 0..35) %>
+      <%= if String.length(@node.content) > 35 do %>"..."<% end %>--&gt;
     """
   end
 end