Add HtmlDocComponent to render the InternalTree

Very basic but promising.

lib/outlook_web.ex

@@ -87,6 +87,7 @@ defmodule OutlookWeb do
       # Core UI components and translation
       import OutlookWeb.CoreComponents
       import OutlookWeb.HtmlTreeComponent
+      import OutlookWeb.HtmlDocComponent
       import OutlookWeb.TunitEditorComponent
       import OutlookWeb.Gettext
 

lib/outlook_web/components/html_doc_component.ex

@@ -0,0 +1,45 @@
+defmodule OutlookWeb.HtmlDocComponent do
+
+   use Phoenix.Component
+  # use OutlookWeb, :html
+  import OutlookWeb.CoreComponents
+  import Phoenix.HTML
+
+  alias Phoenix.LiveView.JS
+
+  attr :tree, :list, required: true
+
+  def render_doc(assigns) do
+    ~H"""
+      <%= for node <- @tree do %>
+        <.dnode node={node} />
+      <% end %>
+    """
+  end
+
+  def dnode(%{node: %{status: status}} = assigns) do
+    ~H"""
+      <span class="tunit" uuid={@node.uuid}>
+        <%= @node.content |> raw %>
+      </span>
+    """
+  end
+
+  def dnode(assigns) when assigns.node.type == :element do
+    ~H"""
+      <.dynamic_tag name={@node.name} uuid={@node.uuid}>
+        <%= for child_node <- @node.content do %>
+          <.dnode node={child_node} />
+        <% end %>
+      </.dynamic_tag>
+    """
+  end
+
+  def dnode(assigns) when assigns.node.type == :text do
+    ~H"<%= @node.content %>"
+  end
+
+  def dnode(assigns) when assigns.node.type == :comment do
+    ~H"<!--<%= @node.content |> raw %>-->"
+  end
+end

lib/outlook_web/live/translation_live/form_component.ex

@@ -38,10 +38,10 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
         <.tunit_editor current_tunit={@current_tunit} target={@myself} />
     </div>
       <div class="article">
-        <%= InternalTree.render_html_preview(@translation.article.content, @myself) |> raw %>
         <.button phx-disable-with="Translating..." phx-click="translate-deepl" phx-target={@myself}
           data-confirm-not="Are you sure? All previously translated text will be lost.">Translate with Deepl</.button>
         <progress :if={@deepl_progress} max="100" value={@deepl_progress} />
+        <.render_doc tree={@translation.article.content} />
       </div>
     </div>
     """