From e0f2394fd0816ef03bf4b928ab9fa5a18c32ffda Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Tue, 14 Jul 2026 04:10:01 +0200
Subject: 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.
---
 app/views/nodes/edit.html.erb             | 21 +++++++++++++++++++--
 app/views/page_translations/edit.html.erb | 24 ++++++++++++++++++++----
 2 files changed, 39 insertions(+), 6 deletions(-)

(limited to 'app/views')

diff --git a/app/views/nodes/edit.html.erb b/app/views/nodes/edit.html.erb
index e0e51d8..9506995 100644
--- a/app/views/nodes/edit.html.erb
+++ b/app/views/nodes/edit.html.erb
@@ -116,10 +116,27 @@
     <div class="node_content"><%= d.text_area :abstract %></div>
 
     <div class="node_description">Body</div>
-    <div class="node_content"><%= d.text_area :body, :class => 'with_editor' %></div>
+    <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"><%= d.text_area :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 => I18n.default_locale) %>"></iframe>
+      </div>
+    </div>
+  </div>
   <% end %>
 
-  <div class="node_action_bar node_action_bar_save">
+  <div class="node_action_bar">
     <%= f.submit 'Save Draft' %>
     <%= f.submit 'Save + Unlock + Exit' %>
   </div>
diff --git a/app/views/page_translations/edit.html.erb b/app/views/page_translations/edit.html.erb
index 981fb74..0f64d40 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 %>
-- 
cgit v1.3