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

Commit b8862fd

Browse files
Claudio Procidafacebook-github-bot
authored andcommitted
Improves editor overview example with min height and border (#1887)
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
1 parent 8d5cbbe commit b8862fd

File tree

1 file changed

+27
-1
lines changed

1 file changed

+27
-1
lines changed

README.md

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,40 @@ class MyEditor extends React.Component {
4949
super(props);
5050
this.state = {editorState: EditorState.createEmpty()};
5151
this.onChange = (editorState) => this.setState({editorState});
52+
this.setEditor = (editor) => {
53+
this.editor = editor;
54+
};
55+
this.focusEditor = () => {
56+
if (this.editor) {
57+
this.editor.focus();
58+
}
59+
};
5260
}
61+
62+
componentDidMount() {
63+
this.focusEditor();
64+
}
65+
5366
render() {
5467
return (
55-
<Editor editorState={this.state.editorState} onChange={this.onChange} />
68+
<div style={styles.editor} onClick={this.focusEditor}>
69+
<Editor
70+
ref={this.setEditor}
71+
editorState={this.state.editorState}
72+
onChange={this.onChange}
73+
/>
74+
</div>
5675
);
5776
}
5877
}
5978

79+
const styles = {
80+
editor: {
81+
border: '1px solid gray',
82+
height: '6em'
83+
}
84+
};
85+
6086
ReactDOM.render(
6187
<MyEditor />,
6288
document.getElementById('container')

0 commit comments

Comments
 (0)