Add importing html and save it to Article

Additionally defines a wizard logic which is partially unused yet.

lib/outlook_web/components/html_tree_component.ex

@@ -0,0 +1,57 @@
+defmodule OutlookWeb.HtmlTreeComponent do
+
+   use Phoenix.Component
+  # use OutlookWeb, :html
+  import OutlookWeb.CoreComponents
+
+  alias Phoenix.LiveView.JS
+
+  attr :tree_items, :list, required: true
+
+  def treeview(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>
+    """
+  end
+
+  def tree_element(assigns) do
+    ~H"""
+      <div uuid={@node.uuid} phx-click={JS.push("select", value: %{uuid: @node.uuid})}>
+        <%= "#{String.duplicate("  ", @level)}<#{@node.name}>" %>
+      </div>
+    """
+  end
+
+  def tree_text(assigns) do
+    ~H"""
+      <div uuid={@node.uuid} phx-click={JS.push("select", value: %{uuid: @node.uuid})}>
+        <%= "#{String.duplicate("  ", @level)}\"#{String.slice(@node.content, 0, 15)}...\"\n" %>
+      </div>
+    """
+  end
+
+  def tree_comment(assigns) do
+    ~H"""
+      <div uuid={@node.uuid} phx-click={JS.push("select", value: %{uuid: @node.uuid})} title={@node.content}>
+        <%= "#{String.duplicate("  ", @level)}<!-- #{String.slice(@node.content, 0, 15)}...-->\n" %>
+      </div>
+    """
+  end
+end