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

@@ -3,8 +3,9 @@ defmodule Outlook.HtmlPreparations.HtmlPreparation do
 
   alias Outlook.InternalTree.InternalNode
 
-  @block_elements ["address","article","aside","blockquote","canvas","dd","div","dl","dt","fieldset","figcaption","figure","footer","form","h1","h2","h3","h4","h5","h6","header","hr","li","main","nav","noscript","ol","p","pre","section","table","tfoot","ul","video"]
+  # treating img as block element because inline images are not desirable
-  # @inline_elements ["a","abbr","acronym","b","bdo","big","br","button","cite","code","dfn","em","i","img","input","kbd","label","map","object","output","q","samp","script","select","small","span","strong","sub","sup","textarea","time","tt","u","var"]
+  @block_elements ~w(img address article aside blockquote canvas dd div dl dt fieldset figcaption figure footer form h1 h2 h3 h4 h5 h6 header hr li main nav noscript ol p pre section table tfoot ul video)
+  # @inline_elements ~w(a abbr acronym b bdo big br button cite code dfn em i input kbd label map object output q samp script select small span strong sub sup textarea time tt u var)
 
   defp clean_atts_to_map(atts) do
     atts_to_keep = ~w(href src)
@@ -46,6 +47,13 @@ defmodule Outlook.HtmlPreparations.HtmlPreparation do
   def floki_to_internal([]), do: []
 
 
+  def set_sibling_with([ node | rest ]) when node.name == "a" do
+    [ %InternalNode{ node |
+        eph: %{sibling_with: :both}, # <a> may occur at block level (e.g. when enclosing an <img>)
+        content: set_sibling_with(node.content)
+      } | set_sibling_with(rest) ]
+  end
+
   def set_sibling_with([ %{type: :element} = node | rest ]) do
     [ %InternalNode{ node |
         eph: %{sibling_with: node.name in @block_elements && :block || :inline},
@@ -82,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">
+    <.tnode :for={node <- @tree} node={node} />
-      <%= 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>
     """
   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})}>
+     &lt;<%= @node.name %><.attributes :for={{k,v} <- @node.attributes} name={k} value={v}
-        <%= "#{String.duplicate("  ", @level)}<#{@node.name}>" %>
+     />&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.slice(@node.content, 0..35) %><%= if String.length(@node.content) > 35 do %>..."<% end %><br>
-        <%= "#{String.duplicate("  ", @level)}\"#{String.slice(@node.content, 0, 15)}...\"\n" %>
-      </div>
     """
   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}>
+     &lt;!--<%= String.slice(@node.content, 0..35) %>
-        <%= "#{String.duplicate("  ", @level)}<!-- #{String.slice(@node.content, 0, 15)}...-->\n" %>
+      <%= if String.length(@node.content) > 35 do %>"..."<% end %>--&gt;
-      </div>
     """
   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>