move editor components to dropdown menu

example/index.html

@@ -141,7 +141,6 @@
     CMS.registerEditorComponent({
       id: "youtube",
       label: "Youtube",
-      icon: 'video',
       fields: [{name: 'id', label: 'Youtube Video ID'}],
       pattern: /^{{<\s?youtube (\S+)\s?>}}/,
       fromBlock: function(match) {

src/components/Widgets/MarkdownControlElements/Toolbar/Toolbar.js

@@ -3,6 +3,7 @@ import { List } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Switch from 'react-toolbox/lib/switch';
 import ToolbarButton from './ToolbarButton';
+import ToolbarComponentsMenu from './ToolbarComponentsMenu';
 import ToolbarPluginForm from './ToolbarPluginForm';
 import { Icon } from '../../../UI';
 import styles from './Toolbar.css';
@@ -31,11 +32,8 @@ export default class Toolbar extends React.Component {
     };
   }
 
-  handlePluginFormDisplay(plugin) {
-    return (e) => {
-      e.preventDefault();
-      this.setState({ activePlugin: plugin });
-    };
+  handlePluginFormDisplay = (plugin) => {
+    this.setState({ activePlugin: plugin });
   }
 
   handlePluginFormSubmit = (plugin, pluginData) => {
@@ -71,14 +69,10 @@ export default class Toolbar extends React.Component {
         <ToolbarButton label="Bold" icon="bold" action={onBold}/>
         <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
         <ToolbarButton label="Link" icon="link" action={onLink}/>
-        {plugins.map(plugin => (
-          <ToolbarButton
-            key={`plugin-${plugin.get('id')}`}
-            label={plugin.get('label')}
-            icon={plugin.get('icon')}
-            action={this.handlePluginFormDisplay(plugin)}
-          />
-        ))}
+        <ToolbarComponentsMenu
+          plugins={plugins}
+          onComponentMenuItemClick={this.handlePluginFormDisplay}
+        />
         {activePlugin &&
           <ToolbarPluginForm
             plugin={activePlugin}

src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.css

@@ -0,0 +1,14 @@
+.root {
+  display: inline-block;
+  position: relative;
+}
+
+.menuItem {
+  height: auto;
+  padding-top: 6px;
+  padding-bottom: 6px;
+
+  & span {
+    font-size: 14px;
+  }
+}

src/components/Widgets/MarkdownControlElements/Toolbar/ToolbarComponentsMenu.js

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { Menu, MenuItem } from 'react-toolbox/lib/menu';
+import ToolbarButton from './ToolbarButton';
+import styles from './ToolbarComponentsMenu.css';
+
+export default class ToolbarComponentsMenu extends React.Component {
+  static PropTypes = {
+    plugins: ImmutablePropTypes.list.isRequired,
+    onComponentMenuItemClick: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      componentsMenuActive: false,
+    };
+  }
+
+  handleComponentsMenuToggle = () => {
+    this.setState({ componentsMenuActive: !this.state.componentsMenuActive });
+  };
+
+  handleComponentsMenuHide = () => {
+    this.setState({ componentsMenuActive: false });
+  };
+
+  render() {
+    const { plugins, onComponentMenuItemClick } = this.props;
+    return (
+      <div className={styles.root}>
+        <ToolbarButton label="Add Component" icon="plus" action={this.handleComponentsMenuToggle}/>
+        <Menu
+          active={this.state.componentsMenuActive}
+          position="auto"
+          onHide={this.handleComponentsMenuHide}
+          ripple={false}
+        >
+          {plugins.map(plugin => (
+            <MenuItem
+              key={plugin.get('id')}
+              value={plugin.get('id')}
+              caption={plugin.get('label')}
+              onClick={() => onComponentMenuItemClick(plugin)}
+              className={styles.menuItem}
+            />
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}

src/index.js

@@ -39,7 +39,6 @@ if (process.env.NODE_ENV !== 'production' && module.hot) {
 const buildtInPlugins = [{
   label: 'Image',
   id: 'image',
-  icon: 'picture',
   fromBlock: match => match && {
     image: match[2],
     alt: match[1],