Skip to content

Commit 7e885c6

Browse files
scniroscniro
committed
1 parent 518c2db commit 7e885c6

File tree

6 files changed

+139
-17
lines changed

6 files changed

+139
-17
lines changed

‎README.md

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,14 +70,59 @@ require('codemirror/mode/javascript/javascript');
7070
- `onGutterClick(editor, lineNumber, event)`
7171
- `onFocus(editor, event)`
7272
- `onBlur(editor, event)`
73-
- `onScroll(editor, event)`
7473
- `onUpdate(editor, event)`
7574
- `onKeyDown(editor, event)`
7675
- `onKeyUp(editor, event)`
7776
- `onKeyPress(editor, event)`
7877
- `onDragEnter(editor, event)`
7978
- `onDragOver(editor, event)`
8079
- `onDrop(editor, event)`
80+
- `onSelection(editor, ranges)`
81+
- `onScroll(editor, position)`
82+
- `onCursor(editor, position)`
83+
84+
## prop wrapped codemirror [programming api](https://codemirror.net/doc/manual.html#api)
85+
- `selection={array<{anchor, head}>}` - *[setSelections](https://codemirror.net/doc/manual.html#setSelections)*
86+
> will programmatically select the ranges specified
87+
```jsx
88+
<CodeMirror
89+
[...]
90+
selection={[{
91+
anchor: {ch: 8, line: 5},
92+
head: {ch: 37, line: 5}
93+
}]}
94+
onSelection={(editor, ranges) => {}}
95+
/>
96+
```
97+
- `scroll` - *[scrollTo](https://codemirror.net/doc/manual.html#scrollTo)*
98+
> will programmatically scroll to the specified coordinate
99+
```jsx
100+
<CodeMirror
101+
[...]
102+
scroll={{
103+
x: 50,
104+
y: 50
105+
}}
106+
onScroll={(editor, position) => {}}
107+
/>
108+
```
109+
- `cursor` - *[setCursor](https://codemirror.net/doc/manual.html#setCursor)*
110+
> will programmatically set cursor to the position specified
111+
```jsx
112+
<CodeMirror
113+
[...]
114+
cursor={{
115+
line: 5,
116+
ch: 10
117+
}}
118+
onCursor={(editor, position) => {}}
119+
/>
120+
```
121+
122+
123+
124+
125+
81126

82127

83128
[MIT](./LICENSE) © 2017 [scniro](https://github.com/scniro)

‎docs/app.min.js

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

‎docs/src/components/Editor.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ class Editor extends React.Component {
1010
constructor(props) {
1111
super(props);
1212

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>';
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><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div><div>hi</div>';
1414
this.defaultHTML = hBeautify(exampleHTML, {indent_size: 2});
1515

1616
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; } } };';
@@ -32,7 +32,8 @@ class Editor extends React.Component {
3232
}}
3333
onValueChange={(editor, metadata, value) => {
3434
console.log('change', {value});
35-
}}/>
35+
}}
36+
/>
3637
)
3738
}
3839
}

‎index.js

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,6 @@ var CodeMirror = function (_React$Component) {
8888
});
8989
}
9090

91-
if (this.props.onScroll) {
92-
this.editor.on('scroll', function (cm, event) {
93-
_this2.props.onScroll(_this2.editor, event);
94-
});
95-
}
96-
9791
if (this.props.onUpdate) {
9892
this.editor.on('update', function (cm, event) {
9993
_this2.props.onUpdate(_this2.editor, event);
@@ -136,8 +130,52 @@ var CodeMirror = function (_React$Component) {
136130
});
137131
}
138132

133+
if (this.props.onSelection) {
134+
this.editor.on('beforeSelectionChange', function (cm, meta) {
135+
_this2.props.onSelection(_this2.editor, meta.ranges);
136+
});
137+
}
138+
139+
if (this.props.onScroll) {
140+
this.editor.on('scroll', function (cm) {
141+
142+
var meta = _this2.editor.getScrollInfo();
143+
144+
_this2.props.onScroll(_this2.editor, {
145+
x: meta.left,
146+
y: meta.top
147+
});
148+
});
149+
}
150+
151+
if (this.props.onCursor) {
152+
this.editor.on('cursorActivity', function (cm) {
153+
154+
var meta = _this2.editor.getCursor();
155+
156+
_this2.props.onCursor(_this2.editor, {
157+
line: meta.line,
158+
ch: meta.ch
159+
});
160+
});
161+
}
162+
139163
this.hydrate(this.props);
140164

165+
// commands
166+
if (this.props.selection) {
167+
this.editor.setSelections(this.props.selection);
168+
}
169+
170+
if (this.props.cursor) {
171+
this.editor.focus();
172+
this.editor.setCursor(this.props.cursor);
173+
}
174+
175+
if (this.props.scroll) {
176+
this.editor.scrollTo(this.props.scroll.x, this.props.scroll.y);
177+
}
178+
141179
if (this.props.editorDidMount) {
142180
this.props.editorDidMount(this.editor, this.initCb);
143181
}

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-codemirror2",
3-
"version": "0.0.8",
3+
"version": "0.0.9",
44
"description": "a tiny react codemirror component wrapper",
55
"main": "index.js",
66
"scripts": {

‎src/react-codemirror2.jsx

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -61,12 +61,6 @@ export default class CodeMirror extends React.Component {
6161
});
6262
}
6363

64-
if (this.props.onScroll) {
65-
this.editor.on('scroll', (cm, event) => {
66-
this.props.onScroll(this.editor, event);
67-
});
68-
}
69-
7064
if (this.props.onUpdate) {
7165
this.editor.on('update', (cm, event) => {
7266
this.props.onUpdate(this.editor, event);
@@ -109,8 +103,52 @@ export default class CodeMirror extends React.Component {
109103
});
110104
}
111105

106+
if (this.props.onSelection) {
107+
this.editor.on('beforeSelectionChange', (cm, meta) => {
108+
this.props.onSelection(this.editor, meta.ranges);
109+
})
110+
}
111+
112+
if (this.props.onScroll) {
113+
this.editor.on('scroll', (cm) => {
114+
115+
let meta = this.editor.getScrollInfo();
116+
117+
this.props.onScroll(this.editor, {
118+
x: meta.left,
119+
y: meta.top
120+
});
121+
})
122+
}
123+
124+
if (this.props.onCursor) {
125+
this.editor.on('cursorActivity', (cm) => {
126+
127+
let meta = this.editor.getCursor();
128+
129+
this.props.onCursor(this.editor, {
130+
line: meta.line,
131+
ch: meta.ch
132+
});
133+
})
134+
}
135+
112136
this.hydrate(this.props);
113137

138+
// commands
139+
if (this.props.selection) {
140+
this.editor.setSelections(this.props.selection);
141+
}
142+
143+
if (this.props.cursor) {
144+
this.editor.focus();
145+
this.editor.setCursor(this.props.cursor);
146+
}
147+
148+
if (this.props.scroll) {
149+
this.editor.scrollTo(this.props.scroll.x, this.props.scroll.y);
150+
}
151+
114152
if (this.props.editorDidMount) {
115153
this.props.editorDidMount(this.editor, this.initCb);
116154
}

0 commit comments

Comments
 (0)