Add iframe to elements that may be empty

assets/js/translation-form.js

@@ -6,6 +6,8 @@ let TranslationFormHook = {
     this.tunit_editor = this.el.querySelector("#tunit-editor-content")
     this.save_edit_button = this.el.querySelector("#save-edit-button")
     this.save_publish_button = this.el.querySelector("#save-publish-button")
+    let article_preview_links = document.querySelectorAll(".article-preview a")
+    article_preview_links.forEach(el => el.addEventListener('click', e => e.preventDefault()))
   },
   keyupHandler(e) {
     var push_event = true

lib/outlook/internal_tree/raw_internal_basic.ex

@@ -10,7 +10,7 @@ defmodule Outlook.InternalTree.RawInternalBasic do
 
   @splitmarker "@@translationunit@@"
   @nonperiodmarker "@@nonperiod@@"
-  @void_elements ~w(img br hr)
+  @void_elements ~w(img br hr iframe)
 
   def set_split_markers([ %InternalNode{type: :text} = textnode | rest ]) do
     [ %InternalNode{textnode |

lib/outlook/internal_tree/tunit_modifications.ex

@@ -52,7 +52,7 @@ defmodule Outlook.InternalTree.TunitModifications do
     end
     [%InternalNode{node| content: content} | apply_modifier(rest, modifier, tu_ids)]
   end
-  def apply_modifier([node, rest], modifier, tu_ids), do: [node | apply_modifier(rest, modifier, tu_ids)]
+  def apply_modifier([node | rest], modifier, tu_ids), do: [node | apply_modifier(rest, modifier, tu_ids)]
   def apply_modifier([],_, _), do: []
 
   def process_tunit_list(tunits, modifier, tu_ids) do

lib/outlook_web/components/dark_mode_component.ex

@@ -9,7 +9,7 @@ defmodule OutlookWeb.DarkModeComponent do
 
   def dark_mode_widget(assigns) do
     ~H"""
-    <div id="dark-mode-widget" class="absolute flex w-full justify-between p-0" phx-hook="dark_mode_widget">
+    <div id="dark-mode-widget" class="relative flex w-full justify-between p-0" phx-hook="dark_mode_widget">
       <div class="flex"></div>
       <div class="flex">
         <button class="p-2" type="button">

lib/outlook_web/components/layouts/public.html.heex

@@ -8,7 +8,7 @@
   </a>
   <.dark_mode_widget />
 </header>
-<main class="px-2 py-4 sm:px-6 lg:px-8">
+<main class="px-2 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-xl">
     <.flash kind={:info} title="Success!" flash={@flash} />
     <.flash kind={:error} title="Error!" flash={@flash} />

lib/outlook_web/live/translation_live/form_component.ex

@@ -51,7 +51,7 @@ defmodule OutlookWeb.TranslationLive.FormComponent do
         </.simple_form>
         <.tunit_editor current_tunit={@current_tunit} target={@myself} />
       </div>
-      <div class="article basis-1/2 max-h-screen overflow-auto">
+      <div class="article article-preview basis-1/2 max-h-screen overflow-auto">
         <.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} />