Add file argument to Stackblitz embed. (#2590)

app/liquid_tags/stackblitz_tag.rb

@@ -2,14 +2,15 @@ class StackblitzTag < LiquidTagBase
   def initialize(tag_name, id, tokens)
     super
     @id = parse_id(id)
-    @view = parse_view(id)
+    @view = parse_input(id, method(:valid_view?))
+    @file = parse_input(id, method(:valid_file?))
     @height = 500
   end
 
   def render(_context)
     html = <<-HTML
       <iframe
-        src="https://stackblitz.com/edit/#{@id}?embed=1&#{@view}"
+        src="https://stackblitz.com/edit/#{@id}?embed=1#{@view}#{@file}"
         width="100%"
         height="#{@height}"
         scrolling="no"
@@ -34,19 +35,23 @@ class StackblitzTag < LiquidTagBase
     input_no_space
   end
 
-  def parse_view(input)
+  def parse_input(input, validator)
     input_split = input.split(" ")
 
     # Validation
-    validated_views = input_split.map { |o| valid_view?(o) }.reject(&:nil?)
+    validated_views = input_split.map { |o| validator.call(o) }.reject(&:nil?)
     raise StandardError, "Invalid Options" unless validated_views.length.between?(0, 1)
 
-    validated_views.length.zero? ? "" : validated_views.join("")
+    validated_views.length.zero? ? "" : "&#{validated_views.join('')}"
   end
 
   def valid_view?(option)
     option.match(/^view=(preview|editor|both)\z/)
   end
+
+  def valid_file?(option)
+    option.match(/^file=(.*)\z/)
+  end
 end
 
 Liquid::Template.register_tag("stackblitz", StackblitzTag)

app/views/pages/_editor_guide_text.html.erb

@@ -163,12 +163,18 @@
     <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>
+    <dl>
+      <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>
+      <dt><code>Default file</code></dt>
+      <dd>
+        You can change the default file you want your embed to point to<br>
+        <code>{% stackblitz ball-demo file=style.css %}</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

@@ -4,6 +4,8 @@ RSpec.describe StackblitzTag, type: :liquid_template do
   describe "#id" do
     let(:stackblitz_id) { "ball-demo" }
     let(:stackblitz_id_with_view) { "ball-demo view=preview" }
+    let(:stackblitz_id_with_file) { "ball-demo file=style.css" }
+    let(:stackblitz_id_with_view_and_file) { "ball-demo view=preview file=style.css" }
 
     xss_links = %w(
       //evil.com/?ball-demo
@@ -33,6 +35,23 @@ RSpec.describe StackblitzTag, type: :liquid_template do
       end.not_to raise_error
     end
 
+    it "accepts stackblitz id with a file parameter" do
+      expect do
+        generate_new_liquid(stackblitz_id_with_file)
+      end.not_to raise_error
+    end
+
+    it "accepts stackblitz id with a view and file parameter" do
+      expect do
+        generate_new_liquid(stackblitz_id_with_view_and_file)
+      end.not_to raise_error
+    end
+
+    it "parses stackblitz if with a view and file parameter" do
+      liquid = generate_new_liquid(stackblitz_id_with_view_and_file)
+      expect(liquid.render).to include("https://stackblitz.com/edit/ball-demo?embed=1&view=preview&file=style.css")
+    end
+
     it "rejects XSS attempts" do
       xss_links.each do |link|
         expect { generate_new_liquid(link) }.to raise_error(StandardError)