Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Commit

Permalink
Improves editor overview example with min height and border (#1887)
Browse files Browse the repository at this point in the history
Summary:
**Summary**

Improves editor overview example providing a code sample that sets the editor's min height and border, as well as focuses the editor when clicking the editor area.

**Test Plan**

Copy and paste example into CodeSandbox
https://codesandbox.io/s/9y5162ryj4

Fixes #1880
Pull Request resolved: #1887

Differential Revision: D10200611

fbshipit-source-id: 5c261cf78d8d36e3255528b68d30d7b46e2908bf
  • Loading branch information
Claudio Procida authored and facebook-github-bot committed Oct 4, 2018
1 parent 8d5cbbe commit b8862fd
Showing 1 changed file with 27 additions and 1 deletion.
28 changes: 27 additions & 1 deletion README.md
Expand Up @@ -49,14 +49,40 @@ class MyEditor extends React.Component {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
this.setEditor = (editor) => {
this.editor = editor;
};
this.focusEditor = () => {
if (this.editor) {
this.editor.focus();
}
};
}

componentDidMount() {
this.focusEditor();
}

render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
<div style={styles.editor} onClick={this.focusEditor}>
<Editor
ref={this.setEditor}
editorState={this.state.editorState}
onChange={this.onChange}
/>
</div>
);
}
}

const styles = {
editor: {
border: '1px solid gray',
height: '6em'
}
};

ReactDOM.render(
<MyEditor />,
document.getElementById('container')
Expand Down

0 comments on commit b8862fd

Please sign in to comment.