diff --git a/.eslintrc b/.eslintrc index b3caa59e110484e128762039cca9c1c5c0645099..be0050216f5198f54da4da5beabf49284873554e 100644 --- a/.eslintrc +++ b/.eslintrc @@ -26,6 +26,8 @@ "sort-keys": ["error", "asc", { "caseSensitive": false, "natural": false - }] + }], + "jsx-a11y/click-events-have-key-events": "off", + "jsx-a11y/no-static-element-interactions": "off" } } diff --git a/src/TextEditor.js b/src/TextEditor.js index 536ba33b5bfb1236f44d200ec84e4190a3a8bd74..4ad42150e5e0db5b1afe4a521468633370d1883b 100644 --- a/src/TextEditor.js +++ b/src/TextEditor.js @@ -20,6 +20,16 @@ class TextEditor extends Component { this.onChange = this.onChange.bind(this); this.handleKeyCommand = this.handleKeyCommand.bind(this); this.handleFormating = this.handleFormating.bind(this); + this.handleFocus = this.handleFocus.bind(this); + this.editorRef = React.createRef(); + } + + /** + * This is a kinda silly hack (but apparently recommended approach) to + * making sure the whole visible editor area, not just the first line. + */ + handleFocus() { + if (this.editorRef.current) this.editorRef.current.focus(); } /** */ @@ -58,6 +68,7 @@ class TextEditor extends Component { const { classes } = this.props; const { editorState } = this.state; const currentStyle = editorState.getCurrentInlineStyle(); + return ( <div> <ToggleButtonGroup @@ -77,11 +88,13 @@ class TextEditor extends Component { <ItalicIcon /> </ToggleButton> </ToggleButtonGroup> - <div className={classes.editorRoot}> + + <div className={classes.editorRoot} onClick={this.handleFocus}> <Editor editorState={editorState} handleKeyCommand={this.handleKeyCommand} onChange={this.onChange} + ref={this.editorRef} /> </div> </div>