Implement block menu with support for plugins

src/components/Widgets/MarkdownControl.js

@@ -30,7 +30,7 @@ class MarkdownControl extends React.Component {
   };
 
   render() {
-    const { editor, onChange, onAddMedia, getMedia, value } = this.props;
+    const { editor, onChange, onAddMedia, onRemoveMedia, getMedia, value } = this.props;
     if (editor.get('useVisualMode')) {
       return (
         <div className="cms-editor-visual">
@@ -51,6 +51,7 @@ class MarkdownControl extends React.Component {
           <RawEditor
             onChange={onChange}
             onAddMedia={onAddMedia}
+            onRemoveMedia={onRemoveMedia}
             getMedia={getMedia}
             value={value}
           />

src/components/Widgets/MarkdownControlElements/RawEditor/BlockMenu.css

@@ -0,0 +1,134 @@
+.root {
+  position: absolute;
+  left: -18px;
+  display: none;
+  width: 100%;
+}
+
+.visible {
+  display: block;
+}
+
+.button {
+  display: block;
+  width: 15px;
+  height: 15px;
+  border: 1px solid #444;
+  border-radius: 100%;
+  background: transparent;
+  line-height: 13px;
+}
+
+.expanded {
+  display: block;
+}
+
+.collapsed {
+  display: none;
+}
+
+.pluginForm,
+.menu {
+  margin-top: -20px;
+  margin-bottom: 30px;
+  margin-left: 20px;
+  border-radius: 4px;
+  background: #fff;
+  box-shadow: 1px 1px 20px;
+
+  & h3 {
+    padding: 5px 20px;
+    border-bottom: 1px solid;
+  }
+}
+
+.menu {
+  list-style: none;
+
+  & li button {
+    display: block;
+    padding: 5px 20px;
+    min-width: 30%;
+    width: 100%;
+    border: none;
+    border-bottom: 1px solid;
+    background: #fff;
+    -webkit-appearance: none;
+  }
+
+  & li:last-child button {
+    border-bottom: none;
+  }
+
+  & li:hover button {
+    background: #efefef;
+  }
+}
+
+.menu.expanded {
+  display: inline-block;
+}
+
+.control {
+  position: relative;
+  padding: 20px 20px;
+  color: #7c8382;
+
+  & input,
+  & textarea,
+  & select {
+    display: block;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    outline: 0;
+    border: none;
+    background: 0 0;
+    box-shadow: none;
+    color: #7c8382;
+    font-size: 18px;
+    font-family: monospace;
+  }
+}
+
+.label {
+  display: block;
+  margin-bottom: 18px;
+  color: #aab0af;
+  font-size: 12px;
+}
+
+.widget {
+  position: relative;
+  border-bottom: 1px solid #aaa;
+
+  &:after {
+    position: absolute;
+    bottom: -7px;
+    left: 42px;
+    z-index: 1;
+    width: 12px;
+    height: 12px;
+    border-right: 1px solid #aaa;
+    border-bottom: 1px solid #aaa;
+    background-color: #f2f5f4;
+    content: '';
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:last-child:after {
+    display: none;
+  }
+}
+
+.footer {
+  padding: 10px 20px;
+  border-top: 1px solid #eee;
+  background: #fff;
+  text-align: right;
+}

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

@@ -0,0 +1,135 @@
+import React, { Component, PropTypes } from 'react';
+import { fromJS } from 'immutable';
+import { Button } from 'react-toolbox/lib/button';
+import { resolveWidget } from '../../../Widgets';
+import styles from './BlockMenu.css';
+
+export default class BlockMenu extends Component {
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    selectionPosition: PropTypes.object,
+    plugins: PropTypes.object.isRequired,
+    onBlock: PropTypes.func.isRequired,
+    onAddMedia: PropTypes.func.isRequired,
+    onRemoveMedia: PropTypes.func.isRequired,
+    getMedia: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      isExpanded: false,
+      openPlugin: null,
+      pluginData: fromJS({}),
+    };
+  }
+
+  componentDidUpdate() {
+    const { selectionPosition } = this.props;
+    if (selectionPosition) {
+      const style = this.element.style;
+      style.setProperty('top', `${ selectionPosition.top }px`);
+    }
+  }
+
+  handleToggle = (e) => {
+    e.preventDefault();
+    this.setState({ isExpanded: !this.state.isExpanded });
+  };
+
+  handleRef = (ref) => {
+    this.element = ref;
+  };
+
+  handlePlugin(plugin) {
+    return (e) => {
+      e.preventDefault();
+      this.setState({ openPlugin: plugin, pluginData: fromJS({}) });
+    };
+  }
+
+  buttonFor(plugin) {
+    return (<li key={plugin.get('id')}>
+      <button onClick={this.handlePlugin(plugin)}>{plugin.get('label')}</button>
+    </li>);
+  }
+
+  handleSubmit = (e) => {
+    e.preventDefault();
+    const { openPlugin, pluginData } = this.state;
+    const toBlock = openPlugin.get('toBlock');
+    this.props.onBlock(toBlock.call(toBlock, pluginData.toJS()));
+    this.setState({ openPlugin: null, isExpanded: false });
+  };
+
+  handleCancel = (e) => {
+    e.preventDefault();
+    this.setState({ openPlugin: null, isExpanded: false });
+  };
+
+  controlFor(field) {
+    const { onAddMedia, onRemoveMedia, getMedia } = this.props;
+    const { pluginData } = this.state;
+    const widget = resolveWidget(field.get('widget') || 'string');
+    const value = pluginData.get(field.get('name'));
+
+    return (
+      <div className={styles.control} key={field.get('name')}>
+        <label className={styles.label}>{field.get('label')}</label>
+        {
+          React.createElement(widget.control, {
+            field,
+            value,
+            onChange: (val) => {
+              this.setState({
+                pluginData: pluginData.set(field.get('name'), val),
+              });
+            },
+            onAddMedia,
+            onRemoveMedia,
+            getMedia,
+          })
+        }
+      </div>
+    );
+  }
+
+  pluginForm(plugin) {
+    return (<form className={styles.pluginForm} onSubmit={this.handleSubmit}>
+      <h3>Insert {plugin.get('label')}</h3>
+      {plugin.get('fields').map(field => this.controlFor(field))}
+      <div className={styles.footer}>
+        <Button
+          raised
+          onClick={this.handleSubmit}
+        >
+          Insert
+        </Button>
+        {' '}
+        <Button onClick={this.handleCancel}>
+          Cancel
+        </Button>
+      </div>
+    </form>);
+  }
+
+  render() {
+    const { isOpen, plugins } = this.props;
+    const { isExpanded, openPlugin } = this.state;
+    const classNames = [styles.root];
+    if (isOpen) {
+      classNames.push(styles.visible);
+    }
+    if (openPlugin) {
+      classNames.push(styles.openPlugin);
+    }
+
+    return (<div className={classNames.join(' ')} ref={this.handleRef}>
+      <button className={styles.button} onClick={this.handleToggle}>+</button>
+      <ul className={[styles.menu, isExpanded && !openPlugin ? styles.expanded : styles.collapsed].join(' ')}>
+        {plugins.map(plugin => this.buttonFor(plugin))}
+      </ul>
+      {openPlugin && this.pluginForm(openPlugin)}
+    </div>);
+  }
+}

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

@@ -10,7 +10,7 @@ function button(label, action) {
 export default class Toolbar extends Component {
   static propTypes = {
     isOpen: PropTypes.bool,
-    selectionPosition: PropTypes.node,
+    selectionPosition: PropTypes.object,
     onBold: PropTypes.func.isRequired,
     onItalic: PropTypes.func.isRequired,
     onLink: PropTypes.func.isRequired,

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

@@ -1,7 +1,10 @@
 import React, { PropTypes } from 'react';
+import { fromJS } from 'immutable';
 import CaretPosition from 'textarea-caret-position';
-import Toolbar from './Toolbar';
+import registry from '../../../../lib/registry';
 import MediaProxy from '../../../../valueObjects/MediaProxy';
+import Toolbar from './Toolbar';
+import BlockMenu from './BlockMenu';
 import styles from './index.css';
 
 const HAS_LINE_BREAK = /\n/m;
@@ -20,10 +23,36 @@ function preventDefault(e) {
   e.preventDefault();
 }
 
+const buildtInPlugins = fromJS([{
+  label: 'Image',
+  id: 'image',
+  fromBlock: (data) => {
+    const m = data.match(/^!\[([^\]]+)\]\(([^\)]+)\)$/);
+    return m && {
+      image: m[2],
+      alt: m[1],
+    };
+  },
+  toBlock: data => `![${ data.alt }](${ data.image })`,
+  toPreview: data => `<img src="${ data.image }" alt="${ data.alt }" />`,
+  pattern: /^!\[([^\]]+)\]\(([^\)]+)\)$/,
+  fields: [{
+    label: 'Image',
+    name: 'image',
+    widget: 'image',
+  }, {
+    label: 'Alt Text',
+    name: 'alt',
+  }],
+}]);
+
 export default class RawEditor extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    const plugins = registry.getEditorComponents();
+    this.state = {
+      plugins: buildtInPlugins.concat(plugins),
+    };
     this.shortcuts = {
       meta: {
         b: this.handleBold,
@@ -111,10 +140,6 @@ export default class RawEditor extends React.Component {
     }
   };
 
-  handleToolbarRef = (ref) => {
-    this.toolbar = ref;
-  };
-
   handleKey = (e) => {
     if (e.metaKey) {
       const action = this.shortcuts.meta[e.key];
@@ -140,16 +165,34 @@ export default class RawEditor extends React.Component {
   };
 
   handleSelection = () => {
+    const { value } = this.props;
     const selection = this.getSelection();
     if (selection.start !== selection.end && !HAS_LINE_BREAK.test(selection.selected)) {
       try {
         const position = this.caretPosition.get(selection.start, selection.end);
-        this.setState({ showToolbar: true, selectionPosition: position });
+        this.setState({ showToolbar: true, showBlockMenu: false, selectionPosition: position });
       } catch (e) {
-        this.setState({ showToolbar: false });
+        this.setState({ showToolbar: false, showBlockMenu: false });
+      }
+    } else if (selection.start === selection.end) {
+      const newBlock =
+        (
+          selection.start === 0 ||
+          value.substr(selection.start - 2, 2) === '\n\n') &&
+        (
+          selection.end === (value.length - 1) ||
+          value.substr(selection.end, 2) === '\n\n' ||
+          value.substr(selection.end).match(/\n*$/m)
+        );
+
+      if (newBlock) {
+        const position = this.caretPosition.get(selection.start, selection.end);
+        this.setState({ showToolbar: false, showBlockMenu: true, selectionPosition: position });
+      } else {
+        this.setState({ showToolbar: false, showBlockMenu: false });
       }
     } else {
-      this.setState({ showToolbar: false });
+      this.setState({ showToolbar: false, showBlockMenu: false });
     }
   };
 
@@ -158,6 +201,11 @@ export default class RawEditor extends React.Component {
     this.updateHeight();
   };
 
+  handleBlock = (chars) => {
+    this.replaceSelection(chars);
+    this.setState({ showBlockMenu: false });
+  };
+
   handleDrop = (e) => {
     e.preventDefault();
     let data;
@@ -179,16 +227,25 @@ export default class RawEditor extends React.Component {
   };
 
   render() {
-    const { showToolbar, selectionPosition } = this.state;
+    const { onAddMedia, onRemoveMedia, getMedia } = this.props;
+    const { showToolbar, showBlockMenu, plugins, selectionPosition } = this.state;
     return (<div className={styles.root}>
       <Toolbar
-        ref={this.handleToolbarRef}
         isOpen={showToolbar}
         selectionPosition={selectionPosition}
         onBold={this.handleBold}
         onItalic={this.handleItalic}
         onLink={this.handleLink}
       />
+      <BlockMenu
+        isOpen={showBlockMenu}
+        selectionPosition={selectionPosition}
+        plugins={plugins}
+        onBlock={this.handleBlock}
+        onAddMedia={onAddMedia}
+        onRemoveMedia={onRemoveMedia}
+        getMedia={getMedia}
+      />
       <textarea
         ref={this.handleRef}
         value={this.props.value || ''}
@@ -202,6 +259,8 @@ export default class RawEditor extends React.Component {
 
 RawEditor.propTypes = {
   onAddMedia: PropTypes.func.isRequired,
+  onRemoveMedia: PropTypes.func.isRequired,
+  getMedia: PropTypes.func.isRequired,
   onChange: PropTypes.func.isRequired,
   value: PropTypes.node,
 };

src/components/Widgets/MarkdownControlElements/plugins.js

@@ -1,5 +1,5 @@
 import { Component, PropTypes, Children } from 'react';
-import { List, Record } from 'immutable';
+import { List, Record, fromJS } from 'immutable';
 import _ from 'lodash';
 
 const plugins = { editor: List() };
@@ -11,23 +11,23 @@ const EditorComponent = Record({
   icon: 'exclamation-triangle',
   fields: [],
   pattern: catchesNothing,
-  fromBlock: function(match) { return {}; },
+  fromBlock(match) { return {}; },
-  toBlock: function(attributes) { return 'Plugin'; },
+  toBlock(attributes) { return 'Plugin'; },
-  toPreview: function(attributes) { return 'Plugin'; }
+  toPreview(attributes) { return 'Plugin'; },
 });
 
 
 class Plugin extends Component { // eslint-disable-line
   static propTypes = {
-    children: PropTypes.element.isRequired
+    children: PropTypes.element.isRequired,
   };
 
   static childContextTypes = {
-    plugins: PropTypes.object
+    plugins: PropTypes.object,
   };
 
   getChildContext() {
-    return { plugins: plugins };
+    return { plugins };
   }
 
   render() {
@@ -40,11 +40,11 @@ export function newEditorPlugin(config) {
     id: config.id || config.label.replace(/[^A-Z0-9]+/ig, '_'),
     label: config.label,
     icon: config.icon,
-    fields: config.fields,
+    fields: fromJS(config.fields),
     pattern: config.pattern,
     fromBlock: _.isFunction(config.fromBlock) ? config.fromBlock.bind(null) : null,
     toBlock: _.isFunction(config.toBlock) ? config.toBlock.bind(null) : null,
-    toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null)
+    toPreview: _.isFunction(config.toPreview) ? config.toPreview.bind(null) : config.toBlock.bind(null),
   });