refactor CodeMirror library instantiation

shared/naturalcrit/codeEditor/code-mirror.js

@@ -0,0 +1,36 @@
+let CodeMirror;
+if(typeof navigator !== 'undefined'){
+	CodeMirror = require('codemirror');
+
+	//Language Modes
+	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
+	require('codemirror/mode/css/css.js');
+	require('codemirror/mode/javascript/javascript.js');
+
+	//Addons
+	//Code folding
+	require('codemirror/addon/fold/foldcode.js');
+	require('codemirror/addon/fold/foldgutter.js');
+	//Search and replace
+	require('codemirror/addon/search/search.js');
+	require('codemirror/addon/search/searchcursor.js');
+	require('codemirror/addon/search/jump-to-line.js');
+	require('codemirror/addon/search/match-highlighter.js');
+	require('codemirror/addon/search/matchesonscrollbar.js');
+	require('codemirror/addon/dialog/dialog.js');
+	//Trailing space highlighting
+	// require('codemirror/addon/edit/trailingspace.js');
+	//Active line highlighting
+	// require('codemirror/addon/selection/active-line.js');
+	//Scroll past last line
+	require('codemirror/addon/scroll/scrollpastend.js');
+	//Auto-closing
+	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
+	require('codemirror/addon/fold/xml-fold.js');
+	require('codemirror/addon/edit/closetag.js');
+
+	const foldCode = require('./helpers/fold-code');
+	foldCode.registerHomebreweryHelper(CodeMirror);
+}
+
+module.exports = CodeMirror;

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -5,43 +5,8 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 const closeTag = require('./helpers/close-tag');
-const { SNIPPET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants');
 const Hints = require('./helpers/widget-elements/hints/hints.jsx');
-
+const CodeMirror = require('./code-mirror.js');
-let CodeMirror;
-if(typeof navigator !== 'undefined'){
-	CodeMirror = require('codemirror');
-
-	//Language Modes
-	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
-	require('codemirror/mode/css/css.js');
-	require('codemirror/mode/javascript/javascript.js');
-
-	//Addons
-	//Code folding
-	require('codemirror/addon/fold/foldcode.js');
-	require('codemirror/addon/fold/foldgutter.js');
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.js');
-	//Scroll past last line
-	require('codemirror/addon/scroll/scrollpastend.js');
-	//Auto-closing
-	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
-	require('codemirror/addon/fold/xml-fold.js');
-	require('codemirror/addon/edit/closetag.js');
-
-	const foldCode = require('./helpers/fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
-}
 
 const themeWidgets = require('../../../themes/V3/5ePHB/widgets');
 
@@ -182,7 +147,7 @@ const CodeEditor = createClass({
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
 		this.setState({
-			widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror, (hints, field)=>{
+			widgetUtils : require('./helpers/widgets')(themeWidgets, this.codeMirror, (hints, field)=>{
 				this.setState({
 					hints,
 					hintsField : field

shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx

@@ -2,20 +2,20 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 require('./checkbox.less');
+const CodeMirror = require('../../../code-mirror.js');
 
 const Checkbox = createClass({
 	getDefaultProps : function() {
 		return {
-			CodeMirror : {},
+			value  : '',
-			value      : '',
+			prefix : '',
-			prefix     : '',
+			cm     : {},
-			cm         : {},
+			n      : -1
-			n          : -1
 		};
 	},
 
 	handleChange : function (e) {
-		const { cm, n, value, prefix, CodeMirror } = this.props;
+		const { cm, n, value, prefix } = this.props;
 		const { text } = cm.lineInfo(n);
 		const updatedPrefix = `{{${prefix}`;
 		if(e.target?.checked)

shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx

@@ -3,6 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const { NUMBER_PATTERN, HINT_TYPE, PATTERNS } = require('../constants');
+const CodeMirror = require('../../../code-mirror.js');
 
 const DEFAULT_WIDTH = '30px';
 
@@ -121,7 +122,7 @@ const Text = createClass({
 		}
 	},
 	onChange : function (e){
-		const { cm, text, field, n, CodeMirror } = this.props;
+		const { cm, text, field, n } = this.props;
 		const pattern = PATTERNS.field[field.type](field.name);
 		const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
 		let index = text.indexOf(`${label}:${current}`);

shared/naturalcrit/codeEditor/helpers/widgets.js

@@ -3,6 +3,7 @@ const ReactDOM = require('react-dom');
 const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
 require('./widget-elements/hints/hints.jsx');
 const { Text, Checkbox } = require('./widget-elements');
+const CodeMirror = require('../code-mirror.js');
 
 // See https://codemirror.net/5/addon/hint/css-hint.js for code reference
 const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
@@ -17,7 +18,7 @@ const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'
 
 const genKey = (...args)=>args.join('-');
 
-module.exports = function(CodeMirror, widgets, cm, setHints) {
+module.exports = function(widgets, cm, setHints) {
 	const spec = CodeMirror.resolveMode('text/css');
 	const headless = CodeMirror(()=>{});