Sanitize HtmlTreeComponent

lib/outlook/html_preparations.ex

@@ -11,10 +11,4 @@ defmodule Outlook.HtmlPreparations do
       |> HtmlPreparation.floki_to_internal
       |> HtmlPreparation.set_sibling_with
   end
-
-  def get_tree_items(content_tree) do
-    content_tree
-      |> HtmlPreparation.strip_whitespace_textnodes
-      |> HtmlPreparation.build_indentation_list(0)
-  end
 end

lib/outlook/html_preparations/html_preparation.ex

@@ -90,20 +90,4 @@ defmodule Outlook.HtmlPreparations.HtmlPreparation do
   end
 
   def strip_whitespace_textnodes([]), do: []
-
-
-  def build_indentation_list [ %{type: :element} = node | rest], level do
-    [ %{node: Map.replace(node, :content, []), level: level}
-      | [ build_indentation_list(node.content, level + 1)
-          | build_indentation_list(rest, level)
-        ]
-    ] |> List.flatten
-  end
-
-  def build_indentation_list [ node | rest ], level do
-    [ %{node: node, level: level}
-      | build_indentation_list( rest, level ) ]
-  end
-
-  def build_indentation_list([ ], _), do: []
 end

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}>" %>
+     &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

lib/outlook_web/live/article_live/new_components.ex

@@ -34,7 +34,7 @@ defmodule OutlookWeb.ArticleLive.NewComponents do
           <%= InternalTree.render_html_preview(@raw_internal_tree) |> raw %>
         </div>
         <div id="html-tree">
-          <.treeview tree_items={HtmlPreparations.get_tree_items(@raw_internal_tree)} ></.treeview>
+          <.render_tree tree={@raw_internal_tree} ></.render_tree>
         </div>
       </div>
       <.button phx-click="approve_raw_internaltree">Continue</.button>