Add codesandbox support (forem#1052)

app/liquid_tags/codesandbox_tag.rb

@@ -0,0 +1,30 @@
+class CodesandboxTag < LiquidTagBase
+  def initialize(tag_name, id, tokens)
+    super
+    @id = parse_id(id)
+  end
+
+  def render(_context)
+    '<iframe src="https://codesandbox.io/embed/' + @id + '"
+      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>'
+  end
+
+  private
+
+  def parse_id(input)
+    input_no_space = input.delete(" ")
+    if valid_id?(input_no_space)
+      input_no_space
+    else
+      raise StandardError, "Invalid repl.it Id"
+    end
+  end
+
+  def valid_id?(id)
+    id =~ /\A[a-zA-Z0-9\-]{0,60}\Z/
+  end
+end
+
+Liquid::Template.register_tag("codesandbox", CodesandboxTag)

app/views/pages/_editor_guide_text.html.erb

@@ -126,6 +126,10 @@
     <p>Put executable code within a runkit liquid block, as follows:</p>
     <pre>{% runkit<br>// hidden setup JavaScript code goes in this preamble area<br>const hiddenVar = 42<br>%}<br>// visible, reader-editable JavaScript code goes here<br>console.log(hiddenVar)<br>{% endrunkit %} <br></pre>
 
+    <h3><strong>Codesanbox Embed</strong></h3>
+    <p>All you need is the ID of the sanbox:</p>
+    <code>{% replit ppxnl191zx %}</code>
+
     <h3><strong>repl.it Embed</strong></h3>
     <p>All you need is the URL after the domain name:</p>
     <code>{% replit @WigWog/PositiveFineOpensource %}</code>