Merge pull request #859 from jwang1919/#815-external-starter-code

Insert popcode JS and CSS libraries on the top of the head tag

Author: outoftime

src/util/generatePreview.js

@@ -1,11 +1,9 @@
 import castArray from 'lodash/castArray';
 import pick from 'lodash/pick';
-import base64 from 'base64-js';
 import loopBreaker from 'loop-breaker';
 import libraries from '../config/libraries';
 import previewFrameLibraries from '../config/previewFrameLibraries';
 
-const textEncoder = new TextEncoder('utf-8');
 const parser = new DOMParser();
 
 const sourceDelimiter = '/*__POPCODESTART__*/';
@@ -177,18 +175,15 @@ class PreviewGenerator {
   _attachCssLibrary(css) {
     const linkTag = this.previewDocument.createElement('link');
     linkTag.rel = 'stylesheet';
-
-    const base64encoded = base64.fromByteArray(textEncoder.encode(css));
-    linkTag.href = `data:text/css;charset=utf-8;base64,${base64encoded}`;
-    this._previewHead.appendChild(linkTag);
+    linkTag.innerHTML = css;
+    this._previewHead.insertBefore(linkTag, this._previewHead.firstChild);
   }
 
   _attachJavascriptLibrary(javascript) {
     const scriptTag = this.previewDocument.createElement('script');
-    const base64encoded = base64.fromByteArray(textEncoder.encode(javascript));
-    scriptTag.src =
-      `data:text/javascript;charset=utf-8;base64,${base64encoded}`;
-    this.previewBody.appendChild(scriptTag);
+    const javascriptText = String(javascript);
+    scriptTag.innerHTML = javascriptText.replace(/<\/script>/g, '<\\/script>');
+    this._previewHead.insertBefore(scriptTag, this._previewHead.firstChild);
   }
 }