Insert block menu (#297)

* Insert block behavior

* Functional with horizontal rule

* Add list and image upload working

* Cleanup typing

* Closest to correct behavior so far

* Improve block insert on list

* Hide (+) after clicking menu item

* Bad merge

frontend/components/Editor/Editor.js

@@ -8,6 +8,7 @@ import getDataTransferFiles from 'utils/getDataTransferFiles';
 import Flex from 'components/Flex';
 import ClickablePadding from './components/ClickablePadding';
 import Toolbar from './components/Toolbar';
+import BlockInsert from './components/BlockInsert';
 import Placeholder from './components/Placeholder';
 import Markdown from './serializer';
 import createSchema from './schema';
@@ -173,6 +174,8 @@ type KeyData = {
   };
 
   render = () => {
+    const { readOnly, emoji, onSave } = this.props;
+
     return (
       <Flex
         onDrop={this.handleDrop}
@@ -183,24 +186,31 @@ type KeyData = {
         auto
       >
         <MaxWidth column auto>
-          <Header onClick={this.focusAtStart} readOnly={this.props.readOnly} />
-          <Toolbar state={this.state.state} onChange={this.onChange} />
+          <Header onClick={this.focusAtStart} readOnly={readOnly} />
+          {!readOnly &&
+            <Toolbar state={this.state.state} onChange={this.onChange} />}
+          {!readOnly &&
+            <BlockInsert
+              state={this.state.state}
+              onChange={this.onChange}
+              onInsertImage={this.insertImageFile}
+            />}
           <StyledEditor
             innerRef={ref => (this.editor = ref)}
             placeholder="Start with a title…"
             bodyPlaceholder="…the rest is your canvas"
             schema={this.schema}
             plugins={this.plugins}
-            emoji={this.props.emoji}
+            emoji={emoji}
             state={this.state.state}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
             onDocumentChange={this.onDocumentChange}
-            onSave={this.props.onSave}
-            readOnly={this.props.readOnly}
+            onSave={onSave}
+            readOnly={readOnly}
           />
           <ClickablePadding
-            onClick={!this.props.readOnly ? this.focusAtEnd : undefined}
+            onClick={!readOnly ? this.focusAtEnd : undefined}
             grow
           />
         </MaxWidth>