Skip to content

Commit 74925fb

Browse files
scniroscniro
committed
better docs 😎
1 parent 235a2f8 commit 74925fb

File tree

15 files changed

+535
-1984
lines changed

15 files changed

+535
-1984
lines changed

‎README.md

Lines changed: 64 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -5,61 +5,79 @@
55

66
### react-codemirror2
77

8-
[scniro.github.io/react-codemirror2](https://scniro.github.io/react-codemirror2/)
8+
demo @ [scniro.github.io/react-codemirror2](https://scniro.github.io/react-codemirror2/)
99

10-
Better docs coming soon. All props are optional.
10+
> npm install react-codemirror2
1111
12+
13+
## basic usage
1214
```jsx
1315
import CodeMirror from 'react-codemirror2'
1416

1517
<CodeMirror
16-
defaultValue='I <3 react-codemirror2'
18+
value='I <3 react-codemirror2'
1719
options={{
18-
theme: this.props.theme,
20+
mode: 'xml',
21+
theme: 'material',
1922
lineNumbers: true
2023
}}
21-
editorWillMount={(codemirror) => {
24+
onValueChange={(editor, metadata, value) => {
2225
}}
23-
editorDidMount={(editor, next) => {
26+
/>
27+
```
2428

25-
editor.setOption('htmlMode', true); // alternative to passing props
26-
next(); // optional: will trigger editorDidConfigure
27-
}}
28-
editorDidConfigure={(editor) => {
29-
}}
30-
editorWillUnmount={(editor) => {
31-
}}
32-
onSetDefaultValue={(defaultValue) => {
33-
}}
34-
onChange={(editor, metadata, internalValue) => {
29+
## requiring codemirror resources
3530

36-
console.log(internalValue); // editor value
37-
}}
38-
onCursorActivity={() => {
39-
}}
40-
onViewportChange={(editor, viewportStart, viewportEnd) => {
41-
}}
42-
onGutterClick={(editor, lineNumber, event) => {
43-
}}
44-
onFocus={() => {
45-
}}
46-
onBlur={() => {
47-
}}
48-
onScroll={() => {
49-
}}
50-
onUpdate={() => {
51-
}}
52-
onKeyDown={(editor, event) => {
53-
}}
54-
onKeyUp={(editor, event) => {
55-
}}
56-
onKeyPress={(editor, event) => {
57-
}}
58-
onDragEnter={(editor, event) => {
59-
}}
60-
onDragOver={(editor, event) => {
61-
}}
62-
onDrop={(editor, event) => {
63-
}}
64-
/>
65-
```
31+
Since codemirror ships mostly unconfigured, the user is left with the responsibility for requiring any additional resources should they be necessary. This is often the case when specifying certain [language modes]() and [themes](). How to import/require these assets will vary according to the specifics of your development environment. Below is a sample to include the assets necessary to specify a mode of `xml` (HTML) and a `material` theme.
32+
33+
> note that the base codemirror.css file is required in all use cases
34+
35+
```css
36+
// index.scss
37+
@import '~/node_modules/codemirror/lib/codemirror.css';
38+
@import '~/node_modules/codemirror/theme/material.css';
39+
```
40+
41+
```jsx
42+
import CodeMirror from 'react-codemirror2'
43+
require('codemirror/mode/xml/xml');
44+
require('codemirror/mode/javascript/javascript');
45+
```
46+
47+
## props
48+
49+
- `className` - sets `class="react-codemirror2 yourClassName"`
50+
- `options` - see codemirror [configuration](https://codemirror.net/doc/manual.html#config)
51+
- `value` - set component value through props
52+
> triggers `onValueSet`
53+
54+
## component specific events
55+
56+
- `editorWillMount()`
57+
- `editorDidMount(editor, next)`
58+
> calling optional `next()` will trigger `editorDidConfigure`
59+
- `editorDidConfigure(editor)`
60+
- `onValueSet(editor, value)`
61+
> returns the initial value via `value`
62+
- `editorWillUnmount(editor)`
63+
64+
## codemirror wrapped [events](https://codemirror.net/doc/manual.html#events)
65+
66+
- `onValueChange(editor, metadata, value)`
67+
> returns the internal value of the editor
68+
- `onCursorActivity(editor)`
69+
- `onViewportChange(editor, viewportStart, viewportEnd)`
70+
- `onGutterClick(editor, lineNumber, event)`
71+
- `onFocus(editor, event)`
72+
- `onBlur(editor, event)`
73+
- `onScroll(editor, event)`
74+
- `onUpdate(editor, event)`
75+
- `onKeyDown(editor, event)`
76+
- `onKeyUp(editor, event)`
77+
- `onKeyPress(editor, event)`
78+
- `onDragEnter(editor, event)`
79+
- `onDragOver(editor, event)`
80+
- `onDrop(editor, event)`
81+
82+
83+
[MIT](./LICENSE) © 2017 [scniro](https://github.com/scniro)

‎docs/app.js

Lines changed: 0 additions & 1732 deletions
This file was deleted.

‎docs/app.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,6 @@
55
</head>
66
<body>
77
<div id="app"></div>
8-
<script src="/react-codemirror2/app.js"></script>
8+
<script src="/react-codemirror2/app.min.js"></script>
99
</body>
1010
</html>

‎docs/src/actions.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
export function toggleTheme(theme) {
22

33
return {type: 'TOGGLE_THEME', theme}
4+
}
5+
6+
export function toggleMode(mode) {
7+
8+
return {type: 'TOGGLE_MODE', mode}
49
}

‎docs/src/components/Controls.jsx

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,34 @@ class Controls extends React.Component {
99
this.props.dispatch(actions.toggleTheme(e.target.value));
1010
}
1111

12+
onModeSelect(e) {
13+
14+
this.props.dispatch(actions.toggleMode(e.target.value));
15+
}
16+
1217
render() {
1318

1419
return (
15-
<div>
16-
<select onChange={this.onThemeSelect.bind(this)}>
17-
<option value="material">material</option>
18-
<option value="monokai">monokai</option>
20+
<div id='controls'>
21+
<select value={this.props.theme} onChange={this.onThemeSelect.bind(this)}>
22+
<option value='material'>material</option>
23+
<option value='xq-light'>xq-light</option>
24+
</select>
25+
26+
<select value={this.props.mode} onChange={this.onModeSelect.bind(this)}>
27+
<option value='xml'>html</option>
28+
<option value='javascript'>javascript</option>
1929
</select>
20-
<span>redux action</span>
2130
</div>
2231
)
2332
}
2433
}
2534

26-
export default connect()(Controls)
35+
function mapState(state) {
36+
return {
37+
theme: state.app.theme,
38+
mode: state.app.mode
39+
}
40+
}
41+
42+
export default connect(mapState)(Controls)

‎docs/src/components/Editor.jsx

Lines changed: 19 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,37 @@
11
import React from 'react';
22
import {connect} from 'react-redux';
3-
import CodeMirror from '../../../src/react-codemirror2.jsx';
3+
import CodeMirror from '../../../index.js';
44

5-
require('../../../node_modules/codemirror/mode/xml/xml.js');
5+
let jBeautify = require('js-beautify').js;
6+
let hBeautify = require('js-beautify').html;
67

78
class Editor extends React.Component {
89

910
constructor(props) {
10-
super(props)
11+
super(props);
1112

12-
this.defaultValue =
13-
`<div class="main">
14-
<ul>
15-
<li>1</li>
16-
<li>2</li>
17-
<li>better docs coming soon</li>
18-
</ul>
19-
</div>`;
13+
let exampleHTML = '<header class="site-header"> <div class="container"> <h1>Example #2</h1> <nav role="navigation" class="site-navigation"> <ul> <li><a href="#">Link</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li></ul> </nav> </div></header> <section role="main" class="container"> <img src="http://placehold.it/1400x400/ff694d/f6f2eb" class="banner-image"/> <div class="grid-row col-3"> <div class="grid-unit"> <img src="http://placehold.it/650x300/ff694d/f6f2eb"/> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p></div><div class="grid-unit"> <img src="http://placehold.it/650x300/ff694d/f6f2eb"/> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p></div><div class="grid-unit"> <img src="http://placehold.it/650x300/ff694d/f6f2eb"/> <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. </p></div></div></section>';
14+
this.defaultHTML = hBeautify(exampleHTML, {indent_size: 2});
15+
16+
let exampleJS = 'function StringStream(string) { this.pos = 0; this.string = string; } StringStream.prototype = { done: function() {return this.pos >= this.string.length;}, peek: function() {return this.string.charAt(this.pos);}, next: function() { if (this.pos < this.string.length) return this.string.charAt(this.pos++); }, eat: function(match) { var ch = this.string.charAt(this.pos); if (typeof match == "string") var ok = ch == match; else var ok = ch && match.test ? match.test(ch) : match(ch); if (ok) {this.pos++; return ch;} }, eatWhile: function(match) { var start = this.pos; while (this.eat(match)); if (this.pos > start) return this.string.slice(start, this.pos); }, backUp: function(n) {this.pos -= n;}, column: function() {return this.pos;}, eatSpace: function() { var start = this.pos; while (/s/.test(this.string.charAt(this.pos))) this.pos++; return this.pos - start; }, match: function(pattern, consume, caseInsensitive) { if (typeof pattern == "string") { function cased(str) {return caseInsensitive ? str.toLowerCase() : str;} if (cased(this.string).indexOf(cased(pattern), this.pos) == this.pos) { if (consume !== false) this.pos += str.length; return true; } } else { var match = this.string.slice(this.pos).match(pattern); if (match && consume !== false) this.pos += match[0].length; return match; } } };';
17+
this.defaultJS = jBeautify(exampleJS, {indent_size: 2});
2018
}
2119

2220
render() {
2321

2422
return (
2523
<CodeMirror
26-
defaultValue={this.defaultValue}
27-
options={{theme: this.props.theme, lineNumbers: true}}
28-
editorWillMount={(codemirror) => {
29-
}}
30-
editorDidMount={(editor, next) => {
31-
32-
// modify the instance on mount alternative to passing down through props
33-
editor.setOption('htmlMode', true);
34-
// optional callback: will trigger `editorDidConfigure callback`
35-
next();
36-
}}
37-
editorDidConfigure={(editor) => {
38-
}}
39-
editorWillUnmount={(editor) => {
40-
}}
41-
onSetDefaultValue={(defaultValue) => {
42-
}}
43-
onChange={(editor, metadata, internalValue) => {
44-
45-
// editor value
46-
console.log(internalValue)
47-
}}
48-
onCursorActivity={() => {
49-
}}
50-
onViewportChange={(editor, viewportStart, viewportEnd) => {
51-
}}
52-
onGutterClick={(editor, lineNumber, event) => {
53-
}}
54-
onFocus={() => {
55-
}}
56-
onBlur={() => {
57-
}}
58-
onScroll={() => {
59-
}}
60-
onUpdate={() => {
61-
}}
62-
onKeyDown={(editor, event) => {
63-
}}
64-
onKeyUp={(editor, event) => {
65-
}}
66-
onKeyPress={(editor, event) => {
67-
}}
68-
onDragEnter={(editor, event) => {
24+
value={this.props.mode === 'xml' ? this.defaultHTML : this.defaultJS}
25+
options={{
26+
mode: this.props.mode,
27+
theme: this.props.theme,
28+
lineNumbers: true
6929
}}
70-
onDragOver={(editor, event) => {
30+
onValueSet={(editor, value) => {
31+
console.log('set', {value});
7132
}}
72-
onDrop={(editor, event) => {
33+
onValueChange={(editor, metadata, value) => {
34+
console.log('change', {value});
7335
}}/>
7436
)
7537
}
@@ -78,6 +40,7 @@ class Editor extends React.Component {
7840
function mapState(state) {
7941
return {
8042
theme: state.app.theme,
43+
mode: state.app.mode
8144
}
8245
}
8346

‎docs/src/index.jsx

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import React from 'react';
22
import {render} from 'react-dom';
3+
import {Provider} from 'react-redux';
4+
import {createStore, combineReducers} from 'redux';
5+
import reducer from './reducers';
36
import Editor from './components/Editor.jsx'
47
import Controls from './components/Controls.jsx';
58

6-
import {Provider} from 'react-redux';
7-
import reducer from './reducers';
8-
import {createStore, combineReducers} from 'redux';
9+
let prism = require('prismjs');
910

1011
require('./index.scss');
12+
require('codemirror/mode/xml/xml');
13+
require('codemirror/mode/javascript/javascript');
14+
require('prismjs/components/prism-jsx');
1115

1216
let initialState = {
1317
app: {
14-
theme: 'material'
18+
theme: 'xq-light',
19+
mode: 'xml'
1520
}
1621
};
1722

@@ -23,9 +28,47 @@ const store = createStore(app, initialState);
2328

2429
render(
2530
<Provider store={store}>
26-
<div>
31+
<div id='container'>
32+
<header>
33+
<a href="https://github.com/scniro/react-codemirror2" target="_blank"><h1>scniro/react-codemirror2</h1></a>
34+
</header>
2735
<Controls />
28-
<Editor />
36+
<div id='pane-container'>
37+
<section>
38+
<Editor/>
39+
</section>
40+
<section>
41+
<pre>
42+
<code className='language-jsx'>
43+
{
44+
`
45+
require('codemirror/lib/codemirror.css'); // e.g. webpack css loader
46+
require('codemirror/theme/material.css');
47+
require('codemirror/theme/neat.css');
48+
require('codemirror/mode/xml/xml.js');
49+
require('codemirror/mode/javascript/javascript.js');
50+
51+
import 'Codemirror' from 'react-codemirror';
52+
53+
<CodeMirror
54+
value={this.value}
55+
options={{
56+
mode: this.mode
57+
theme: this.theme,
58+
lineNumbers: true
59+
}}
60+
onValueSet={(editor, value) => {
61+
console.log('set', {value});
62+
}}
63+
onValueChange={(editor, metadata, value) => {
64+
console.log('change', {value});
65+
}}
66+
/>
67+
`.trim()}
68+
</code>
69+
</pre>
70+
</section>
71+
</div>
2972
</div>
3073
</Provider>
3174
, document.getElementById('app'));

0 commit comments

Comments
 (0)