feat(editor): Passes all codeMirror options to editor #662

SaraVieira · 2017-10-31T19:41:56Z

All you now pass inside codeMirrorOptions in your styleguide config will be passed to codeMirror.
I left highlight theme out because I didn't want to cause a breaking change

closes #648

sapegin

Thanks for the pull request!

Please have a look at my feedback to #649, most of the comments are valid here too.

SaraVieira · 2017-11-06T14:23:30Z

This is a breaking change, we should keep the old option until the next major release. See updateExample option in the config schema.

I left the option there :)

editorConfig would be a more generic name, and better match existing options like compilerConfig.

Okay , makes sense

sapegin · 2017-11-06T14:28:43Z

I left the option there :)

I still think we should add a deprecation warning, it’s not good to have two valid ways of changing one option.

SaraVieira · 2017-11-09T17:40:52Z

Name has been changed sir !

How should I add that warning ? :)

sapegin · 2017-11-09T17:48:01Z

You need to add deprecated field with a recommendation for a new option:

react-styleguidist/scripts/utils/sanitizeConfig.js

Lines 91 to 92 in 043ba23

    
           } else if (props.deprecated) { 
        
           	logger.warn(`${chalk.bold(key)} config option is deprecated. ${props.deprecated}`);

sapegin · 2017-11-09T17:53:40Z

You also need to merge the old option with the new object in the config, we shouldn’t access the old option anywhere else.

SaraVieira · 2017-11-12T15:41:20Z

Yellow !

There was a problem with the logger so I ended up using chalk with a yellow color it looks like this:

sapegin · 2017-11-12T20:58:00Z

scripts/utils/sanitizeConfig.js

@@ -89,7 +88,8 @@ 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}`);
+			// eslint-disable-next-line no-console
+			console.log(chalk.yellow.bold(`${key} config option is deprecated. ${props.deprecated}`));


What was the problem?

It simply did not log anything

We need to find what’s the issue.

It was actually a bug, I’ve fixed it in master and updated your branch — should work now.

sapegin · 2017-11-12T20:59:44Z

src/rsg-components/Editor/Editor.js

 	lineWrapping: true,
 	smartIndent: false,
 	matchBrackets: true,
 	viewportMargin: Infinity,
+	lineNumbers: false,
+	theme: 'base16-light',


Now we have the same defaults object two times. Keep it in the config only and merge using process method.

I'm sorry , what do you mean ? :(

Too many words

You have this object twice: here and in the config schema. We need only one in the schema.

Check how process method is used in the schema, you need something similar. You also need it to merge the old option with the new one.

sapegin · 2017-11-12T21:00:30Z

src/rsg-components/Editor/Editor.js

@@ -46,9 +47,10 @@ export default class Editor extends Component {

 	render() {
 		const { code } = this.props;
-		const { highlightTheme } = this.context.config;
+		const { highlightTheme, editorConfig } = this.context.config;


We should not use highlightTheme anywhere except the config schema. Now you’re overwriting the right option with the wrong one anyway.

Because I thought this is where you meant fpr me to merge

You also need to merge the old option with the new object in the config, we shouldn’t access the old option anywhere else.

codecov-io · 2017-11-13T08:53:03Z

Codecov Report

Merging #662 into master will decrease coverage by 0.14%.
The diff coverage is 88.88%.

Impacted Files	Coverage Δ
loaders/styleguide-loader.js	`100% <ø> (ø)`	⬆️
scripts/utils/sanitizeConfig.js	`100% <100%> (ø)`	⬆️
scripts/schemas/config.js	`85.96% <100%> (+1.05%)`	⬆️
src/rsg-components/Editor/Editor.js	`85.71% <100%> (-1.79%)`	⬇️
scripts/logger.js	`76.92% <50%> (+1.92%)`	⬆️
src/utils/getRouteData.js	`100% <0%> (ø)`	⬆️
src/utils/renderStyleguide.js	`75% <0%> (ø)`

sapegin · 2017-11-24T13:51:42Z

@SaraVieira Hey Sara, any plans to finish? It’s almost done 🦄

closes #648

This reverts commit afe03cf.

SaraVieira · 2017-12-18T15:19:41Z

Hello ! Sorry for the time it passed :(

I was in london and super busy :(

It's not repeated anymore :)

About the process .... should it get the value i+and if none is return the hightlight theme one and the defaults ?

sapegin · 2017-12-18T15:26:46Z

Merge value of highlightTheme option to theme field.
Merge value of editorConfig with default values object (it shouldn’t be in default field because we want to merge user options with defaults, not overwrite defaults).

Something like this:

editorConfig: {
  // ...
  process: (value, config) => {
    return Object.assign({}, { theme: config.highlightTheme }, value);
  },
},

SaraVieira · 2017-12-18T15:47:25Z

Like this ?

sapegin · 2017-12-18T15:48:42Z

Almost: defaults should be in the schema.

SaraVieira · 2017-12-19T10:59:50Z

The CI can't find jest :(

sapegin · 2017-12-19T11:01:14Z

We need to find what’s the issue because it works in master.

SaraVieira · 2017-12-19T11:05:35Z

I know , the weirdest is that I didn't change anything on any files that have anything to do with config :(

SaraVieira · 2017-12-19T12:38:49Z

@sapegin did you do anything ? The tests are now passing

sapegin · 2017-12-19T12:42:34Z

I’ve cleared Travis cache and restarted them.

sapegin · 2017-12-19T12:50:56Z

The very last thing: docs! 📖

… 648

SaraVieira · 2017-12-19T13:10:58Z

docs/Configuration.md

@@ -227,11 +227,22 @@ module.exports = {
 }
 ```

