Remove boilerplate code. Do not modify HTML content outside of React.

main.coffee

@@ -2,31 +2,28 @@ import React, { useState, useEffect } from 'react'
 import ReactDOM from 'react-dom'
 import './style.scss'
 
-BOILERPLATE = """
-stdout = document.querySelector "#debugger"
-
-__log_clear = () ->
-  stdout.innerHTML = ""
-
-debug = (param...) ->
-  stdout.innerHTML += param.join(" ") + "<br/>"
-
-console.log = debug
-console.error = debug
+App = () ->
+  parsedCodeFromQueryParam = window.location.search.replace(/\?code=/, '') or ""
+  preloaded = decodeURIComponent(parsedCodeFromQueryParam)
+  [code, setCode] = useState(preloaded)
+  [log, setLog] = useState(if preloaded and preloaded.length then "Copy this page URL to share" else "Press Ctrl + Enter to execute the code.")
 
-__log_clear()
-"""
+  # Capture the content of these logs
+  debugFn = (param...) ->
+    setLog param.join(" ") + "\n"
+  console.log = debugFn
+  console.error = debugFn
 
-App = () ->
-  [code, setCode] = useState("")
-  [log, setLog] = useState("")
+  shareCode = () ->
+    window.location.search = "code=" + encodeURIComponent(code)
 
   clearLog = () ->
     setLog ""
 
   executeCode = (script) ->
+    clearLog()
     try
-      CoffeeScript.run BOILERPLATE + "\n" + (script or code)
+      CoffeeScript.run (script or code)
     catch error
       setLog error.toString()
 
@@ -49,11 +46,12 @@ App = () ->
 
   <div className={"main"}>
     <div className={"toolbar"}>
-      <button onClick={executeCode} className={"btn"}>execute</button>
-      <button onClick={clearLog} className={"btn"}>clear log</button>
+      <button onClick={shareCode} className={"btn secondary"}>share</button>
+      <button onClick={() -> clearLog()} className={"btn secondary"}>clear log</button>
+      <button onClick={() -> executeCode()} className={"btn"}>execute</button>
     </div>
     <div className={"ide"}>
-      <textarea id="editor" className={"editor"}></textarea>
+      <textarea id="editor" className={"editor"} defaultValue={preloaded}></textarea>
       <pre id={"debugger"} className={"debugger"}>{log}</pre>
     </div>
   </div>

style.scss

@@ -43,6 +43,10 @@ html {
         margin-left: 8px;
         cursor: pointer;
       }
+
+      .btn.secondary {
+        background: #888;
+      }
     }
   }