Fix: Allow font theming (monospace) for CodeMirror (#415)

Author: timsnadden

package.json

@@ -52,6 +52,7 @@
     "jss-camel-case": "^4.0.0",
     "jss-compose": "^3.0.1",
     "jss-default-unit": "^6.1.1",
+    "jss-global": "^1.0.1",
     "jss-isolate": "^2.0.1",
     "jss-nested": "^4.0.1",
     "leven": "^2.1.0",

src/rsg-components/Editor/EditorLoaderRenderer.js

@@ -2,14 +2,31 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Styled from 'rsg-components/Styled';
 
-const styles = ({ font, light, codeBackground }) => ({
+const styles = ({ font, monospace, light, codeBackground }) => ({
 	root: {
 		padding: [[7, 16, 10, 7]],
 		fontFamily: font,
 		fontSize: 12,
 		color: light,
 		backgroundColor: codeBackground,
 	},
+	// Tweak CodeMirror styles. Duplicate selectors are for increased specificity
+	'@global': {
+		'.CodeMirror.CodeMirror': {
+			fontFamily: monospace,
+			height: 'auto',
+			padding: [[5, 12]],
+			fontSize: 12,
+		},
+		'.CodeMirror-scroll.CodeMirror-scroll': {
+			height: 'auto',
+			overflowY: 'hidden',
+			overflowX: 'auto',
+		},
+		'.cm-error.cm-error': {
+			background: 'none',
+		},
+	},
 });
 
 export function EditorLoaderRenderer({ classes }) {

src/rsg-components/Playground/Playground.spec.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Playground from './Playground';
+import '../../styles/setupjss';
 import { PlaygroundRenderer } from './PlaygroundRenderer';
 
 const code = '<button>OK</button>';

src/styles/setupjss.js

@@ -10,9 +10,11 @@ import nested from 'jss-nested';
 import camelCase from 'jss-camel-case';
 import defaultUnit from 'jss-default-unit';
 import compose from 'jss-compose';
+import global from 'jss-global';
 
 jss.setup({
 	plugins: [
+		global(),
 		isolate({
 			reset: {
 				// Reset all inherited and non-inherited properties

src/styles/styles.js

@@ -7,24 +7,6 @@ const styles = {
 		margin: 0,
 		padding: 0,
 		border: 0,
-
-		// Tweak CodeMirror styles
-		'& .CodeMirror': {
-			isolate: false,
-			height: 'auto',
-			padding: [[5, 12]],
-			fontSize: 12,
-		},
-		'& .CodeMirror-scroll': {
-			isolate: false,
-			height: 'auto',
-			overflowY: 'hidden',
-			overflowX: 'auto',
-		},
-		'& .cm-error': {
-			isolate: false,
-			background: 'none !important',
-		},
 	},
 };
 

yarn.lock

@@ -4100,6 +4100,10 @@ jss-default-unit@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-6.1.1.tgz#a9a04887a3860d2a8ceb73ddfbc2ddcf808bacb2"
 
+jss-global@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jss-global/-/jss-global-1.0.1.tgz#36731778f6d8649110611f7c178dbcd60fd92b24"
+
 jss-isolate@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jss-isolate/-/jss-isolate-2.0.1.tgz#7ee5591e0dc5d358a2fbed25ccf0f2510413c896"