-#### `highlightTheme`


Doc changes here :)

sapegin · 2017-12-19T13:14:25Z

docs/Configuration.md


-Type: `String`, default: `base16-light`
+Type: `Object`, default:
+```


I’d put a link to the source instead of an object.

sapegin · 2017-12-19T13:14:39Z

docs/Configuration.md

@@ -17,7 +17,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 * [`getComponentPathLine`](#getcomponentpathline)
 * [`getExampleFilename`](#getexamplefilename)
 * [`handlers`](#handlers)
-* [`highlightTheme`](#highlighttheme)
+* [`editorConfig`](#editorConfig)


They aren’t ordered now.

sapegin · 2017-12-19T13:16:06Z

docs/Configuration.md


-[CodeMirror theme](http://codemirror.net/demo/theme.html) name to use for syntax highlighting in the editor.
+This will determine how your editor looks, you can check [here](https://codemirror.net/doc/manual.html#config) all the available options


Shorter at least:

Source code editor options, see CodeMirror docs for all available options.

SaraVieira · 2017-12-19T13:51:02Z

Docs updated! Sorry , didn't notice it was in alphabetic order 🤦‍♀️

sapegin · 2017-12-19T13:51:02Z

docs/Configuration.md

@@ -168,6 +168,12 @@ module.exports = {
 }
 ```

