fold ToolbarPlugins into Toolbar

src/components/Widgets/MarkdownControlElements/RawEditor/index.js

@@ -5,8 +5,7 @@ import htmlSyntax from 'markup-it/syntaxes/html';
 import CaretPosition from 'textarea-caret-position';
 import registry from '../../../../lib/registry';
 import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
-import Toolbar from '../Toolbar';
+import Toolbar from '../Toolbar/Toolbar';
-import ToolbarPlugins from '../ToolbarPlugins';
 import { Sticky } from '../../../UI/Sticky/Sticky';
 import styles from './index.css';
 
@@ -330,9 +329,6 @@ export default class RawEditor extends React.Component {
           onLink={this.handleLink}
           onToggleMode={this.handleToggle}
           rawMode={rawMode}
-        />
-        <ToolbarPlugins
-          selectionPosition={selectionPosition}
           plugins={plugins}
           onSubmit={this.handlePluginSubmit}
           onAddAsset={onAddAsset}

src/components/Widgets/MarkdownControlElements/Toolbar.js

@@ -1,33 +0,0 @@
-import React, { PropTypes } from 'react';
-import { List } from 'immutable';
-import ToolbarButton from './ToolbarButton';
-import { Icon } from '../../UI';
-import styles from './Toolbar.css';
-
-function Toolbar(props) {
-  const { onH1, onH2, onBold, onItalic, onLink, onToggleMode, rawMode } = props;
-  return (
-    <div className={styles.Toolbar}>
-      <ToolbarButton label="Header 1" icon="h1" action={onH1}/>
-      <ToolbarButton label="Header 2" icon="h2" action={onH2}/>
-      <ToolbarButton label="Bold" icon="bold" action={onBold}/>
-      <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
-      <ToolbarButton label="Link" icon="link" action={onLink}/>
-      <div className={styles.Toggle}>
-        <ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
-      </div>
-    </div>
-  );
-}
-
-Toolbar.propTypes = {
-  onH1: PropTypes.func.isRequired,
-  onH2: PropTypes.func.isRequired,
-  onBold: PropTypes.func.isRequired,
-  onItalic: PropTypes.func.isRequired,
-  onLink: PropTypes.func.isRequired,
-  onToggleMode: PropTypes.func.isRequired,
-  rawMode: PropTypes.bool,
-};
-
-export default Toolbar;

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

@@ -1,4 +1,4 @@
-@import "../../UI/theme";
+@import "../../../UI/theme";
 
 .Toolbar {
   z-index: 1000;

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

@@ -0,0 +1,90 @@
+import React, { PropTypes } from 'react';
+import { List } from 'immutable';
+import ToolbarButton from './ToolbarButton';
+import ToolbarPluginForm from './ToolbarPluginForm';
+import { Icon } from '../../../UI';
+import styles from './Toolbar.css';
+
+export default class Toolbar extends React.Component {
+  static propTypes = {
+    onH1: PropTypes.func.isRequired,
+    onH2: PropTypes.func.isRequired,
+    onBold: PropTypes.func.isRequired,
+    onItalic: PropTypes.func.isRequired,
+    onLink: PropTypes.func.isRequired,
+    onToggleMode: PropTypes.func.isRequired,
+    rawMode: PropTypes.bool,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      openPlugin: null,
+    };
+  }
+
+  handlePlugin(plugin) {
+    return (e) => {
+      e.preventDefault();
+      this.setState({ openPlugin: plugin });
+    };
+  }
+
+  handleSubmit = (plugin, pluginData) => {
+    this.props.onSubmit(plugin, pluginData);
+    this.setState({ openPlugin: null });
+  };
+
+  handleCancel = (e) => {
+    this.setState({ openPlugin: null });
+  };
+
+  render() {
+    const {
+      onH1,
+      onH2,
+      onBold,
+      onItalic,
+      onLink,
+      onToggleMode,
+      rawMode,
+      plugins,
+      onAddAsset,
+      onRemoveAsset,
+      getAsset,
+    } = this.props;
+
+    const { openPlugin } = this.state;
+
+    return (
+      <div className={styles.Toolbar}>
+        <ToolbarButton label="Header 1" icon="h1" action={onH1}/>
+        <ToolbarButton label="Header 2" icon="h2" action={onH2}/>
+        <ToolbarButton label="Bold" icon="bold" action={onBold}/>
+        <ToolbarButton label="Italic" icon="italic" action={onItalic}/>
+        <ToolbarButton label="Link" icon="link" action={onLink}/>
+        <div className={styles.Toggle}>
+          <ToolbarButton label="Toggle Markdown" action={onToggleMode} active={rawMode}/>
+        </div>
+        {plugins.map(plugin => (
+          <ToolbarButton
+            key={`plugin-${plugin.get('id')}`}
+            label={plugin.get('label')}
+            icon={plugin.get('icon')}
+            action={this.handlePlugin(plugin)}
+          />
+        ))}
+        {openPlugin &&
+          <ToolbarPluginForm
+            plugin={openPlugin}
+            onSubmit={this.handleSubmit}
+            onCancel={this.handleCancel}
+            onAddAsset={onAddAsset}
+            onRemoveAsset={onRemoveAsset}
+            getAsset={getAsset}
+          />
+        }
+      </div>
+    );
+  }
+}

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

@@ -1,4 +1,4 @@
-@import "../../UI/theme";
+@import "../../../UI/theme";
 
 .button {
   display: inline-block;

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

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react';
 import classnames from 'classnames';
-import { Icon } from '../../UI';
+import { Icon } from '../../../UI';
 import styles from './ToolbarButton.css';
 
 const ToolbarButton = ({ label, icon, action, active }) => (

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

@@ -1,18 +1,4 @@
-@import "../../UI/theme";
+@import "../../../UI/theme";
-
-.root {
-  z-index: 1000;
-  display: inline-block;
-}
-
-.button {
-  width: 15px;
-  height: 15px;
-  border: 1px solid #444;
-  border-radius: 100%;
-  background: transparent;
-  line-height: 13px;
-}
 
 .pluginForm {
   position: absolute;
@@ -34,19 +20,10 @@
   }
 }
 
-
 .body {
   padding: 0 12px 16px;
 }
 
-.menu {
-  list-style: none;
-}
-
-.menuItem {
-  display: inline-block;
-}
-
 .footer {
   background-color: var(--backgroundColor);
   padding: 10px 20px;

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

@@ -2,7 +2,7 @@ import React, { PropTypes } from 'react';
 import { Map } from 'immutable';
 import { Button } from 'react-toolbox/lib/button';
 import ToolbarPluginFormControl from './ToolbarPluginFormControl';
-import styles from './ToolbarPlugins.css';
+import styles from './ToolbarPluginForm.css';
 
 export default class ToolbarPluginForm extends React.Component {
   constructor(props) {

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

@@ -0,0 +1,7 @@
+.control {
+  composes: control from "../../../ControlPanel/ControlPane.css"
+}
+
+.label {
+  composes: label from "../../../ControlPanel/ControlPane.css";
+}

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

@@ -1,5 +1,5 @@
 import React, { PropTypes } from 'react';
-import { resolveWidget } from '../../Widgets';
+import { resolveWidget } from '../../../Widgets';
 import styles from './ToolbarPluginFormControl.css';
 
 const ToolbarPluginFormControl = ({

src/components/Widgets/MarkdownControlElements/ToolbarPluginFormControl.css

@@ -1,7 +0,0 @@
-.control {
-  composes: control from "../../ControlPanel/ControlPane.css"
-}
-
-.label {
-  composes: label from "../../ControlPanel/ControlPane.css";
-}

src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js

@@ -1,73 +0,0 @@
-import React, { Component, PropTypes } from 'react';
-import { fromJS } from 'immutable';
-import { Button } from 'react-toolbox/lib/button';
-import { Icon } from '../../UI';
-import ToolbarButton from './ToolbarButton';
-import ToolbarPluginForm from './ToolbarPluginForm';
-import ToolbarPluginFormControl from './ToolbarPluginFormControl';
-import toolbarStyles from './Toolbar.css';
-import styles from './ToolbarPlugins.css';
-
-export default class ToolbarPlugins extends Component {
-  static propTypes = {
-    plugins: PropTypes.object.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onAddAsset: PropTypes.func.isRequired,
-    onRemoveAsset: PropTypes.func.isRequired,
-    getAsset: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      openPlugin: null,
-    };
-  }
-
-  handlePlugin(plugin) {
-    return (e) => {
-      e.preventDefault();
-      this.setState({ openPlugin: plugin });
-    };
-  }
-
-  handleSubmit = (plugin, pluginData) => {
-    this.props.onSubmit(plugin, pluginData);
-    this.setState({ openPlugin: null });
-  };
-
-  handleCancel = (e) => {
-    this.setState({ openPlugin: null });
-  };
-
-  render() {
-    const { plugins, onAddAsset, onRemoveAsset, getAsset } = this.props;
-    const { openPlugin, pluginData } = this.state;
-    const classNames = [styles.root];
-
-    if (openPlugin) {
-      classNames.push(styles.openPlugin);
-    }
-
-    return (<div className={classNames.join(' ')}>
-      {plugins.map(plugin => (
-        <ToolbarButton
-          key={`plugin-${plugin.get('id')}`}
-          label={plugin.get('label')}
-          icon={plugin.get('icon')}
-          action={this.handlePlugin(plugin)}
-        />
-      ))}
-      {openPlugin &&
-        <ToolbarPluginForm
-          plugin={openPlugin}
-          onSubmit={this.handleSubmit}
-          onCancel={this.handleCancel}
-          onAddAsset={onAddAsset}
-          onRemoveAsset={onRemoveAsset}
-          getAsset={getAsset}
-        />
-      }
-    </div>);
-  }
-}

src/components/Widgets/MarkdownControlElements/VisualEditor/index.js

@@ -15,8 +15,7 @@ import registry from '../../../../lib/registry';
 import { createAssetProxy } from '../../../../valueObjects/AssetProxy';
 import { buildKeymap } from './keymap';
 import createMarkdownParser from './parser';
-import Toolbar from '../Toolbar';
+import Toolbar from '../Toolbar/Toolbar';
-import ToolbarPlugins from '../ToolbarPlugins';
 import { Sticky } from '../../../UI/Sticky/Sticky';
 import styles from './index.css';
 
@@ -285,9 +284,6 @@ export default class Editor extends Component {
           onItalic={this.handleItalic}
           onLink={this.handleLink}
           onToggleMode={this.handleToggle}
-        />
-        <ToolbarPlugins
-          selectionPosition={selectionPosition}
           plugins={plugins}
           onSubmit={this.handlePluginSubmit}
           onAddAsset={onAddAsset}

src/components/Widgets/MarkdownControlElements/constants.js

@@ -1,28 +0,0 @@
-export const emptyParagraphBlock = {
-  nodes: [
-    {
-      kind: 'block',
-      type: 'paragraph',
-      nodes: [{
-        kind: 'text',
-        ranges: [{
-          text: '',
-        }],
-      }],
-    },
-  ],
-};
-
-export const mediaproxyBlock = mediaproxy => ({
-  kind: 'block',
-  type: 'paragraph',
-  nodes: [{
-    kind: 'inline',
-    type: 'mediaproxy',
-    isVoid: true,
-    data: {
-      alt: mediaproxy.name,
-      src: mediaproxy.public_path,
-    },
-  }],
-});