Create an Editor component

conf/storybook/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "es2015",
+    "react",
+    "stage-0"
+  ]
+}

package.json

@@ -48,7 +48,7 @@
   },
   "homepage": "https://github.com/StoryShop/app#readme",
   "devDependencies": {
-    "@kadira/storybook": "^2.14.0",
+    "@kadira/storybook": "^2.5.2",
     "autoprefixer": "^6.3.3",
     "babel-loader": "^6.2.2",
     "babel-plugin-module-resolver": "^2.2.0",
@@ -60,9 +60,9 @@
     "babel-runtime": "^6.5.0",
     "css-loader": "^0.23.1",
     "debug": "^2.2.0",
-    "draft-js": "^0.5.0",
-    "draft-js-mention-plugin": "^1.1.0",
-    "draft-js-plugins-editor": "^1.0.1",
+    "draft-js": "0.9.0",
+    "draft-js-mention-plugin": "1.1.0",
+    "draft-js-plugins-editor": "1.1.0",
     "enzyme": "^2.4.1",
     "express": "^4.13.4",
     "falcor": "^0.1.16",

src/components/editor/index.js

@@ -0,0 +1,115 @@
+import { PropTypes } from 'react';
+import reactStamp from 'react-stamp';
+import { fromJS, List, Repeat } from 'immutable';
+import Editor from 'draft-js-plugins-editor';
+import {
+  EditorState,
+  ContentBlock,
+  convertFromRaw,
+  RichUtils,
+  BlockMapBuilder,
+  genKey,
+  CharacterMetadata,
+} from 'draft-js';
+
+import stripPastePluginFactory from './paste-plugin';
+
+const stripPastePlugin = stripPastePluginFactory();
+
+const EditorComponent = (React, ...behaviours) => reactStamp(React).compose({
+  propTypes: {
+    content: PropTypes.shape({
+      entityMap: PropTypes.object.isRequired,
+      blocks: PropTypes.array.isRequired,
+    }).isRequired,
+
+    onEditStart: PropTypes.func,
+    onEditEnd: PropTypes.func,
+    onChange: PropTypes.func,
+
+    readOnly: PropTypes.bool,
+    plugins: PropTypes.array,
+  },
+
+  init() {
+    this.state = {
+      editor: EditorState.createWithContent( convertFromRaw( this.props.content ) ),
+      readOnly: true,
+    };
+  },
+
+  componentWillUnmount() {
+    this.deleteTimeout();
+    this.save();
+  },
+
+  onClick() {
+    this.setState({ readOnly: false }, () => {
+      this.refs.upstream && this.refs.upstream.focus();
+    });
+  },
+
+  _focus() {
+    this.refs.upstream.focus();
+  },
+
+  onFocus() {
+    if (this.props.onEditStart) {
+      this.props.onEditStart();
+    }
+  },
+
+  onBlur() {
+    this.setState({ readOnly: true });
+    if (this.props.onEditEnd) {
+      this.props.onEditEnd();
+    }
+  },
+
+  onChange(editor) {
+    if (this.props.readOnly) {
+      return;
+    }
+
+    this.setState({ editor });
+
+    if (this.props.onChange) {
+      this.deleteTimeout();
+      this._timeout = setTimeout(::this.save, 3000);
+    }
+  },
+
+  deleteTimeout() {
+    if (this._timeout) {
+      clearTimeout(this._timeout);
+      this._timeout = null;
+    }
+  },
+
+  save() {
+    if (this.props.onChange) {
+      this.props.onChange(this.state.editor.getCurrentContent());
+    }
+  },
+
+  render() {
+    const { plugins = [] } = this.props;
+    const isReadOnly = this.props.readOnly ? true : this.state.readOnly;
+
+    return (
+      <div onClick={::this.onClick}>
+        <Editor
+          ref="upstream"
+          editorState={this.state.editor}
+          plugins={[ ...plugins, stripPastePlugin ]}
+          onChange={::this.onChange}
+          onFocus={::this.onFocus}
+          onBlur={::this.onBlur}
+          readOnly={isReadOnly}
+        />
+      </div>
+    );
+  },
+});
+
+export default EditorComponent;

src/components/editor/paste-plugin/index.js

@@ -0,0 +1,45 @@
+import {
+  EditorState,
+  convertFromHTML,
+  Modifier,
+  BlockMapBuilder,
+} from 'draft-js';
+
+const stripPastePlugin = ( convert = convertFromHTML ) => ({
+  handlePastedText(text, html, { getEditorState, setEditorState }) {
+    if ( ! html ) {
+      return;
+    }
+
+    const htmlFrag = convert( html );
+    if ( ! htmlFrag ) {
+      return;
+    }
+
+    const ALLOWED_STYLE = ['ITALIC', 'BOLD'];
+    const contentBlocks = htmlFrag.map(block => {
+      const characterList = block.getCharacterList().map(list => {
+        const styles = list.getStyle().filter(s => {
+          return ALLOWED_STYLE.indexOf(s) !== -1;
+        });
+        return list.set('style', styles);
+      });
+      return block.set('type', 'unstyled').set('characterList', characterList);
+    });
+
+    const htmlMap = BlockMapBuilder.createFromArray(contentBlocks);
+
+    const editorState = getEditorState();
+    const newContent = Modifier.replaceWithFragment(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      htmlMap
+    );
+
+    setEditorState( EditorState.push( editorState, newContent, 'insert-fragment' ) );
+
+    return true;
+  },
+});
+
+export default stripPastePlugin;

src/components/editor/paste-plugin/spec.js

@@ -0,0 +1,106 @@
+import test from 'tape';
+import spy, { createSpy } from '../../../utils/spy';
+
+import {
+  EditorState,
+  ContentState,
+  ContentBlock,
+  CharacterMetadata,
+  convertToRaw,
+  convertFromRaw,
+  genKey,
+} from 'draft-js';
+import { is, fromJS, List, Repeat, Record } from 'immutable';
+
+import stripPastePluginFactory from './';
+
+test( 'StripPastePlugin', t => {
+  let plugin, actual, expected, result, convertSpy;
+
+  const html = '<p>does not matter</p>';
+
+  const initalContentState = ContentState.createFromBlockArray([
+    new ContentBlock({
+      key: 'initial',
+      type: 'unstyled',
+      text: 'Initial',
+      characterList: List( Repeat( CharacterMetadata.EMPTY, 7 ) ),
+    }),
+  ]);
+  const initialEditorState = EditorState.createWithContent( initalContentState );
+
+  const mocks = {
+    setEditorState: () => {},
+    getEditorState: () => initialEditorState,
+  };
+  const setEditorStateSpy = spy( mocks, 'setEditorState' );
+  const getEditorStateSpy = spy( mocks, 'getEditorState' );
+
+  convertSpy = createSpy( () => [
+    new ContentBlock({
+      key: 'bold',
+      type: 'unstyled',
+      text: 'bold',
+      characterList: List( Repeat( CharacterMetadata.applyStyle( CharacterMetadata.EMPTY, 'BOLD' ), 4 ) ),
+    }),
+    new ContentBlock({
+      key: 'header',
+      type: 'header-two',
+      text: 'header',
+      characterList: List( Repeat( CharacterMetadata.EMPTY, 6 ) ),
+    }),
+  ]);
+
+  plugin = stripPastePluginFactory( convertSpy );
+
+  /**
+   * Ignore Pasted Text
+   */
+  {
+    result = plugin.handlePastedText( null, null, mocks );
+    t.notOk( result, 'should return false when no html is provided' );
+  }
+
+  /**
+   * Process Pasted HTML
+   */
+  {
+    result = plugin.handlePastedText( null, html, mocks );
+    t.ok( result, 'should return true' );
+    t.equal( convertSpy.calls.length, 1, 'should call convert' );
+    t.equal( convertSpy.calls[ 0 ].args[ 0 ], html, 'should call convert with the html' );
+    t.equal( setEditorStateSpy.calls.length, 1, 'should call setEditorState' );
+  }
+
+  /**
+   * Strip Pasted HTML
+   */
+  {
+    let blocks = setEditorStateSpy.calls[ 0 ].args[ 0 ].getCurrentContent().getBlockMap();
+
+    actual = blocks.count();
+    expected = 2;
+    t.equal( actual, expected, 'should result in two blocks' );
+
+    let firstBlock = blocks.first();
+    let secondBlock = blocks.last();
+
+    actual = firstBlock.get( 'text' );
+    expected = 'bold';
+    t.equals( actual, expected, 'first block should be first block of pasted text' );
+
+    actual = firstBlock.getInlineStyleAt( 0 ).toJS();
+    expected = [ 'BOLD' ];
+    t.deepEquals( actual, expected, 'pasted bold text should remain bold' );
+
+    actual = secondBlock.get( 'text' );
+    expected = 'headerInitial';
+    t.equals( actual, expected, 'second block should combine pasted with intial content' );
+
+    actual = secondBlock.get( 'type' );
+    expected = 'unstyled';
+    t.equals( actual, expected, 'second block should be unstyled' );
+  }
+
+  t.end();
+});

src/components/editor/spec.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import test from 'tape';
+import { shallow, mount } from 'enzyme';
+import spy, { createSpy } from '../../utils/spy';
+
+import {
+  EditorState,
+  ContentState,
+  ContentBlock,
+  CharacterMetadata,
+  convertToRaw,
+  convertFromRaw,
+  genKey,
+} from 'draft-js';
+
+import EditorFactory from './';
+import UpstreamEditor from 'draft-js-plugins-editor';
+
+const Editor = EditorFactory(React);
+
+test('Editor', t => {
+  let instance, actual, expected, editor;
+
+  const content = {
+    entityMap: {},
+    blocks: [{ text: '' }],
+  };
+
+  instance = shallow( <Editor content={content} /> );
+
+  /**
+   * Default state
+   */
+  {
+    let editor = instance.find( UpstreamEditor ).at( 0 );
+    t.ok( editor, 'should render a Draft Plugins Editor' );
+    t.ok( editor.props().readOnly, 'should start in readOnly mode' );
+  }
+
+  /**
+   * Writable on click
+   */
+  {
+    instance.simulate( 'click' );
+
+    let editor = instance.find( UpstreamEditor ).at( 0 );
+    t.notOk( editor.props().readOnly, 'should move to writable mode on click' );
+  }
+
+  /**
+   * Read only
+   */
+  {
+    instance = shallow( <Editor content={content} readOnly={true} /> );
+    instance.simulate( 'click' );
+
+    let editor = instance.find( UpstreamEditor ).at( 0 );
+    t.ok( editor.props().readOnly, 'should not move to writeable on click if read only' );
+  }
+
+  /**
+   * Lifecycle methods
+   */
+  {
+    let onEditStartSpy = createSpy();
+    let onEditEndSpy = createSpy();
+
+    instance = shallow(
+      <Editor
+        content={content}
+        onEditStart={onEditStartSpy}
+        onEditEnd={onEditEndSpy}
+      />
+    );
+
+    t.equals( onEditStartSpy.calls.length, 0, 'onEditStart is not called initially');
+    t.equals( onEditEndSpy.calls.length, 0, 'onEditEnd is not called initially');
+
+    instance.instance().onFocus();
+    t.equals(onEditStartSpy.calls.length, 1, 'onEditStart is called after focusing in');
+
+    instance.instance().onBlur();
+    t.equals(onEditEndSpy.calls.length, 1, 'onEditEnd is called after blurring out');
+  }
+
+  t.end();
+});
+