+#### `editorConfig`
+
+Type: `Object`, default: [scripts/schemas/config.js](https://github.com/styleguidist/react-styleguidist/blob/87efdde2d52209e9c4072368402d11030943d69f/scripts/schemas/config.js#L101)


Better to point to master in case we change the options.

SaraVieira · 2017-12-19T14:00:31Z

That was dumb of me 🤦‍♀️

Done !! 🙂

sapegin · 2017-12-19T14:01:54Z

Awesome! Praying for CI again 🙏

SaraVieira · 2017-12-19T14:45:51Z

Weird, some links are failing in the snapshots only on node 4

sapegin · 2017-12-19T14:48:21Z

Yup, that’s very weird. We have that in master too. Restart often helps.

#725 (comment)

sapegin · 2017-12-19T14:56:17Z

Merged!

SaraVieira · 2017-12-19T14:57:30Z

YES 🌈

@SaraVieira

## New features * New option `editorConfig` to change CodeMirror options (#648, [#662](#662) by @SaraVieira) * Allow descriptions for sections ([#743](#743) by @SaraVieira) * Add TypeScript files to default components and ignore patterns ([#749](#749), part of [#750](#750)) ## Bug fixes * Fix global access to all components in isolation mode ([#738](#738)) * Fix color issue in Safari ([#739](#739)) * Allow overriding of renderer-only components ([#710](#710)) * Do not overflow floated elements in examples (#772, [#773](#773) by @roblevintennis) * HTML escaping in Add example block ([#741](#741)) * Fix infinite loop caused by markdown-to-jsx ([#742](#742))

@SaraVieira

## New features * New option `editorConfig` to change CodeMirror options (#648, [#662](#662) by @SaraVieira) * Allow descriptions for sections ([#743](#743) by @SaraVieira) * Add TypeScript files to default components and ignore patterns ([#749](#749), part of [#750](#750)) ## Bug fixes * Fix global access to all components in isolation mode ([#738](#738)) * Fix color issue in Safari ([#739](#739)) * Allow overriding of renderer-only components ([#710](#710)) * Do not overflow floated elements in examples (#772, [#773](#773) by @roblevintennis) * HTML escaping in Add example block ([#741](#741)) * Fix infinite loop caused by markdown-to-jsx ([#742](#742))

@SaraVieira

## New features * New option `editorConfig` to change CodeMirror options (#648, [#662](#662) by @SaraVieira) * Allow descriptions for sections ([#743](#743) by @SaraVieira) * Add TypeScript files to default components and ignore patterns ([#749](#749), part of [#750](#750)) ## Bug fixes * Fix global access to all components in isolation mode ([#738](#738)) * Fix color issue in Safari ([#739](#739)) * Allow overriding of renderer-only components ([#710](#710)) * Do not overflow floated elements in examples (#772, [#773](#773) by @roblevintennis) * HTML escaping in Add example block ([#741](#741)) * Fix infinite loop caused by markdown-to-jsx ([#742](#742))

@SaraVieira

## New features * New option `editorConfig` to change CodeMirror options (#648, [#662](styleguidist/react-styleguidist#662) by @SaraVieira) * Allow descriptions for sections ([#743](styleguidist/react-styleguidist#743) by @SaraVieira) * Add TypeScript files to default components and ignore patterns ([#749](styleguidist/react-styleguidist#749), part of [#750](styleguidist/react-styleguidist#750)) ## Bug fixes * Fix global access to all components in isolation mode ([#738](styleguidist/react-styleguidist#738)) * Fix color issue in Safari ([#739](styleguidist/react-styleguidist#739)) * Allow overriding of renderer-only components ([#710](styleguidist/react-styleguidist#710)) * Do not overflow floated elements in examples (#772, [#773](styleguidist/react-styleguidist#773) by @roblevintennis) * HTML escaping in Add example block ([#741](styleguidist/react-styleguidist#741)) * Fix infinite loop caused by markdown-to-jsx ([#742](styleguidist/react-styleguidist#742))

@SaraVieira

## New features * New option `editorConfig` to change CodeMirror options (#648, [#662](styleguidist/react-styleguidist#662) by @SaraVieira) * Allow descriptions for sections ([#743](styleguidist/react-styleguidist#743) by @SaraVieira) * Add TypeScript files to default components and ignore patterns ([#749](styleguidist/react-styleguidist#749), part of [#750](styleguidist/react-styleguidist#750)) ## Bug fixes * Fix global access to all components in isolation mode ([#738](styleguidist/react-styleguidist#738)) * Fix color issue in Safari ([#739](styleguidist/react-styleguidist#739)) * Allow overriding of renderer-only components ([#710](styleguidist/react-styleguidist#710)) * Do not overflow floated elements in examples (#772, [#773](styleguidist/react-styleguidist#773) by @roblevintennis) * HTML escaping in Add example block ([#741](styleguidist/react-styleguidist#741)) * Fix infinite loop caused by markdown-to-jsx ([#742](styleguidist/react-styleguidist#742))

@SaraVieira

## New features * New option `editorConfig` to change CodeMirror options (#648, [#662](styleguidist/react-styleguidist#662) by @SaraVieira) * Allow descriptions for sections ([#743](styleguidist/react-styleguidist#743) by @SaraVieira) * Add TypeScript files to default components and ignore patterns ([#749](styleguidist/react-styleguidist#749), part of [#750](styleguidist/react-styleguidist#750)) ## Bug fixes * Fix global access to all components in isolation mode ([#738](styleguidist/react-styleguidist#738)) * Fix color issue in Safari ([#739](styleguidist/react-styleguidist#739)) * Allow overriding of renderer-only components ([#710](styleguidist/react-styleguidist#710)) * Do not overflow floated elements in examples (#772, [#773](styleguidist/react-styleguidist#773) by @roblevintennis) * HTML escaping in Add example block ([#741](styleguidist/react-styleguidist#741)) * Fix infinite loop caused by markdown-to-jsx ([#742](styleguidist/react-styleguidist#742))

SaraVieira requested a review from sapegin October 31, 2017 19:41

sapegin requested changes Nov 6, 2017

View reviewed changes

sapegin added this to the 6.1.0 milestone Nov 7, 2017

sapegin requested changes Nov 12, 2017

View reviewed changes

sapegin mentioned this pull request Nov 13, 2017

Passing codemirrorOptions as a configuration #649

Closed

SaraVieira and others added 9 commits December 18, 2017 15:02

feat(editor): Passes all codeMirror options to editot

12d041c

closes #648

rename to editorconfig

6737194

add deprecated prop

721d992

removed added option in config

53af58c

fix tests

5ed3350

Revert "fix tests"

d9de7d9

This reverts commit afe03cf.

Fix: Revert deprecate option changes

0eabb99

Fix: Tweak text

707404f

Fix: Make all warnings yellow again

b1436d8

SaraVieira force-pushed the 648 branch from 6d3a48e to b1436d8 Compare December 18, 2017 15:03

SaraVieira added 2 commits December 18, 2017 15:14

fix: remove duplicated

5ff5199

fic: fix tests

d812a14

fix: remove duplicated

cb0c2ed

SaraVieira added 2 commits December 19, 2017 13:10

add docs

b74188a

Merge branch '648' of github.com:styleguidist/react-styleguidist into…

87efdde

… 648

SaraVieira commented Dec 19, 2017

View reviewed changes

docs/Configuration.md

@@ -227,11 +227,22 @@ module.exports = {

}

```

#### `highlightTheme`

Copy link

Collaborator Author

SaraVieira Dec 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doc changes here :)

sapegin reviewed Dec 19, 2017

View reviewed changes

update docs

477ab67

sapegin reviewed Dec 19, 2017

View reviewed changes

change to master

1c158fc

sapegin merged commit 5a5a376 into master Dec 19, 2017

sapegin deleted the 648 branch December 19, 2017 14:56

sapegin modified the milestones: 6.1.0, 6.2.0 Dec 19, 2017


		[CodeMirror theme](http://codemirror.net/demo/theme.html) name to use for syntax highlighting in the editor.
		This will determine how your editor looks, you can check [here](https://codemirror.net/doc/manual.html#config) all the available options

feat(editor): Passes all codeMirror options to editor #662

feat(editor): Passes all codeMirror options to editor #662

Conversation

SaraVieira commented Oct 31, 2017

sapegin left a comment

Choose a reason for hiding this comment

SaraVieira commented Nov 6, 2017

sapegin commented Nov 6, 2017

SaraVieira commented Nov 9, 2017

sapegin commented Nov 9, 2017

sapegin commented Nov 9, 2017

SaraVieira commented Nov 12, 2017

sapegin Nov 12, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov-io commented Nov 13, 2017 • edited

Codecov Report

sapegin commented Nov 24, 2017

SaraVieira commented Dec 18, 2017

sapegin commented Dec 18, 2017 • edited

SaraVieira commented Dec 18, 2017

sapegin commented Dec 18, 2017

SaraVieira commented Dec 19, 2017

sapegin commented Dec 19, 2017

SaraVieira commented Dec 19, 2017

SaraVieira commented Dec 19, 2017

sapegin commented Dec 19, 2017

sapegin commented Dec 19, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SaraVieira commented Dec 19, 2017

Choose a reason for hiding this comment

SaraVieira commented Dec 19, 2017

sapegin commented Dec 19, 2017

SaraVieira commented Dec 19, 2017

sapegin commented Dec 19, 2017

sapegin commented Dec 19, 2017

SaraVieira commented Dec 19, 2017

sapegin Nov 12, 2017 •

edited

codecov-io commented Nov 13, 2017 •

edited

sapegin commented Dec 18, 2017 •

edited