make settings work :)

webmaker/src/components/ContentWrap.jsx

@@ -292,11 +292,58 @@ export default class ContentWrap extends Component {
 		this.cmCodes.html = this.props.currentItem.html;
 		this.cmCodes.css = this.props.currentItem.css;
 		this.cmCodes.js = this.props.currentItem.js;
-		this.cm.html.setValue(this.cmCodes.html);
+		this.cm.html.setValue(this.cmCodes.html || '');
-		this.cm.css.setValue(this.cmCodes.css);
+		this.cm.css.setValue(this.cmCodes.css || '');
-		this.cm.js.setValue(this.cmCodes.js);
+		this.cm.js.setValue(this.cmCodes.js || '');
 		this.setPreviewContent(true);
-		console.log('componentdidupdate', this.props.currentItem);
+		// console.log('componentdidupdate', this.props.currentItem);
+	}
+	componentDidMount() {
+		this.props.onRef(this);
+	}
+	applyCodemirrorSettings(prefs) {
+		if (!this.cm) {
+			return;
+		}
+		$('#js-html-code').querySelector('.CodeMirror').style.fontSize = $(
+			'#js-css-code'
+		).querySelector('.CodeMirror').style.fontSize = $(
+			'#js-js-code'
+		).querySelector('.CodeMirror').style.fontSize = `${parseInt(
+			prefs.fontSize,
+			10
+		)}px`;
+
+		// consoleEl.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
+
+		// Replace correct css file in LINK tags's href
+		window.editorThemeLinkTag.href = `lib/codemirror/theme/${
+			prefs.editorTheme
+		}.css`;
+		window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
+			/fontname/g,
+			(prefs.editorFont === 'other'
+				? prefs.editorCustomFont
+				: prefs.editorFont) || 'FiraCode'
+		);
+		// window.customEditorFontInput.classList[
+		// 	prefs.editorFont === 'other' ? 'remove' : 'add'
+		// ]('hide');
+
+		['html', 'js', 'css'].forEach(type => {
+			this.cm[type].setOption('indentWithTabs', prefs.indentWith !== 'spaces');
+			this.cm[type].setOption(
+				'blastCode',
+				prefs.isCodeBlastOn ? { effect: 2, shake: false } : false
+			);
+			this.cm[type].setOption('indentUnit', +prefs.indentSize);
+			this.cm[type].setOption('tabSize', +prefs.indentSize);
+			this.cm[type].setOption('theme', prefs.editorTheme);
+
+			// this.cm[type].setOption('keyMap', prefs.keymap);
+			this.cm[type].setOption('lineWrapping', prefs.lineWrap);
+			this.cm[type].refresh();
+		});
 	}
 
 	render() {

webmaker/src/components/Footer.jsx

@@ -44,7 +44,9 @@ export default class Footer extends Component {
 						class="mode-btn  hint--rounded  hint--top-left  hide-on-mobile"
 						aria-label="Edit on CodePen"
 					>
-						Codepen
+						<svg>
+							<use xlinkHref="#codepen-logo" />
+						</svg>
 					</a>
 
 					<a

webmaker/src/components/Modal.jsx

@@ -2,10 +2,10 @@ import { h, Component } from 'preact';
 
 export default class Modal extends Component {
 	componentDidMount() {
-		window.addEventListener('keydown', this.onKeyDownHandler);
+		window.addEventListener('keydown', this.onKeyDownHandler.bind(this));
 	}
 	componentWillUnmount() {
-		window.removeEventListener('keydown', this.onKeyDownHandler);
+		window.removeEventListener('keydown', this.onKeyDownHandler.bind(this));
 	}
 	onKeyDownHandler(e) {
 		if (e.keyCode === 27) {
@@ -17,6 +17,11 @@ export default class Modal extends Component {
 			this.props.closeHandler();
 		}
 	}
+	componentDidUpdate() {
+		document.body.classList[this.props.show ? 'add' : 'remove'](
+			'overlay-visible'
+		);
+	}
 	render() {
 		if (!this.props.show) return null;
 

webmaker/src/components/Settings.jsx

@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import { editorThemes } from '../editorThemes';
 
 export default class Settings extends Component {
 	updateSetting(e) {
@@ -20,7 +21,7 @@ export default class Settings extends Component {
 							checked="true"
 							name="indentation"
 							value="spaces"
-							d-change="updateSetting"
+							onChange={this.updateSetting.bind(this)}
 							data-setting="indentWith"
 						/>{' '}
 						Spaces
@@ -30,7 +31,7 @@ export default class Settings extends Component {
 							type="radio"
 							name="indentation"
 							value="tabs"
-							d-change="updateSetting"
+							onChange={this.updateSetting.bind(this)}
 							data-setting="indentWith"
 						/>{' '}
 						Tabs
@@ -46,7 +47,7 @@ export default class Settings extends Component {
 						max="7"
 						list="indentationSizeList"
 						data-setting="indentSize"
-						d-change="updateSetting"
+						onChange={this.updateSetting.bind(this)}
 					/>
 					<span id="indentationSizeValueEl" />
 					<datalist id="indentationSizeList">
@@ -70,7 +71,7 @@ export default class Settings extends Component {
 							<select
 								style="flex:1;margin-left:20px"
 								data-setting="htmlMode"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 							>
 								<option value="html">HTML</option>
 								<option value="markdown">Markdown</option>
@@ -79,7 +80,7 @@ export default class Settings extends Component {
 							<select
 								style="flex:1;margin-left:20px"
 								data-setting="cssMode"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 							>
 								<option value="css">CSS</option>
 								<option value="scss">SCSS</option>
@@ -91,7 +92,7 @@ export default class Settings extends Component {
 							<select
 								style="flex:1;margin-left:20px"
 								data-setting="jsMode"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 							>
 								<option value="js">JS</option>
 								<option value="coffee">CoffeeScript</option>
@@ -104,15 +105,19 @@ export default class Settings extends Component {
 							<select
 								style="flex:1;margin:0 20px"
 								data-setting="editorTheme"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
-							/>
+							>
+								{editorThemes.map(theme => (
+									<option value={theme}>{theme}</option>
+								))}
+							</select>
 						</label>
 						<label class="line">
 							Font
 							<select
 								style="flex:1;margin:0 20px"
 								data-setting="editorFont"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 							>
 								<option value="FiraCode">Fira Code</option>
 								<option value="Inconsolata">Inconsolata</option>
@@ -127,7 +132,7 @@ export default class Settings extends Component {
 								value=""
 								placeholder="Custom font name here"
 								data-setting="editorCustomFont"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 							/>
 						</label>
 						<label class="line">
@@ -149,8 +154,8 @@ export default class Settings extends Component {
 									checked="true"
 									name="keymap"
 									value="sublime"
-									d-change="updateSetting"
 									data-setting="keymap"
+									onChange={this.updateSetting.bind(this)}
 								/>{' '}
 								Sublime
 							</label>
@@ -159,7 +164,7 @@ export default class Settings extends Component {
 									type="radio"
 									name="keymap"
 									value="vim"
-									d-change="updateSetting"
+									onChange={this.updateSetting.bind(this)}
 									data-setting="keymap"
 								/>{' '}
 								Vim
@@ -173,7 +178,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="lineWrap"
 							/>{' '}
 							Line wrap
@@ -184,7 +189,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="refreshOnResize"
 							/>{' '}
 							Refresh preview on resize
@@ -195,7 +200,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="autoComplete"
 							/>{' '}
 							Auto-complete suggestions
@@ -206,7 +211,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="autoPreview"
 							/>{' '}
 							Auto-preview
@@ -217,7 +222,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="autoSave"
 							/>{' '}
 							Auto-save
@@ -228,7 +233,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="preserveLastCode"
 							/>{' '}
 							Preserve last written code
@@ -239,7 +244,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="replaceNewTab"
 							/>{' '}
 							Replace new tab page
@@ -250,7 +255,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="preserveConsoleLogs"
 							/>{' '}
 							Preserve console logs
@@ -261,7 +266,7 @@ export default class Settings extends Component {
 						>
 							<input
 								type="checkbox"
-								d-change="updateSetting"
+								onChange={this.updateSetting.bind(this)}
 								data-setting="lightVersion"
 							/>{' '}
 							Fast/light version
@@ -279,7 +284,7 @@ export default class Settings extends Component {
 					>
 						<input
 							type="checkbox"
-							d-change="updateSetting"
+							onChange={this.updateSetting.bind(this)}
 							data-setting="isCodeBlastOn"
 						/>{' '}
 						Code blast!
@@ -298,7 +303,7 @@ export default class Settings extends Component {
 						<input
 							type="number"
 							data-setting="infiniteLoopTimeout"
-							d-change="updateSetting"
+							onChange={this.updateSetting.bind(this)}
 						/>{' '}
 						ms
 					</label>

webmaker/src/components/UserCodeMirror.jsx

@@ -1,6 +1,36 @@
 import { h, Component } from 'preact';
 import CodeMirror from 'codemirror';
 
+import 'codemirror/addon/edit/matchbrackets.js';
+import 'codemirror/addon/edit/matchtags.js';
+import 'codemirror/addon/edit/closebrackets.js';
+import 'codemirror/addon/edit/closetag.js';
+import 'codemirror/addon/comment/comment.js';
+import 'codemirror/addon/fold/foldcode.js';
+import 'codemirror/addon/fold/foldgutter.js';
+import 'codemirror/addon/fold/xml-fold.js';
+import 'codemirror/addon/fold/indent-fold.js';
+import 'codemirror/addon/fold/comment-fold.js';
+import 'codemirror/addon/fold/brace-fold.js';
+// import 'codemirror/addon/mode/loadmode.js';
+import 'codemirror/addon/hint/show-hint.js';
+import 'codemirror/addon/hint/javascript-hint.js';
+import 'codemirror/addon/hint/xml-hint.js';
+import 'codemirror/addon/hint/html-hint.js';
+import 'codemirror/addon/hint/css-hint.js';
+import 'codemirror/addon/selection/active-line.js';
+import 'codemirror/addon/search/searchcursor.js';
+import 'codemirror/addon/search/search.js';
+import 'codemirror/addon/dialog/dialog.js';
+import 'codemirror/addon/search/jump-to-line.js';
+
+import 'codemirror/mode/xml/xml.js';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+import 'codemirror/keymap/sublime.js';
+import 'codemirror/keymap/vim.js';
+
 export default class UserCodeMirror extends Component {
 	componentDidMount() {
 		this.initEditor();
@@ -30,15 +60,15 @@ export default class UserCodeMirror extends Component {
 			extraKeys: {
 				Up: function(editor) {
 					// Stop up/down keys default behavior when saveditempane is open
-					if (isSavedItemsPaneOpen) {
+					// if (isSavedItemsPaneOpen) {
-						return;
+					// return;
-					}
+					// }
 					CodeMirror.commands.goLineUp(editor);
 				},
 				Down: function(editor) {
-					if (isSavedItemsPaneOpen) {
+					// if (isSavedItemsPaneOpen) {
-						return;
+					// return;
-					}
+					// }
 					CodeMirror.commands.goLineDown(editor);
 				},
 				'Shift-Tab': function(editor) {
@@ -90,6 +120,9 @@ export default class UserCodeMirror extends Component {
 		}
 		this.props.onCreation(this.cm);
 	}
+	shouldComponentUpdate() {
+		return false;
+	}
 
 	render() {
 		return (

webmaker/src/components/app.jsx

@@ -424,57 +424,12 @@ export default class App extends Component {
 		// Show/hide RUN button based on autoPreview setting.
 		runBtn.classList[prefs.autoPreview ? 'add' : 'remove']('hide');
 
-		// htmlCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
+		this.contentWrap.applyCodemirrorSettings(this.state.prefs);
-		// cssCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-		// jsCode.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
-		// consoleEl.querySelector('.CodeMirror').style.fontSize = prefs.fontSize;
 
 		// Update indentation count when slider is updated
 		// indentationSizeValueEl.textContent = $('[data-setting=indentSize]').value;
 
-		// Replace correct css file in LINK tags's href
+		/*
-		// editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
-		// fontStyleTag.textContent = fontStyleTemplate.textContent.replace(
-		// /fontname/g,
-		// (prefs.editorFont === 'other'
-		// ? prefs.editorCustomFont
-		// : prefs.editorFont) || 'FiraCode'
-		// );
-		// customEditorFontInput.classList[
-		// prefs.editorFont === 'other' ? 'remove' : 'add'
-		// ]('hide');
-
-		/* ['html', 'js', 'css'].forEach(type => {
-			scope.cm[type].setOption(
-				'indentWithTabs',
-				$('[data-setting=indentWith]:checked').value !== 'spaces'
-			);
-			scope.cm[type].setOption(
-				'blastCode',
-				$('[data-setting=isCodeBlastOn]').checked
-					? { effect: 2, shake: false }
-					: false
-			);
-			scope.cm[type].setOption(
-				'indentUnit',
-				+$('[data-setting=indentSize]').value
-			);
-			scope.cm[type].setOption(
-				'tabSize',
-				+$('[data-setting=indentSize]').value
-			);
-			scope.cm[type].setOption('theme', $('[data-setting=editorTheme]').value);
-
-			scope.cm[type].setOption(
-				'keyMap',
-				$('[data-setting=keymap]:checked').value
-			);
-			scope.cm[type].setOption(
-				'lineWrapping',
-				$('[data-setting=lineWrap]').checked
-			);
-			scope.cm[type].refresh();
-		});
 		scope.consoleCm.setOption('theme', $('[data-setting=editorTheme]').value);
 		scope.acssSettingsCm.setOption(
 			'theme',
@@ -510,6 +465,7 @@ export default class App extends Component {
 					<ContentWrap
 						currentItem={this.state.currentItem}
 						onCodeChange={this.onCodeChange.bind(this)}
+						onRef={comp => (this.contentWrap = comp)}
 					/>
 					<div class="global-console-container" id="globalConsoleContainerEl" />
 					<Footer

webmaker/src/editorThemes.js

@@ -0,0 +1,51 @@
+export const editorThemes = [
+	'3024-day',
+	'3024-night',
+	'abcdef',
+	'ambiance',
+	'base2tone-meadow-dark',
+	'base16-dark',
+	'base16-light',
+	'bespin',
+	'blackboard',
+	'cobalt',
+	'colorforth',
+	'dracula',
+	'duotone-dark',
+	'duotone-light',
+	'eclipse',
+	'elegant',
+	'erlang-dark',
+	'hopscotch',
+	'icecoder',
+	'isotope',
+	'lesser-dark',
+	'liquibyte',
+	'material',
+	'mbo',
+	'mdn-like',
+	'midnight',
+	'monokai',
+	'neat',
+	'neo',
+	'night',
+	'panda-syntax',
+	'paraiso-dark',
+	'paraiso-light',
+	'pastel-on-dark',
+	'railscasts',
+	'rubyblue',
+	'seti',
+	'solarized dark',
+	'solarized light',
+	'the-matrix',
+	'tomorrow-night-bright',
+	'tomorrow-night-eighties',
+	'ttcn',
+	'twilight',
+	'vibrant-ink',
+	'xq-dark',
+	'xq-light',
+	'yeti',
+	'zenburn'
+];