Implement the ComfyEditor component. Ref GH-58

conf/storybook/webpack.config.js

@@ -6,5 +6,15 @@ module.exports = {
       path.resolve( './src' ),
     ],
   },
+  module: {
+    loaders: [
+      {
+        test: /plugin\.css$/,
+        loaders: [
+          'style', 'css',
+        ],
+      },
+    ],
+  }
 };
 

package.json

@@ -50,9 +50,11 @@
     "babel-runtime": "^6.5.0",
     "css-loader": "^0.23.1",
     "debug": "^2.2.0",
-    "draft-js": "0.9.0",
-    "draft-js-mention-plugin": "1.1.0",
-    "draft-js-plugins-editor": "1.1.0",
+    "draft-js": "0.9.1",
+    "draft-js-linkify-plugin": "^2.0.0-beta5",
+    "draft-js-mention-plugin": "2.0.0-beta5",
+    "draft-js-plugins-editor": "2.0.0-beta5",
+    "draft-js-undo-plugin": "^2.0.0-beta5",
     "enzyme": "^2.4.1",
     "express": "^4.13.4",
     "falcor": "^0.1.16",

src/components/comfy-editor/index.js

@@ -0,0 +1,65 @@
+import React, { PropTypes } from 'react';
+import reactStamp from 'react-stamp';
+import { fromJS, List, Repeat } from 'immutable';
+
+import EditorFactory from 'components/editor';
+
+import createMentionPlugin, { defaultSuggestionsFilter } from 'draft-js-mention-plugin';
+import createUndoPlugin from 'draft-js-undo-plugin';
+import createLinkifyPlugin from 'draft-js-linkify-plugin';
+
+import 'draft-js-mention-plugin/lib/plugin.css';
+import 'draft-js-undo-plugin/lib/plugin.css';
+import 'draft-js-linkify-plugin/lib/plugin.css';
+
+import { cyan700, green700 } from 'material-ui/lib/styles/colors';
+
+const Editor = EditorFactory(React);
+
+const MentionComponent = ({ entityKey, mention, className, mentionPrefix, decoratedText, children }) => (
+  <a
+    href={mention.get('link')}
+    className={className}
+    style={{
+      background: 'none',
+      color: mention.get('type') === 'character' ? cyan700 : green700,
+    }}
+  >
+    {mentionPrefix}{children}
+  </a>
+);
+
+const mentionPlugin = createMentionPlugin({ mentionComponent: MentionComponent });
+const undoPlugin = createUndoPlugin();
+const linkifyPlugin = createLinkifyPlugin();
+
+const { MentionSuggestions } = mentionPlugin;
+
+export default (React, ...behaviours) => reactStamp(React).compose({
+  propTypes: {
+    onSearchChange: PropTypes.func,
+    searchSuggestions: PropTypes.arrayOf(PropTypes.shape({
+      type: PropTypes.oneOf(['character', 'element']).isRequired,
+      _id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      link: PropTypes.string.isRequired,
+      avatar: PropTypes.string.isRequired,
+    })).isRequired,
+  },
+
+  render() {
+    const { onSearchChange, searchSuggestions, plugins = [], ...rest } = this.props;
+    return (
+      <div>
+        <Editor
+          plugins={[...plugins, mentionPlugin, undoPlugin, linkifyPlugin]}
+          {...rest}
+        />
+        <MentionSuggestions
+          onSearchChange={onSearchChange}
+          suggestions={fromJS(searchSuggestions)}
+        />
+      </div>
+    );
+  },
+});

src/components/comfy-editor/spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import test from 'tape';
+import { shallow, mount } from 'enzyme';
+import spy, { createSpy } from '../../utils/spy';
+
+import EditorFactory from './';
+import UpstreamEditorFactory from 'components/editor';
+
+const UpstreamEditor = UpstreamEditorFactory(React);
+
+const mentionsPlugin = { MentionSuggestions: () => ({}) };
+const undoPlugin = {};
+const linkifyPlugin = {};
+
+const Editor = EditorFactory(React);
+
+test('Comfy editor', t => {
+  let instance, actual, expected, editor;
+
+  const content = {};
+  instance = shallow( <Editor content={content} /> );
+
+  t.equals(instance.find(UpstreamEditor).length, 1);
+
+  t.end();
+});
+

src/components/comfy-editor/story.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+
+import EditorFactory from './';
+
+const Editor = EditorFactory(React);
+
+import {
+  EditorState,
+  ContentState,
+  ContentBlock,
+  CharacterMetadata,
+  convertToRaw,
+  convertFromRaw,
+  genKey,
+} from 'draft-js';
+import { is, fromJS, List, Repeat } from 'immutable';
+
+const genContent = (text) => {
+  const contentState = ContentState.createFromBlockArray([
+    new ContentBlock({
+      key: 'abc',
+      type: 'unstyled',
+      text,
+      characterList: List(Repeat(CharacterMetadata.EMPTY, text.length))
+    }),
+  ]);
+  return convertToRaw(contentState);
+};
+
+storiesOf('Comfy editor', module)
+  .add('default', () => {
+    const initialContent = genContent('Here we go');
+    return (
+      <Editor
+        content={initialContent}
+        onSearchChange={action('onSearchChange')}
+        searchSuggestions={[
+          { type: 'character', _id: '1', name: 'Abc', link: '123', avatar: 'https://sigil.cupcake.io/Abc' },
+          { type: 'element', _id: '2', name: 'Zone', link: '42', avatar: 'https://sigil.cupcake.io/Zone' },
+        ]}
+      />
+    );
+  });