Coding style consistency (stackblitz liquid tag) (#1649)

* Style consistancy

Make style more consistent with other liquid tags

* Style consistency

Make style more consistent with other liquid tags

* Style consistency

Make style more consistent with other liquid tags

* rubocop compliance

* rubocop compliance

app/liquid_tags/stackblitz_tag.rb

@@ -2,20 +2,33 @@ class StackblitzTag < LiquidTagBase
   def initialize(tag_name, id, tokens)
     super
     @id = parse_id(id)
+    @view = parse_view(id)
+    @height = 500
   end
 
   def render(_context)
-    '<iframe
-      src="https://stackblitz.com/edit/' + @id + '?embed=1&hideExplorer=1&hideNavigation=1&hidedevtools=1"
-      style="width:100%; height:calc(300px + 8vw); border:0; border-radius: 4px; overflow:hidden;"
-      sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation-by-user-activation">
-    </iframe>'
+    html = <<-HTML
+      <iframe
+        src="https://stackblitz.com/edit/#{@id}?embed=1&#{@view}"
+        width="100%"
+        height="#{@height}"
+        scrolling="no"
+        frameborder="no"
+        allowfullscreen
+        allowtransparency="true">
+      </iframe>
+    HTML
+    finalize_html(html)
   end
 
   private
 
+  def valid_id?(id)
+    id =~ /\A[a-zA-Z0-9\-]{0,60}\Z/
+  end
+
   def parse_id(input)
-    input_no_space = input.delete(" ")
+    input_no_space = input.split(" ").first
     if valid_id?(input_no_space)
       input_no_space
     else
@@ -23,8 +36,18 @@ class StackblitzTag < LiquidTagBase
     end
   end
 
-  def valid_id?(id)
-    id =~ /\A[a-zA-Z0-9\-]{0,60}\Z/
+  def parse_view(input)
+    input_split = input.split(" ")
+
+    # Validation
+    validated_views = input_split.map { |o| valid_view?(o) }.reject { |e| e == nil }
+    raise StandardError, "Invalid Options" unless validated_views.length.between?(0, 1)
+
+    validated_views.length.zero? ? "" : validated_views.join("")
+  end
+
+  def valid_view?(option)
+    option.match(/^view=(preview|editor|both)\z/)
   end
 end
 

app/views/pages/_editor_guide_text.html.erb

@@ -144,6 +144,11 @@
     <h3><strong>Stackblitz Embed</strong></h3>
     <p>All you need is the ID of the Stackblitz:</p>
     <code>{% stackblitz ball-demo %}</code>
+    <dt><code>Default view</code></dt>
+    <dd>
+      You can change the default view, the options are <i>both</i>, <i>preview</i>, <i>editor</i>. Defaults to <i>both</i><br/>
+      <code>{% stackblitz ball-demo view=preview %}</code>
+    </dd>
 
     <h3><strong>CodeSandbox Embed</strong></h3>
     <p>All you need is the ID of the Sandbox:</p>

spec/liquid_tags/stackblitz_tag_spec.rb

@@ -3,6 +3,13 @@ require "rails_helper"
 RSpec.describe StackblitzTag, type: :liquid_template do
   describe "#id" do
     let(:stackblitz_id) { "ball-demo" }
+    let(:stackblitz_id_with_view) { "ball-demo view=preview" }
+    
+    xss_links = %w(
+      //evil.com/?ball-demo
+      https://ball-demo.evil.com
+      ball-demo" onload='alert("xss")'
+    )
 
     def generate_new_liquid(id)
       Liquid::Template.register_tag("stackblitz", StackblitzTag)
@@ -13,5 +20,23 @@ RSpec.describe StackblitzTag, type: :liquid_template do
       liquid = generate_new_liquid(stackblitz_id)
       expect(liquid.render).to include("<iframe")
     end
+
+    it "rejects invalid stackblitz id" do
+      expect do
+        generate_new_liquid("https://google.com")
+      end.to raise_error(StandardError)
+    end
+
+    it "accepts stackblitz id with a view parameter" do
+      expect do
+        generate_new_liquid(stackblitz_id_with_view)
+      end.not_to raise_error
+    end
+
+    it "rejects XSS attempts" do
+      xss_links.each do |link|
+        expect { generate_new_liquid(link) }.to raise_error(StandardError)
+      end
+    end
   end
 end