feat(editor): Passes all codeMirror options to editor

docs/Configuration.md

@@ -14,10 +14,10 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`configureServer`](#configureserver)
 * [`dangerouslyUpdateWebpackConfig`](#dangerouslyupdatewebpackconfig)
 * [`defaultExample`](#defaultexample)
+* [`editorConfig`](#editorConfig)
 * [`getComponentPathLine`](#getcomponentpathline)
 * [`getExampleFilename`](#getexamplefilename)
 * [`handlers`](#handlers)
-* [`highlightTheme`](#highlighttheme)
 * [`ignore`](#ignore)
 * [`logger`](#logger)
 * [`previewDelay`](#previewdelay)
@@ -168,6 +168,12 @@ module.exports = {
 }
 ```
 
+#### `editorConfig`
+
+Type: `Object`, default: [scripts/schemas/config.js](https://github.com/styleguidist/react-styleguidist/tree/master/scripts/schemas/config.js#L101)
+
+Source code editor options, see [CodeMirror docs](https://codemirror.net/doc/manual.html#config) for all available options.
+
 #### `getExampleFilename`
 
 Type: `Function`, default: finds `Readme.md` or `ComponentName.md` in the component folder
@@ -227,12 +233,6 @@ module.exports = {
 }
 ```
 
-#### `highlightTheme`
-
-Type: `String`, default: `base16-light`
-
-[CodeMirror theme](http://codemirror.net/demo/theme.html) name to use for syntax highlighting in the editor.
-
 #### `ignore`
 
 Type: `String[]`, default: `['**/__tests__/**', '**/*.test.js', '**/*.test.jsx', '**/*.spec.js', '**/*.spec.jsx']`

loaders/styleguide-loader.js

@@ -24,6 +24,7 @@ const CLIENT_CONFIG_OPTIONS = [
 	'theme',
 	'styles',
 	'compilerConfig',
+	'editorConfig',
 ];
 
 module.exports = function() {};

scripts/__tests__/config.spec.js

@@ -197,3 +197,20 @@ it('should allow no webpack config', () => {
 	const fn = () => getConfig();
 	expect(fn).not.toThrow();
 });
+
+it('editorConfig option should have default values', () => {
+	const result = getConfig();
+	expect(result.editorConfig).toHaveProperty('mode', 'jsx');
+	expect(result.editorConfig).toHaveProperty('theme', 'base16-light');
+});
+
+it('should merge default editorConfig with options provided by the user', () => {
+	const result = getConfig({
+		editorConfig: {
+			mode: 'js',
+		},
+	});
+
+	expect(result.editorConfig).toHaveProperty('mode', 'js');
+	expect(result.editorConfig).toHaveProperty('theme', 'base16-light');
+});

scripts/logger.js

@@ -2,13 +2,14 @@
 /* eslint-disable no-console */
 
 const _ = require('lodash/fp');
+const chalk = require('chalk');
 const logger = require('glogg')('rsg');
 
 const format = message => message.trim() + '\n';
 
 const printers = {
 	info: message => console.log(format(message)),
-	warn: message => console.warn(`Warning: ${format(message)}`),
+	warn: message => console.warn(chalk.yellow(`Warning: ${format(message)}`)),
 	debug: message => console.log(format(message)),
 };
 

scripts/schemas/config.js

@@ -93,6 +93,27 @@ module.exports = {
 	highlightTheme: {
 		type: 'string',
 		default: 'base16-light',
+		deprecated: 'Use the theme property in the editorConfig option instead',
+	},
+	editorConfig: {
+		type: 'object',
+		process: (value, config) => {
+			const defaults = {
+				theme: 'base16-light',
+				mode: 'jsx',
+				lineWrapping: true,
+				smartIndent: false,
+				matchBrackets: true,
+				viewportMargin: Infinity,
+				lineNumbers: false,
+			};
+			return Object.assign(
+				{},
+				defaults,
+				config.highlightTheme && { theme: config.highlightTheme },
+				value
+			);
+		},
 	},
 	logger: {
 		type: 'object',

scripts/utils/sanitizeConfig.js

@@ -89,7 +89,7 @@ module.exports = function sanitizeConfig(config, schema, rootDir) {
 				throw new StyleguidistError(message);
 			}
 		} else if (props.deprecated) {
-			logger.warn(`${chalk.bold(key)} config option is deprecated. ${props.deprecated}`);
+			logger.warn(`${key} config option is deprecated. ${props.deprecated}`);
 		} else if (props.removed) {
 			throw new StyleguidistError(`${chalk.bold(key)} config option was removed. ${props.removed}`);
 		}

src/rsg-components/Editor/Editor.js

@@ -11,15 +11,6 @@ require('!!../../../loaders/style-loader!../../../loaders/css-loader!codemirror/
 // eslint-disable-next-line import/no-unresolved
 require('!!../../../loaders/style-loader!../../../loaders/css-loader!rsg-codemirror-theme.css');
 
-const codemirrorOptions = {
-	mode: 'jsx',
-	lineNumbers: false,
-	lineWrapping: true,
-	smartIndent: false,
-	matchBrackets: true,
-	viewportMargin: Infinity,
-};
-
 const UPDATE_DELAY = 10;
 
 export default class Editor extends Component {
@@ -46,11 +37,7 @@ export default class Editor extends Component {
 
 	render() {
 		const { code } = this.props;
-		const { highlightTheme } = this.context.config;
-		const options = {
-			...codemirrorOptions,
-			theme: highlightTheme,
-		};
-		return <CodeMirror value={code} onChange={this.handleChange} options={options} />;
+		const { editorConfig } = this.context.config;
+		return <CodeMirror value={code} onChange={this.handleChange} options={editorConfig} />;
 	}
 }

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

@@ -10,6 +10,9 @@ const options = {
 		config: {
 			showCode: false,
 			highlightTheme: 'base16-light',
+			editorConfig: {
+				mode: 'js',
+			},
 		},
 	},
 	childContextTypes: {

src/rsg-components/Editor/__snapshots__/Editor.spec.js.snap

@@ -5,13 +5,7 @@ exports[`Editor should renderer and editor 1`] = `
   onChange={[Function]}
   options={
     Object {
-      "lineNumbers": false,
-      "lineWrapping": true,
-      "matchBrackets": true,
-      "mode": "jsx",
-      "smartIndent": false,
-      "theme": "base16-light",
-      "viewportMargin": Infinity,
+      "mode": "js",
     }
   }
   value=