Merge pull request draft-js-plugins#171 from draft-js-plugins/custom-style-map

nikgraf · nikgraf · commit c4fe2dd77961 · 2016-04-02T14:52:15.000-07:00
Custom style map
diff --git a/docs/client/components/pages/Playground/PlaygroundEditor/colorPlugin.js b/docs/client/components/pages/Playground/PlaygroundEditor/colorPlugin.js
@@ -0,0 +1,3 @@
+import colorStyleMap from './colorStyleMap';
+
+export const customStyleMap = colorStyleMap;
diff --git a/docs/client/components/pages/Playground/PlaygroundEditor/index.js b/docs/client/components/pages/Playground/PlaygroundEditor/index.js
@@ -9,9 +9,10 @@ import {
   Modifier,
   RichUtils,
 } from 'draft-js';
+import * as colorPlugin from './colorPlugin';
 
 const hashtagPlugin = createHashtagPlugin();
-const plugins = [hashtagPlugin];
+const plugins = [hashtagPlugin, colorPlugin];
 const text = `#TIL: This editor can have all sorts of #hashtags. Pretty #cool :)
 Try it yourself by starting a word with a # (hash character) …
 `;
@@ -72,7 +73,6 @@ export default class SimpleHashtagEditor extends Component {
     return (
       <div className={ editorStyles.editor } onClick={ this.focus }>
         <Editor
-          customStyleMap={colorStyleMap}
           editorState={this.state.editorState}
           onChange={this.onChange}
           plugins={plugins}
diff --git a/draft-js-plugins-editor/src/Editor/__test__/index.js b/draft-js-plugins-editor/src/Editor/__test__/index.js
@@ -73,7 +73,7 @@ describe('Editor', () => {
     });
   });
 
-  describe('with a plugin', () => {
+  describe('with plugins', () => {
     let onChange;
     let editorState;
 
@@ -239,6 +239,42 @@ describe('Editor', () => {
       expect(plugin.keyBindingFn).has.been.calledOnce();
       expect(plugin.keyBindingFn).has.been.calledWith('command', pluginEditor.getEditorState, pluginEditor.onChange);
     });
+
+    it('combines the customStyleMaps from all plugins', () => {
+      const plugins = [
+        {
+          customStyleMap: {
+            orange: {
+              color: 'rgba(255, 127, 0, 1.0)',
+            },
+          },
+        },
+        {
+          customStyleMap: {
+            yellow: {
+              color: 'rgba(180, 180, 0, 1.0)',
+            },
+          },
+        },
+      ];
+      const result = mount(
+        <PluginEditor
+          editorState={ editorState }
+          onChange={ onChange }
+          plugins={ plugins }
+        />
+      );
+      const expected = {
+        orange: {
+          color: 'rgba(255, 127, 0, 1.0)',
+        },
+        yellow: {
+          color: 'rgba(180, 180, 0, 1.0)',
+        },
+      };
+      const pluginEditor = result.instance();
+      expect(pluginEditor.resolveCustomStyleMap()).to.deep.equal(expected);
+    });
   });
 
   describe('passed proxy to DraftEditor', () => {
diff --git a/draft-js-plugins-editor/src/Editor/index.js b/draft-js-plugins-editor/src/Editor/index.js
@@ -116,6 +116,19 @@ class PluginEditor extends Component {
     return plugins;
   };
 
+  resolveCustomStyleMap = () => {
+    let styles = {};
+    for (const plugin of this.props.plugins) {
+      if (!plugin.customStyleMap) continue;
+      styles = {
+        ...styles,
+        ...plugin.customStyleMap,
+      };
+    }
+
+    return styles;
+  };
+
   render() {
     let pluginProps = {};
 
@@ -132,12 +145,13 @@ class PluginEditor extends Component {
     });
 
     const pluginHooks = this.createPluginHooks();
-
+    const customStyleMap = this.resolveCustomStyleMap();
     return (
       <Editor
-        {...pluginProps}
-        {...pluginHooks}
-        {...this.props}
+        { ...pluginProps }
+        { ...pluginHooks }
+        { ...this.props }
+        customStyleMap={ customStyleMap }
         onChange={ this.onChange }
         editorState={ this.props.editorState }
         ref="editor"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import colorStyleMap from './colorStyleMap';`
	`2`	`+`
	`3`	`+export const customStyleMap = colorStyleMap;`