Position editor toolbar

package.json

@@ -94,6 +94,7 @@
     "@kadira/storybook": "^1.36.0",
     "autoprefixer": "^6.3.3",
     "bricks.js": "^1.7.0",
+    "textarea-caret-position": "^0.1.1",
     "dateformat": "^1.0.12",
     "fuzzy": "^0.1.1",
     "immutability-helper": "^2.0.0",

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component, PropTypes } from 'react';
 import styles from './Toolbar.css';
 
 function button(label, action) {
@@ -7,15 +7,44 @@ function button(label, action) {
   </li>);
 }
 
-export default class Toolbar extends React.Component {
+export default class Toolbar extends Component {
+  static propTypes = {
+    isOpen: PropTypes.bool,
+    selectionPosition: PropTypes.node,
+    onBold: PropTypes.func.isRequired,
+    onItalic: PropTypes.func.isRequired,
+    onLink: PropTypes.func.isRequired,
+  };
+
+  componentDidUpdate() {
+    const { selectionPosition } = this.props;
+    if (selectionPosition) {
+      const rect = this.element.getBoundingClientRect();
+      const parentRect = this.element.parentElement.getBoundingClientRect();
+      const style = this.element.style;
+      const pos = {
+        top: selectionPosition.top - rect.height - 5,
+        left: Math.min(selectionPosition.left, parentRect.width - rect.width),
+      };
+      style.setProperty('top', `${ pos.top }px`);
+      style.setProperty('left', `${ pos.left }px`);
+    }
+  }
+
+  handleRef = (ref) => {
+    this.element = ref;
+  };
+
   render() {
     const { isOpen, onBold, onItalic, onLink } = this.props;
     const classNames = [styles.Toolbar];
+
     if (isOpen) {
       classNames.push(styles.Visible);
     }
+
     return (
-      <ul className={classNames.join(' ')}>
+      <ul className={classNames.join(' ')} ref={this.handleRef}>
         {button('Bold', onBold)}
         {button('Italic', onItalic)}
         {button('Link', onLink)}

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

@@ -1,13 +1,3 @@
 .root {
-  font-family: monospace;
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  border: none;
-  outline: 0;
-  box-shadow: none;
-  background: 0 0;
-  font-size: 18px;
-  color: #7c8382;
+  position: relative;
 }

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

@@ -1,7 +1,10 @@
 import React, { PropTypes } from 'react';
+import CaretPosition from 'textarea-caret-position';
 import Toolbar from './Toolbar';
 import MediaProxy from '../../../../valueObjects/MediaProxy';
+import styles from './index.css';
 
+const HAS_LINE_BREAK = /\n/m;
 
 function processUrl(url) {
   if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
@@ -103,6 +106,9 @@ export default class RawEditor extends React.Component {
 
   handleRef = (ref) => {
     this.element = ref;
+    if (ref) {
+      this.caretPosition = new CaretPosition(ref);
+    }
   };
 
   handleToolbarRef = (ref) => {
@@ -135,7 +141,16 @@ export default class RawEditor extends React.Component {
 
   handleSelection = () => {
     const selection = this.getSelection();
-    this.setState({ showToolbar: selection.start !== selection.end });
+    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 });
+      } catch (e) {
+        this.setState({ showToolbar: false });
+      }
+    } else {
+      this.setState({ showToolbar: false });
+    }
   };
 
   handleChange = (e) => {
@@ -164,11 +179,12 @@ export default class RawEditor extends React.Component {
   };
 
   render() {
-    const { showToolbar } = this.state;
-    return (<div>
+    const { showToolbar, 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}