refactor how codemirror options apply from settings.

Now Usercodemirror component handles each own option
updation.

src/components/ContentWrap.jsx

@@ -288,50 +288,25 @@ export default class ContentWrap extends Component {
 		]).then(() => this.setPreviewContent(true));
 	}
 	applyCodemirrorSettings(prefs) {
-		if (!this.cm) {
-			return;
+		if (window.consoleEl) {
+			window.consoleEl.querySelector(
+				'.CodeMirror'
+			).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
 		}
-		htmlCodeEl.querySelector(
-			'.CodeMirror'
-		).style.fontSize = cssCodeEl.querySelector(
-			'.CodeMirror'
-		).style.fontSize = jsCodeEl.querySelector(
-			'.CodeMirror'
-		).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
-		window.consoleEl.querySelector('.CodeMirror').style.fontSize = `${parseInt(
-			prefs.fontSize,
-			10
-		)}px`;
 
 		// Replace correct css file in LINK tags's href
-		window.editorThemeLinkTag.href = `lib/codemirror/theme/${
-			prefs.editorTheme
-		}.css`;
+		if (prefs.editorTheme) {
+			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');
-		this.consoleCm.setOption('theme', prefs.editorTheme);
-
-		['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();
-		});
 	}
 
 	// Check all the code wrap if they are minimized or maximized

src/components/ContentWrapFiles.jsx

@@ -185,7 +185,7 @@ export default class ContentWrapFiles extends Component {
 		}
 
 		if (!this.props.prefs.preserveConsoleLogs) {
-			// this.clearConsole();
+			this.clearConsole();
 		}
 		this.cleanupErrors();
 
@@ -221,7 +221,7 @@ export default class ContentWrapFiles extends Component {
 		this.cm.refresh();
 		window.cm = this.cm;
 
-		// this.clearConsole();
+		this.clearConsole();
 
 		// Set preview only when all modes are updated so that preview doesn't generate on partially
 		// correct modes and also doesn't happen 3 times.
@@ -230,41 +230,25 @@ export default class ContentWrapFiles extends Component {
 		);
 	}
 	applyCodemirrorSettings(prefs) {
-		if (!this.cm) {
-			return;
+		if (window.consoleEl) {
+			window.consoleEl.querySelector(
+				'.CodeMirror'
+			).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
 		}
-		htmlCodeEl.querySelector('.CodeMirror').style.fontSize = `${parseInt(
-			prefs.fontSize,
-			10
-		)}px`;
 
 		// Replace correct css file in LINK tags's href
-		window.editorThemeLinkTag.href = `lib/codemirror/theme/${
-			prefs.editorTheme
-		}.css`;
+		if (prefs.editorTheme) {
+			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');
-		// this.consoleCm.setOption('theme', prefs.editorTheme);
-
-		this.cm.setOption('indentWithTabs', prefs.indentWith !== 'spaces');
-		this.cm.setOption(
-			'blastCode',
-			prefs.isCodeBlastOn ? { effect: 2, shake: false } : false
-		);
-		this.cm.setOption('indentUnit', +prefs.indentSize);
-		this.cm.setOption('tabSize', +prefs.indentSize);
-		this.cm.setOption('theme', prefs.editorTheme);
-
-		this.cm.setOption('keyMap', prefs.keymap);
-		this.cm.setOption('lineWrapping', prefs.lineWrap);
-		this.cm.refresh();
 	}
 
 	// Check all the code wrap if they are minimized or maximized

src/components/SidePane.jsx

@@ -6,7 +6,6 @@ function FileIcon({ fileName }) {
 	if (!fileName) fileName = 'sd.sd';
 
 	const type = fileName.match(/.(\w+)$/)[1];
-	console.log(type);
 	switch (type) {
 		case 'html':
 			return (

src/components/UserCodeMirror.jsx

@@ -38,27 +38,59 @@ emmet(CodeMirror);
 export default class UserCodeMirror extends Component {
 	componentDidMount() {
 		this.initEditor();
+		this.textarea.parentNode.querySelector(
+			'.CodeMirror'
+		).style.fontSize = `${parseInt(this.props.prefs.fontSize, 10)}px`;
 	}
-	shouldComponentUpdate() {
+	shouldComponentUpdate(nextProps) {
+		if (nextProps.prefs !== this.props.prefs) {
+			const { prefs } = nextProps;
+			console.log('updating', nextProps.options.mode);
+
+			this.cm.setOption('indentWithTabs', prefs.indentWith !== 'spaces');
+			this.cm.setOption(
+				'blastCode',
+				prefs.isCodeBlastOn ? { effect: 2, shake: false } : false
+			);
+			this.cm.setOption('theme', prefs.editorTheme);
+
+			this.cm.setOption('indentUnit', +prefs.indentSize);
+			this.cm.setOption('tabSize', +prefs.indentSize);
+
+			this.cm.setOption('keyMap', prefs.keymap);
+			this.cm.setOption('lineWrapping', prefs.lineWrap);
+
+			if (this.textarea) {
+				this.textarea.parentNode.querySelector(
+					'.CodeMirror'
+				).style.fontSize = `${parseInt(prefs.fontSize, 10)}px`;
+			}
+
+			this.cm.refresh();
+		}
+
 		return false;
 	}
 
 	initEditor() {
-		const options = this.props.options;
+		const { options, prefs } = this.props;
+		console.log(100, prefs.lineWrap);
 		this.cm = CodeMirror.fromTextArea(this.textarea, {
 			mode: options.mode,
 			lineNumbers: true,
-			lineWrapping: true,
+			lineWrapping: !!prefs.lineWrap,
 			autofocus: options.autofocus || false,
 			autoCloseBrackets: true,
 			autoCloseTags: true,
 			matchBrackets: true,
 			matchTags: options.matchTags || false,
 			tabMode: 'indent',
-			keyMap: 'sublime',
-			theme: 'monokai',
+			keyMap: prefs.keyMap || 'sublime',
+			theme: prefs.editorTheme || 'monokai',
 			lint: !!options.lint,
-			tabSize: 2,
+			tabSize: +prefs.indentSize || 2,
+			indentWithTabs: prefs.indentWith !== 'spaces',
+			indentUnit: +prefs.indentSize,
 			foldGutter: true,
 			styleActiveLine: true,
 			gutters: options.gutters || [],
@@ -91,7 +123,7 @@ export default class UserCodeMirror extends Component {
 					const input = $('[data-setting=indentWith]:checked');
 					if (
 						!editor.somethingSelected() &&
-						(!input || input.value === 'spaces')
+						(!prefs.indentWith || prefs.indentWith === 'spaces')
 					) {
 						// softtabs adds spaces. This is required because by default tab key will put tab, but we want
 						// to indent with spaces if `spaces` is preferred mode of indentation.

src/components/app.jsx

@@ -195,7 +195,7 @@ export default class App extends Component {
 				this.createNewItem();
 			}
 			Object.assign(this.state.prefs, result);
-			this.setState({ prefs: this.state.prefs });
+			this.setState({ prefs: { ...this.state.prefs } });
 			this.updateSetting();
 		});