Skip to content
Browse files

Updates Quick Start examples to run as expected

Summary:Hey! Thanks so much for the hard work on this project. I’m just making my way through the documentation now, and I couldn’t get the Quick Start examples to run until I made the following changes.

I have very little React experience, and even less with ES2015 stuff—it’s entirely possible I just misunderstood something in all these cases. Regardless, the examples didn’t work as-is for me, and to the best of my understand, these changes fix that.

The one change I made that was maybe more of an opinion was turning:

```js
const {editorState} = this.state;
return <Editor editorState={editorState} onChange={this.onChange} />
```

…into:

```js
return <Editor editorState={this.state.editorState} onChange={this.onChange} />
```

…which just reduced the complexity for me at the beginning, and had more in common with the initial Input example.
Closes #180

Reviewed By: spicyj

Differential Revision: D3034470

fb-gh-sync-id: c99ba4e24dd42a2c5a0634dfcc6c8faab8cd5b7c
shipit-source-id: c99ba4e24dd42a2c5a0634dfcc6c8faab8cd5b7c
  • Loading branch information...
1 parent 360f737 commit 981483ce0483482e98345f9196c761c862dc74f8 @kennethormandy kennethormandy committed with Facebook Github Bot 2
Showing with 13 additions and 13 deletions.
  1. +5 −3 docs/QuickStart-API-Basics.md
  2. +8 −10 docs/QuickStart-Rich-Styling.md
View
8 docs/QuickStart-API-Basics.md
@@ -30,6 +30,7 @@ to provide information about the text that the user has written.
class MyInput extends React.Component {
constructor(props) {
super(props);
+ this.state = {value: ''};
this.onChange = (evt) => this.setState({value: evt.target.value});
}
render() {
@@ -60,15 +61,16 @@ selection within the editor will create new `EditorState` objects. Note that
this remains efficient due to data persistence across immutable objects.
```js
-import {Editor} from 'draft-js';
+import {Editor, EditorState} from 'draft-js';
+
class MyEditor extends React.Component {
constructor(props) {
super(props);
+ this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
- const {editorState} = this.state;
- return <Editor editorState={editorState} onChange={this.onChange} />;
+ return <Editor editorState={this.state.editorState} onChange={this.onChange} />;
}
}
```
View
18 docs/QuickStart-Rich-Styling.md
@@ -44,15 +44,16 @@ We can observe and handle key commands via the `handleKeyCommand` prop, and
hook these into `RichUtils` to apply or remove the desired style.
```js
-import {Editor, RichUtils} from 'draft-js';
+import {Editor, EditorState, RichUtils} from 'draft-js';
+
class MyEditor extends React.Component {
constructor(props) {
super(props);
+ this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
handleKeyCommand(command) {
- const {editorState} = this.state;
- const newState = RichUtils.handleKeyCommand(editorState, command);
+ const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
if (newState) {
this.onChange(newState);
return true;
@@ -60,10 +61,9 @@ class MyEditor extends React.Component {
return false;
}
render() {
- const {editorState} = this.state;
return (
<Editor
- editorState={editorState}
+ editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
/>
@@ -90,20 +90,18 @@ Here's a super-basic example with a "Bold" button to toggle the `BOLD` style.
```js
class MyEditor extends React.Component {
- ...
+ // …
_onBoldClick() {
- const {editorState} = this.state;
- this.onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
+ this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}
render() {
- const {editorState} = this.state;
return (
<div>
<button onClick={this._onBoldClick.bind(this)}>Bold</button>
<Editor
- editorState={editorState}
+ editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
/>

0 comments on commit 981483c

Please sign in to comment.
Something went wrong with that request. Please try again.