support public creations

src/CodeMirror.js

@@ -3,58 +3,59 @@
 import CodeMirror from 'codemirror';
 
 // Make CodeMirror available globally so the modes' can register themselves.
-window.CodeMirror = CodeMirror
+window.CodeMirror = CodeMirror;
 
-if (!CodeMirror.modeURL) CodeMirror.modeURL = 'lib/codemirror/mode/%N/%N.js';
+if (!CodeMirror.modeURL) CodeMirror.modeURL = '/lib/codemirror/mode/%N/%N.js';
 
-var loading = {}
+var loading = {};
 
 function splitCallback(cont, n) {
-	var countDown = n
+	var countDown = n;
 	return function () {
-		if (--countDown === 0) cont()
+		if (--countDown === 0) cont();
-	}
+	};
 }
 
 function ensureDeps(mode, cont) {
-	var deps = CodeMirror.modes[mode].dependencies
+	var deps = CodeMirror.modes[mode].dependencies;
-	if (!deps) return cont()
+	if (!deps) return cont();
-	var missing = []
+	var missing = [];
 	for (var i = 0; i < deps.length; ++i) {
-		if (!CodeMirror.modes.hasOwnProperty(deps[i])) missing.push(deps[i])
+		if (!CodeMirror.modes.hasOwnProperty(deps[i])) missing.push(deps[i]);
 	}
-	if (!missing.length) return cont()
+	if (!missing.length) return cont();
-	var split = splitCallback(cont, missing.length)
+	var split = splitCallback(cont, missing.length);
-	for (i = 0; i < missing.length; ++i) CodeMirror.requireMode(missing[i], split)
+	for (i = 0; i < missing.length; ++i)
+		CodeMirror.requireMode(missing[i], split);
 }
 
 CodeMirror.requireMode = function (mode, cont) {
-	if (typeof mode !== 'string') mode = mode.name
+	if (typeof mode !== 'string') mode = mode.name;
-	if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont)
+	if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont);
-	if (loading.hasOwnProperty(mode)) return loading[mode].push(cont)
+	if (loading.hasOwnProperty(mode)) return loading[mode].push(cont);
 
-	var file = CodeMirror.modeURL.replace(/%N/g, mode)
+	var file = CodeMirror.modeURL.replace(/%N/g, mode);
 
-	var script = document.createElement('script')
+	var script = document.createElement('script');
-	script.src = file
+	script.src = file;
-	var others = document.getElementsByTagName('script')[0]
+	var others = document.getElementsByTagName('script')[0];
-	var list = loading[mode] = [cont]
+	var list = (loading[mode] = [cont]);
 
 	CodeMirror.on(script, 'load', function () {
 		ensureDeps(mode, function () {
-			for (var i = 0; i < list.length; ++i) list[i]()
+			for (var i = 0; i < list.length; ++i) list[i]();
-		})
+		});
-	})
+	});
 
-	others.parentNode.insertBefore(script, others)
+	others.parentNode.insertBefore(script, others);
-}
+};
 
 CodeMirror.autoLoadMode = function (instance, mode) {
-	if (CodeMirror.modes.hasOwnProperty(mode)) return
+	if (CodeMirror.modes.hasOwnProperty(mode)) return;
 
 	CodeMirror.requireMode(mode, function () {
-		instance.setOption('mode', instance.getOption('mode'))
+		instance.setOption('mode', instance.getOption('mode'));
-	})
+	});
-}
+};
 
-export default CodeMirror
+export default CodeMirror;

src/components/CodeEditor.jsx

@@ -44,18 +44,18 @@ window.MonacoEnvironment = {
 	getWorkerUrl(moduleId, label) {
 		switch (label) {
 			case 'html':
-				return 'lib/monaco/workers/html.worker.bundle.js';
+				return '/lib/monaco/workers/html.worker.bundle.js';
 			case 'json':
-				return 'lib/monaco/workers/json.worker.bundle.js';
+				return '/lib/monaco/workers/json.worker.bundle.js';
 			case 'css':
 			case 'scss':
 			case 'less':
-				return 'lib/monaco/workers/css.worker.bundle.js';
+				return '/lib/monaco/workers/css.worker.bundle.js';
 			case 'typescript':
 			case 'javascript':
-				return 'lib/monaco/workers/ts.worker.bundle.js';
+				return '/lib/monaco/workers/ts.worker.bundle.js';
 			default:
-				return 'lib/monaco/workers/editor.worker.bundle.js';
+				return '/lib/monaco/workers/editor.worker.bundle.js';
 		}
 	}
 };
