From 57568f65041d4260b687f854d4ad09140dfdd0b3 Mon Sep 17 00:00:00 2001 From: catarak Date: Tue, 19 Jul 2016 19:36:50 -0400 Subject: [PATCH] wowowowow this blob url thing works --- client/modules/IDE/components/PreviewFrame.js | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index d5715b85..109d88bf 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/client/modules/IDE/components/PreviewFrame.js @@ -32,8 +32,22 @@ class PreviewFrame extends React.Component { injectLocalFiles() { let htmlFile = this.props.htmlFile.content; + const jsFiles = this.props.jsFiles.map(jsFile => { + const jsFileStrings = jsFile.content.match(/(['"])((\\\1|.)*?)\1/gm); + jsFileStrings.forEach(jsFileString => { + if (jsFileString.match(/^('|")(?!(http:\/\/|https:\/\/)).*\.(png|jpg|jpeg|gif|bmp)('|")$/)) { + const fileName = jsFileString.substr(1, jsFileString.length - 2); + this.props.files.forEach(file => { + if (file.name === fileName) { + jsFile.content = jsFile.content.replace(fileName, file.blobURL); // eslint-disable-line + } + }); + } + }); + return jsFile; + }); - this.props.jsFiles.forEach(jsFile => { + jsFiles.forEach(jsFile => { const fileName = escapeStringRegexp(jsFile.name); const fileRegex = new RegExp(`([\s\S]*?)<\/script>`, 'gmi'); htmlFile = htmlFile.replace(fileRegex, ``); @@ -45,13 +59,6 @@ class PreviewFrame extends React.Component { htmlFile = htmlFile.replace(fileRegex, ``); }); - // const htmlHead = htmlFile.match(/(?:)([\s\S]*?)(?:<\/head>)/gmi); - // const headRegex = new RegExp('head', 'i'); - // let htmlHeadContents = htmlHead[0].split(headRegex)[1]; - // htmlHeadContents = htmlHeadContents.slice(1, htmlHeadContents.length - 2); - // htmlHeadContents += '\n'; - // htmlFile = htmlFile.replace(/(?:)([\s\S]*?)(?:<\/head>)/gmi, `\n${htmlHeadContents}\n`); - return htmlFile; } @@ -101,7 +108,8 @@ PreviewFrame.propTypes = { content: PropTypes.string.isRequired }), jsFiles: PropTypes.array.isRequired, - cssFiles: PropTypes.array.isRequired + cssFiles: PropTypes.array.isRequired, + files: PropTypes.array.isRequired }; export default PreviewFrame;