From 42a095f11451902c5b0c1e8b21c726684f72e1ac Mon Sep 17 00:00:00 2001
From: Sascha Karnatz <68833+kulturbande@users.noreply.github.com>
Date: Sun, 25 Feb 2024 15:22:41 +0100
Subject: [PATCH] Add possibility to show an outline in preview if no tag is
 present

Extend the element_view_for - method to show an outline to element, that has a disabled tag - option. It adds an unregistered custom component tag (which will have no visual representation except one display property), to make the element clickable and highlightable.
---
 app/helpers/alchemy/elements_block_helper.rb       |  8 +++++++-
 app/helpers/alchemy/elements_helper.rb             |  7 ++++++-
 app/views/alchemy/_preview_mode_code.html.erb      |  5 +++++
 spec/helpers/alchemy/elements_block_helper_spec.rb |  5 +++++
 spec/helpers/alchemy/elements_helper_spec.rb       | 14 ++++++++++++++
 5 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/app/helpers/alchemy/elements_block_helper.rb b/app/helpers/alchemy/elements_block_helper.rb
index a7139607be..3eea23b72e 100644
--- a/app/helpers/alchemy/elements_block_helper.rb
+++ b/app/helpers/alchemy/elements_block_helper.rb
@@ -113,7 +113,13 @@ def element_view_for(element, options = {})
       end
 
       # wrap output in a useful DOM element
-      if (tag = options.delete(:tag))
+      tag = options.delete(:tag)
+
+      # add custom element with no representation if the user is in the preview mode to allow
+      # an interaction with the element
+      tag = "alchemy-preview" if tag.blank? && is_element_in_preview_mode?(element)
+
+      if tag.present?
         # add preview attributes
         options.merge!(element_preview_code_attributes(element))
 
diff --git a/app/helpers/alchemy/elements_helper.rb b/app/helpers/alchemy/elements_helper.rb
index 355626d6c3..1555e45431 100644
--- a/app/helpers/alchemy/elements_helper.rb
+++ b/app/helpers/alchemy/elements_helper.rb
@@ -171,9 +171,14 @@ def element_preview_code(element)
       tag_builder.tag_options(element_preview_code_attributes(element))
     end
 
+    # is element in preview mode and connect with current page
+    def is_element_in_preview_mode?(element)
+      element.present? && @preview_mode && element.page == @page
+    end
+
     # Returns a hash containing the HTML tag attributes required for preview mode.
     def element_preview_code_attributes(element)
-      return {} unless element.present? && @preview_mode && element.page == @page
+      return {} unless is_element_in_preview_mode?(element)
 
       {"data-alchemy-element" => element.id}
     end
diff --git a/app/views/alchemy/_preview_mode_code.html.erb b/app/views/alchemy/_preview_mode_code.html.erb
index efc85e2711..3669115000 100644
--- a/app/views/alchemy/_preview_mode_code.html.erb
+++ b/app/views/alchemy/_preview_mode_code.html.erb
@@ -1,4 +1,9 @@
 <% if @preview_mode %>
+  <style>
+    alchemy-preview {
+      display: flow;
+    }
+  </style>
   <script type="text/javascript">
     Alchemy = { locale: "<%= session[:alchemy_locale] %>" };
   </script>
diff --git a/spec/helpers/alchemy/elements_block_helper_spec.rb b/spec/helpers/alchemy/elements_block_helper_spec.rb
index 6acd5f3059..46f29e82cf 100644
--- a/spec/helpers/alchemy/elements_block_helper_spec.rb
+++ b/spec/helpers/alchemy/elements_block_helper_spec.rb
@@ -56,6 +56,11 @@ module Alchemy
 
         subject { helper.element_view_for(element) }
         it { is_expected.to have_css "#{expected_wrapper_tag}[data-alchemy-element='#{element.id}']" }
+
+        context "without tag" do
+          subject { helper.element_view_for(element, tag: false) }
+          it { is_expected.to have_css "alchemy-preview[data-alchemy-element='#{element.id}']" }
+        end
       end
     end
 
diff --git a/spec/helpers/alchemy/elements_helper_spec.rb b/spec/helpers/alchemy/elements_helper_spec.rb
index 4a968eb488..6c81fe4107 100644
--- a/spec/helpers/alchemy/elements_helper_spec.rb
+++ b/spec/helpers/alchemy/elements_helper_spec.rb
@@ -202,6 +202,20 @@ module Alchemy
       end
     end
 
+    describe "#is_element_in_preview_mode?" do
+      subject { helper.is_element_in_preview_mode?(element) }
+
+      context "in preview_mode" do
+        before { assign(:preview_mode, true) }
+
+        it { is_expected.to be_truthy }
+      end
+
+      context "not in preview_mode" do
+        it { is_expected.to be_falsy }
+      end
+    end
+
     describe "#element_preview_code" do
       subject { helper.element_preview_code(element) }