Add a toggleable live preview panel to both editors

Hidden by default, shares horizontal space with the body editor once
opened rather than a separate section, and only requests the iframe's
src on first toggle -- no preview traffic at all until someone
actually wants to see it. Refreshes automatically on every successful
autosave; a separate force-render button re-attempts a save-and-
refresh cycle immediately, for when the normal 7-second cycle has
been interrupted (a lock-lost error, a transient failure) and waiting
for the next tick isn't good enough.

1 files changed, 20 insertions, 4 deletions

diff --git a/app/views/page_translations/edit.html.erb b/app/views/page_translations/edit.html.erb
index 981fb743..0f64d400 100644
--- a/app/views/page_translations/edit.html.erb
+++ b/app/views/page_translations/edit.html.erb
@@ -20,8 +20,8 @@
 </div>
 
 <div id="page_editor">
-    <%= form_with url: node_translation_path(@node, @locale), method: :patch, local: true, id: "translation_edit_form",
-          data: { autosave_url: autosave_node_translation_path(@node, @locale), show_url: node_path(@node) } do |f| %>
+  <%= form_with url: node_translation_path(@node, @locale), method: :patch, local: true, id: "translation_edit_form",
+        data: { autosave_url: autosave_node_translation_path(@node, @locale), show_url: node_path(@node) } do |f| %>
     <div id="content">
       <div class="node_description">Title</div>
       <div class="node_content">
@@ -34,8 +34,24 @@
       </div>
 
       <div class="node_description">Body</div>
-      <div class="node_content">
-        <%= text_area_tag "page[body]", @translation&.body, :class => 'with_editor' %>
+      <div class="body_toolbar_row">
+        <button type="button" id="preview_toggle" class="view_toggle" aria-pressed="false" aria-label="Toggle live preview" title="Toggle live preview">
+          <%= icon("layout-sidebar-right", library: "tabler", "aria-hidden": true) %> <span>Live preview</span>
+        </button>
+        <button type="button" id="preview_force_render" class="view_toggle" style="display:none" aria-label="Force preview render" title="Force preview render">
+          <%= icon("refresh", library: "tabler", "aria-hidden": true) %> <span>Force refresh</span>
+        </button>
+      </div>
+
+      <div id="editor_and_preview">
+        <div class="preview_content">
+          <div class="node_content">
+            <%= text_area_tag "page[body]", @translation&.body, :class => 'with_editor' %>
+          </div>
+        </div>
+        <div id="preview_panel" style="display:none">
+          <iframe id="live_preview_iframe" title="Live preview" data-src="<%= preview_page_path(@page, :locale => @locale) %>"></iframe>
+        </div>
       </div>
     </div>
   <% end %>