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/menus/BlockMenu.js

@@ -0,0 +1,49 @@
+// @flow
+import React, { Component } from 'react';
+import Icon from 'components/Icon';
+import { observer } from 'mobx-react';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+@observer class BlockMenu extends Component {
+  props: {
+    label?: React$Element<*>,
+    onPickImage: SyntheticEvent => void,
+    onInsertList: SyntheticEvent => void,
+    onInsertTodoList: SyntheticEvent => void,
+    onInsertBreak: SyntheticEvent => void,
+  };
+
+  render() {
+    const {
+      label,
+      onPickImage,
+      onInsertList,
+      onInsertTodoList,
+      onInsertBreak,
+      ...rest
+    } = this.props;
+
+    return (
+      <DropdownMenu
+        style={{ marginRight: -70, marginTop: 5 }}
+        label={label}
+        {...rest}
+      >
+        <DropdownMenuItem onClick={onPickImage}>
+          <Icon type="Image" /> Add images
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onInsertList}>
+          <Icon type="List" /> Start list
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onInsertTodoList}>
+          <Icon type="CheckSquare" /> Start checklist
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={onInsertBreak}>
+          <Icon type="Minus" /> Add break
+        </DropdownMenuItem>
+      </DropdownMenu>
+    );
+  }
+}
+
+export default BlockMenu;

frontend/menus/CollectionMenu.js

@@ -12,7 +12,7 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 @observer class CollectionMenu extends Component {
   props: {
     label?: React$Element<any>,
-    onShow?: () => void,
+    onOpen?: () => void,
     onClose?: () => void,
     onImport?: () => void,
     history: Object,
@@ -36,13 +36,13 @@ import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
   };
 
   render() {
-    const { collection, label, onShow, onClose, onImport } = this.props;
+    const { collection, label, onOpen, onClose, onImport } = this.props;
     const { allowDelete } = collection;
 
     return (
       <DropdownMenu
         label={label || <MoreIcon type="MoreHorizontal" />}
-        onShow={onShow}
+        onOpen={onOpen}
         onClose={onClose}
       >
         {collection &&