Editor fixes (#143)

* Use icons for style menu

* Add h1/h2 options to style toolbar

* Handle rich paste events

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

@@ -1,14 +1,26 @@
 .Toolbar {
   position: absolute;
   z-index: 1000;
-  display: none;  
+  display: none;
   margin: none;
   padding: none;
+  box-shadow: 1px 1px 5px;
   list-style: none;
 }
 
 .Button {
   display: inline-block;
+
+  & button {
+    padding: 5px;
+    border: none;
+    border-right: 1px solid #eee;
+    background: #fff;
+  }
+}
+
+.Button:last-child button {
+  border-right: none;
 }
 
 .Visible {

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

@@ -1,9 +1,12 @@
 import React, { Component, PropTypes } from 'react';
+import { Icon } from '../../../UI';
 import styles from './Toolbar.css';
 
-function button(label, action) {
+function button(label, icon, action) {
   return (<li className={styles.Button}>
-    <button className={styles[label]} onClick={action}>{label}</button>
+    <button className={styles[label]} onClick={action} title={label}>
+      <Icon type={icon} />
+    </button>
   </li>);
 }
 
@@ -11,6 +14,8 @@ export default class Toolbar extends Component {
   static propTypes = {
     isOpen: PropTypes.bool,
     selectionPosition: PropTypes.object,
+    onH1: PropTypes.func.isRequired,
+    onH2: PropTypes.func.isRequired,
     onBold: PropTypes.func.isRequired,
     onItalic: PropTypes.func.isRequired,
     onLink: PropTypes.func.isRequired,
@@ -36,7 +41,7 @@ export default class Toolbar extends Component {
   };
 
   render() {
-    const { isOpen, onBold, onItalic, onLink } = this.props;
+    const { isOpen, onH1, onH2, onBold, onItalic, onLink } = this.props;
     const classNames = [styles.Toolbar];
 
     if (isOpen) {
@@ -45,9 +50,11 @@ export default class Toolbar extends Component {
 
     return (
       <ul className={classNames.join(' ')} ref={this.handleRef}>
-        {button('Bold', onBold)}
+        {button('Header 1', 'h1', onH1)}
-        {button('Italic', onItalic)}
+        {button('Header 2', 'h2', onH2)}
-        {button('Link', onLink)}
+        {button('Bold', 'bold', onBold)}
+        {button('Italic', 'italic', onItalic)}
+        {button('Link', 'link', onLink)}
       </ul>
     );
   }

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

@@ -1,5 +1,8 @@
 import React, { PropTypes } from 'react';
 import { fromJS } from 'immutable';
+import MarkupIt from 'markup-it';
+import markdownSyntax from 'markup-it/syntaxes/markdown';
+import htmlSyntax from 'markup-it/syntaxes/html';
 import CaretPosition from 'textarea-caret-position';
 import registry from '../../../../lib/registry';
 import MediaProxy from '../../../../valueObjects/MediaProxy';
@@ -9,6 +12,9 @@ import styles from './index.css';
 
 const HAS_LINE_BREAK = /\n/m;
 
+const markdown = new MarkupIt(markdownSyntax);
+const html = new MarkupIt(htmlSyntax);
+
 function processUrl(url) {
   if (url.match(/^(https?:\/\/|mailto:|\/)/)) {
     return url;
@@ -23,6 +29,42 @@ function preventDefault(e) {
   e.preventDefault();
 }
 
+function cleanupPaste(paste) {
+  const content = html.toContent(paste);
+  return markdown.toText(content);
+}
+
+function getCleanPaste(e) {
+  const transfer = e.clipboardData;
+  return new Promise((resolve) => {
+    const isHTML = !!Array.from(transfer.types).find(type => type === 'text/html');
+
+    if (isHTML) {
+      const data = transfer.getData('text/html');
+      // Avoid trying to clean up full HTML documents with head/body/etc
+      if (!data.match(/^\s*<!doctype/i)) {
+        e.preventDefault();
+        resolve(cleanupPaste(data));
+      } else {
+        // Handle complex pastes by stealing focus with a contenteditable div
+        const div = document.createElement('div');
+        div.contentEditable = true;
+        div.setAttribute('style', 'opacity: 0; overflow: hidden; width: 1px; height: 1px; position: fixed; top: 50%; left: 0;');
+        document.body.appendChild(div);
+        div.focus();
+        setTimeout(() => {
+          resolve(cleanupPaste(div.innerHTML));
+          document.body.removeChild(div);
+        }, 50);
+        return null;
+      }
+    }
+
+    e.preventDefault();
+    return resolve(transfer.getData(transfer.types[0]));
+  });
+}
+
 const buildtInPlugins = fromJS([{
   label: 'Image',
   id: 'image',
@@ -64,6 +106,7 @@ export default class RawEditor extends React.Component {
     this.element.addEventListener('dragenter', preventDefault, false);
     this.element.addEventListener('dragover', preventDefault, false);
     this.element.addEventListener('drop', this.handleDrop, false);
+    this.element.addEventListener('paste', this.handlePaste, false);
   }
 
   componentDidUpdate() {
@@ -127,6 +170,31 @@ export default class RawEditor extends React.Component {
     this.props.onChange(beforeSelection + chars + afterSelection);
   }
 
+  toggleHeader(header) {
+    const { value } = this.props;
+    const selection = this.getSelection();
+    const newSelection = Object.assign({}, selection);
+    const lastNewline = value.lastIndexOf('\n', selection.start);
+    const currentMatch = value.substr(lastNewline + 1).match(/^(#+)\s/);
+    const beforeHeader = value.substr(0, lastNewline + 1);
+    let afterHeader;
+    let chars;
+    if (currentMatch) {
+      afterHeader = value.substr(lastNewline + 1 + currentMatch[0].length);
+      chars = currentMatch[1] === header ? '' : `${ header } `;
+      const diff = chars.length - currentMatch[0].length;
+      newSelection.start += diff;
+      newSelection.end += diff;
+    } else {
+      afterHeader = value.substr(lastNewline + 1);
+      chars = `${ header } `;
+      newSelection.start += header.length + 1;
+      newSelection.end += header.length + 1;
+    }
+    this.newSelection = newSelection;
+    this.props.onChange(beforeHeader + chars + afterHeader);
+  }
+
   updateHeight() {
     if (this.element.scrollHeight > this.element.clientHeight) {
       this.element.style.height = `${ this.element.scrollHeight }px`;
@@ -206,6 +274,12 @@ export default class RawEditor extends React.Component {
     this.setState({ showBlockMenu: false });
   };
 
+  handleHeader(header) {
+    return () => {
+      this.toggleHeader(header);
+    };
+  }
+
   handleDrop = (e) => {
     e.preventDefault();
     let data;
@@ -226,6 +300,20 @@ export default class RawEditor extends React.Component {
     this.replaceSelection(data);
   };
 
+  handlePaste = (e) => {
+    const { value, onChange } = this.props;
+    const selection = this.getSelection();
+    const beforeSelection = value.substr(0, selection.start);
+    const afterSelection = value.substr(selection.end);
+
+    getCleanPaste(e).then((paste) => {
+      const newSelection = Object.assign({}, selection);
+      newSelection.start = newSelection.end = beforeSelection.length + paste.length;
+      this.newSelection = newSelection;
+      onChange(beforeSelection + paste + afterSelection);
+    });
+  }
+
   render() {
     const { onAddMedia, onRemoveMedia, getMedia } = this.props;
     const { showToolbar, showBlockMenu, plugins, selectionPosition } = this.state;
@@ -233,6 +321,8 @@ export default class RawEditor extends React.Component {
       <Toolbar
         isOpen={showToolbar}
         selectionPosition={selectionPosition}
+        onH1={this.handleHeader('#')}
+        onH2={this.handleHeader('##')}
         onBold={this.handleBold}
         onItalic={this.handleItalic}
         onLink={this.handleLink}