split out ToolbarPluginForm

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

@@ -235,7 +235,7 @@ export default class RawEditor extends React.Component {
     this.updateHeight();
   };
 
-  handlePlugin = (plugin, data) => {
+  handlePluginSubmit = (plugin, data) => {
     const toBlock = plugin.get('toBlock');
     this.replaceSelection(toBlock.call(toBlock, data.toJS()));
   };
@@ -334,7 +334,7 @@ export default class RawEditor extends React.Component {
         <ToolbarPlugins
           selectionPosition={selectionPosition}
           plugins={plugins}
-          onPlugin={this.handlePlugin}
+          onSubmit={this.handlePluginSubmit}
           onAddAsset={onAddAsset}
           onRemoveAsset={onRemoveAsset}
           getAsset={getAsset}

src/components/Widgets/MarkdownControlElements/ToolbarPluginForm.js

@@ -0,0 +1,59 @@
+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';
+
+export default class ToolbarPluginForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: Map(),
+    };
+  }
+
+  handleSubmit = (event) => {
+    const { plugin, onSubmit } = this.props;
+    onSubmit(plugin, this.state.data);
+    event.preventDefault();
+  }
+
+  render() {
+    const {
+      plugin,
+      onSubmit,
+      onCancel,
+      value,
+      onAddAsset,
+      onRemoveAsset,
+      getAsset,
+      onChange,
+    } = this.props;
+
+    return (
+      <form className={styles.pluginForm} onSubmit={this.handleSubmit}>
+        <h3 className={styles.header}>Insert {plugin.get('label')}</h3>
+        <div className={styles.body}>
+          {plugin.get('fields').map((field, index) => (
+            <ToolbarPluginFormControl
+              key={index}
+              field={field}
+              value={this.state.data.get(field.get('name'))}
+              onAddAsset={onAddAsset}
+              onRemoveAsset={onRemoveAsset}
+              getAsset={getAsset}
+              onChange={(val) => {
+                this.setState({ data: this.state.data.set(field.get('name'), val) });
+              }}
+            />
+          ))}
+        </div>
+        <div className={styles.footer}>
+          <Button raised onClick={this.handleSubmit}>Insert</Button>
+          {' '}
+          <Button onClick={onCancel}>Cancel</Button>
+        </div>
+      </form>
+    );
+  }
+}

src/components/Widgets/MarkdownControlElements/ToolbarPlugins.js

@@ -3,6 +3,7 @@ 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';
@@ -10,7 +11,7 @@ import styles from './ToolbarPlugins.css';
 export default class ToolbarPlugins extends Component {
   static propTypes = {
     plugins: PropTypes.object.isRequired,
-    onPlugin: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
     onAddAsset: PropTypes.func.isRequired,
     onRemoveAsset: PropTypes.func.isRequired,
     getAsset: PropTypes.func.isRequired,
@@ -20,65 +21,28 @@ export default class ToolbarPlugins extends Component {
     super(props);
     this.state = {
       openPlugin: null,
-      pluginData: fromJS({}),
     };
   }
 
   handlePlugin(plugin) {
     return (e) => {
       e.preventDefault();
-      this.setState({ openPlugin: plugin, pluginData: fromJS({}) });
+      this.setState({ openPlugin: plugin });
     };
   }
 
-  handleSubmit = (e) => {
+  handleSubmit = (plugin, pluginData) => {
-    e.preventDefault();
+    this.props.onSubmit(plugin, pluginData);
-    const { openPlugin, pluginData } = this.state;
-    this.props.onPlugin(openPlugin, pluginData);
     this.setState({ openPlugin: null });
   };
 
   handleCancel = (e) => {
-    e.preventDefault();
     this.setState({ openPlugin: null });
   };
 
-  pluginForm(plugin) {
-    return (<form className={styles.pluginForm} onSubmit={this.handleSubmit}>
-      <h3 className={styles.header}>Insert {plugin.get('label')}</h3>
-      <div className={styles.body}>
-        {plugin.get('fields').map((field, index) => (
-          <ToolbarPluginFormControl
-            key={index}
-            field={field}
-            value={this.state.pluginData.get(field.get('name'))}
-            onAddAsset={this.props.onAddAsset}
-            onRemoveAsset={this.props.onRemoveAsset}
-            getAsset={this.props.getAsset}
-            onChange={(val) => {
-              this.setState({ pluginData: this.state.pluginData.set(field.get('name'), val) });
-            }}
-          />
-        ))}
-      </div>
-      <div className={styles.footer}>
-        <Button
-          raised
-          onClick={this.handleSubmit}
-        >
-          Insert
-        </Button>
-        {' '}
-        <Button onClick={this.handleCancel}>
-          Cancel
-        </Button>
-      </div>
-    </form>);
-  }
-
   render() {
-    const { plugins } = this.props;
+    const { plugins, onAddAsset, onRemoveAsset, getAsset } = this.props;
-    const { openPlugin } = this.state;
+    const { openPlugin, pluginData } = this.state;
     const classNames = [styles.root];
 
     if (openPlugin) {
@@ -94,7 +58,16 @@ export default class ToolbarPlugins extends Component {
           action={this.handlePlugin(plugin)}
         />
       ))}
-      {openPlugin && this.pluginForm(openPlugin)}
+      {openPlugin &&
+        <ToolbarPluginForm
+          plugin={openPlugin}
+          onSubmit={this.handleSubmit}
+          onCancel={this.handleCancel}
+          onAddAsset={onAddAsset}
+          onRemoveAsset={onRemoveAsset}
+          getAsset={getAsset}
+        />
+      }
     </div>);
   }
 }

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

@@ -203,7 +203,7 @@ export default class Editor extends Component {
     command(this.view.state, this.handleAction);
   };
 
-  handlePlugin = (plugin, data) => {
+  handlePluginSubmit = (plugin, data) => {
     const { schema } = this.state;
     const nodeType = schema.nodes[`plugin_${ plugin.get('id') }`];
     this.view.props.onAction(this.view.state.tr.replaceSelectionWith(nodeType.create(data.toJS())).action());
@@ -289,7 +289,7 @@ export default class Editor extends Component {
         <ToolbarPlugins
           selectionPosition={selectionPosition}
           plugins={plugins}
-          onPlugin={this.handlePlugin}
+          onSubmit={this.handlePluginSubmit}
           onAddAsset={onAddAsset}
           onRemoveAsset={onRemoveAsset}
           getAsset={getAsset}