Add Edit button for editing in codesandbox

examples/resources/common.js

@@ -1,4 +1,12 @@
 (function() {
+
+  function compress(json) {
+    return LZString.compressToBase64(JSON.stringify(json))
+      .replace(/\+/g, `-`)
+      .replace(/\//g, `_`)
+      .replace(/=+$/, ``);
+  }
+
   var htmlClipboard = new Clipboard('#copy-html-button');
   htmlClipboard.on('success', function(e) {
     e.clearSelection();
@@ -17,34 +25,22 @@
     codepenButton.onclick = function(event) {
       event.preventDefault();
       var form = document.getElementById('codepen-form');
-
-      // Doc : https://blog.codepen.io/documentation/api/prefill/
-
-      var resources = form.resources.value.split(',');
-
-      var data = {
-        title: form.title.value,
-        description: form.description.value,
-        layout: 'left',
-        html: form.html.value,
-        css: form.css.value,
-        js: form.js.value,
-        css_external: resources.filter(function(resource) {
-          return resource.lastIndexOf('.css') === resource.length - 4;
-        }).join(';'),
-        js_external: resources.filter(function(resource) {
-          return resource.lastIndexOf('.js') === resource.length - 3;
-        }).join(';')
-      };
-
-      // binary flags to display html, css, js and/or console tabs
-      data.editors = '' + Number(data.html.length > 0) +
-          Number(data.css.length > 0) +
-          Number(data.js.length > 0) +
-          Number(data.js.indexOf('console') > 0);
-
-      form.data.value = JSON.stringify(data);
-
+      const html = document.getElementById('example-html-source').innerText;
+      const js = document.getElementById('example-js-source').innerText;
+      const pkgJson = document.getElementById('example-pkg-source').innerText;
+      form.parameters.value = compress({
+        files: {
+          'index.html': {
+            content: html
+          },
+          'index.js': {
+            content: js
+          },
+          "package.json": {
+            content: pkgJson
+          }
+        }
+      });
       form.submit();
     };
   }

examples/templates/example.html

@@ -27,6 +27,7 @@
     </script>
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
     <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
+    <script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
     <script>
     window.addEventListener("load", function() {
       window.cookieconsent.initialise({
@@ -99,11 +100,14 @@
       </div>
 
       <div class="row-fluid">
-        <!-- <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a> -->
+        <a class="codepen-button pull-right"><i class="fa fa-codepen"></i> Edit</a>
         <div class="span12">
           <h4 id="title">{{ title }}</h4>
           {{{ contents }}}
         </div>
+        <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
+          <input id="codesandbox-params" type="hidden" name="parameters">
+        </form>
       </div>
 
       <div class="row-fluid">