Fix some styling + ux issues with the annotation creation component

.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"
   }
 }

src/AnnotationCreation.js

@@ -233,7 +233,7 @@ class AnnotationCreation extends Component {
           updateGeometry={this.updateGeometry}
           windowId={windowId}
         />
-        <form onSubmit={this.submitForm}>
+        <form onSubmit={this.submitForm} className={classes.section}>
           <Grid container>
             <Grid item xs={12}>
               <Typography variant="overline">
@@ -416,6 +416,12 @@ const styles = (theme) => ({
     display: 'flex',
     flexWrap: 'wrap',
   },
+  section: {
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(1),
+    paddingTop: theme.spacing(2),
+  },
 });
 
 AnnotationCreation.propTypes = {

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>