@@ -235,9 +235,9 @@ export default class CodeEditor extends Component {
 		if (this.props.type === 'monaco') {
 			if (!monacoDepsDeferred) {
 				monacoDepsDeferred = deferred();
-				loadCss({ url: 'lib/monaco/monaco.css', id: 'monaco-css' });
+				loadCss({ url: '/lib/monaco/monaco.css', id: 'monaco-css' });
 				import(
-					/* webpackChunkName: "monaco" */ '../lib/monaco/monaco.bundle.js'
+					/* webpackChunkName: "monaco" */ '/lib/monaco/monaco.bundle.js'
 				).then(() => {
 					monacoDepsDeferred.resolve();
 				});

src/components/ContentWrap.jsx

@@ -341,7 +341,7 @@ export default class ContentWrap extends Component {
 
 		// Replace correct css file in LINK tags's href
 		if (prefs.editorTheme) {
-			window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
+			window.editorThemeLinkTag.href = `/lib/codemirror/theme/${prefs.editorTheme}.css`;
 		}
 
 		window.fontStyleTag.textContent =

src/components/ContentWrapFiles.jsx

@@ -54,12 +54,10 @@ export default class ContentWrapFiles extends Component {
 		// `clearConsole` is on window because it gets called from inside iframe also.
 		window.clearConsole = this.clearConsole.bind(this);
 
-		this.consoleHeaderDblClickHandler = this.consoleHeaderDblClickHandler.bind(
+		this.consoleHeaderDblClickHandler =
-			this
+			this.consoleHeaderDblClickHandler.bind(this);
-		);
+		this.clearConsoleBtnClickHandler =
-		this.clearConsoleBtnClickHandler = this.clearConsoleBtnClickHandler.bind(
+			this.clearConsoleBtnClickHandler.bind(this);
-			this
-		);
 		this.toggleConsole = this.toggleConsole.bind(this);
 		this.evalConsoleExpr = this.evalConsoleExpr.bind(this);
 	}
@@ -259,7 +257,7 @@ export default class ContentWrapFiles extends Component {
 				obj[file.path] =
 					'<script src="' +
 					(chrome.extension
-						? chrome.extension.getURL('lib/screenlog.js')
+						? chrome.extension.getURL('/lib/screenlog.js')
 						: `${location.origin}${
 								window.DEBUG ? '' : BASE_PATH
 						  }/lib/screenlog.js`) +
@@ -360,12 +358,13 @@ export default class ContentWrapFiles extends Component {
 			window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
 		}
 
-		window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
+		window.fontStyleTag.textContent =
-			/fontname/g,
+			window.fontStyleTemplate.textContent.replace(
-			(prefs.editorFont === 'other'
+				/fontname/g,
-				? prefs.editorCustomFont
+				(prefs.editorFont === 'other'
-				: prefs.editorFont) || 'FiraCode'
+					? prefs.editorCustomFont
-		);
+					: prefs.editorFont) || 'FiraCode'
+			);
 	}
 
 	// Check all the code wrap if they are minimized or maximized
@@ -376,7 +375,7 @@ export default class ContentWrapFiles extends Component {
 			const { currentLayoutMode } = this.props;
 			const prop =
 				currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
-			[htmlCodeEl].forEach(function(el) {
+			[htmlCodeEl].forEach(function (el) {
 				const bounds = el.getBoundingClientRect();
 				const size = bounds[prop];
 				if (size < 100) {

src/components/SavedItemPane.jsx

@@ -235,7 +235,7 @@ export default function SavedItemPane({
 								</h2>
 								<img
 									style="max-width: 80%; opacity:0.4"
-									src="assets/empty.svg"
+									src="/assets/empty.svg"
 								/>
 							</div>
 						) : null}

src/index.ejs

@@ -36,7 +36,7 @@
 		<link
 			rel="stylesheet"
 			id="editorThemeLinkTag"
-			href="lib/codemirror/theme/monokai.css"
+			href="/lib/codemirror/theme/monokai.css"
 		/>
 
 		<style id="fontStyleTemplate" type="template">

src/utils.js

@@ -512,7 +512,7 @@ export function prettify({ file, content, type }) {
  * Loaded the code comiler based on the mode selected
  */
 export function handleModeRequirements(mode) {
-	const baseTranspilerPath = 'lib/transpilers';
+	const baseTranspilerPath = '/lib/transpilers';
 	// Exit if already loaded
 	var d = deferred();
 	if (modes[mode].hasLoaded) {