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

@@ -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))
 

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

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>

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
 

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) }