[Review] Flatten configuration

draft-js-dnd-plugin/src/index.js

@@ -37,12 +37,10 @@ const uploadPlugin = (config = {}) => {
   };
 
   return {
-    pluginProps: {
-      onChange: cleanupEmpty,
-      blockRendererFn: blockRendererFn(blockRendererConfig),
-      handleDroppedFiles: onDropFile(blockRendererConfig),
-      handleDrop: onDropBlock(blockRendererConfig),
-    },
+    onChange: cleanupEmpty,
+    blockRendererFn: blockRendererFn(blockRendererConfig),
+    handleDroppedFiles: onDropFile(blockRendererConfig),
+    handleDrop: onDropBlock(blockRendererConfig),
     addListener: emitter.addListener,
     removeListener: emitter.removeListener,
   };

draft-js-emoji-plugin/src/index.js

@@ -56,50 +56,48 @@ const emojiPlugin = (config = {}) => {
     theme,
   };
   return {
-    pluginProps: {
-      decorators: [
-        {
-          strategy: emojiStrategy,
-          component: decorateComponentWithProps(Emoji, { theme }),
-        },
-        {
-          strategy: emojiSearchStrategy,
-          component: decorateComponentWithProps(EmojiSearch, emojiSearchProps),
-        },
-      ],
-
-      getEditorProps: () => {
-        const ariaHasPopup = ariaProps.ariaHasPopup.some((entry) => entry);
-        const ariaExpanded = ariaProps.ariaExpanded.some((entry) => entry);
-        return {
-          role: 'combobox',
-          ariaAutoComplete: 'list',
-          ariaHasPopup: ariaHasPopup ? 'true' : 'false',
-          ariaExpanded: ariaExpanded ? 'true' : 'false',
-          ariaActiveDescendantID: ariaProps.ariaActiveDescendantID.first(),
-          ariaOwneeID: ariaProps.ariaOwneeID.first(),
-        };
+    decorators: [
+      {
+        strategy: emojiStrategy,
+        component: decorateComponentWithProps(Emoji, { theme }),
+      },
+      {
+        strategy: emojiSearchStrategy,
+        component: decorateComponentWithProps(EmojiSearch, emojiSearchProps),
       },
+    ],
 
-      onDownArrow: (keyboardEvent) => callbacks.onDownArrow.forEach((onDownArrow) => onDownArrow(keyboardEvent)),
-      onTab: (keyboardEvent) => callbacks.onTab.forEach((onTab) => onTab(keyboardEvent)),
-      onUpArrow: (keyboardEvent) => callbacks.onUpArrow.forEach((onUpArrow) => onUpArrow(keyboardEvent)),
-      onEscape: (keyboardEvent) => callbacks.onEscape.forEach((onEscape) => onEscape(keyboardEvent)),
-      handleReturn: (keyboardEvent) => (
-       callbacks.handleReturn
-       .map((handleReturn) => handleReturn(keyboardEvent))
-       .find((result) => result === true)
-      ),
-      onChange: (editorState) => {
-        let newEditorState = editorState;
-        if (callbacks.onChange.size !== 0) {
-          callbacks.onChange.forEach((onChange) => {
-            newEditorState = onChange(editorState);
-          });
-        }
+    getEditorProps: () => {
+      const ariaHasPopup = ariaProps.ariaHasPopup.some((entry) => entry);
+      const ariaExpanded = ariaProps.ariaExpanded.some((entry) => entry);
+      return {
+        role: 'combobox',
+        ariaAutoComplete: 'list',
+        ariaHasPopup: ariaHasPopup ? 'true' : 'false',
+        ariaExpanded: ariaExpanded ? 'true' : 'false',
+        ariaActiveDescendantID: ariaProps.ariaActiveDescendantID.first(),
+        ariaOwneeID: ariaProps.ariaOwneeID.first(),
+      };
+    },
 
-        return newEditorState;
-      },
+    onDownArrow: (keyboardEvent) => callbacks.onDownArrow.forEach((onDownArrow) => onDownArrow(keyboardEvent)),
+    onTab: (keyboardEvent) => callbacks.onTab.forEach((onTab) => onTab(keyboardEvent)),
+    onUpArrow: (keyboardEvent) => callbacks.onUpArrow.forEach((onUpArrow) => onUpArrow(keyboardEvent)),
+    onEscape: (keyboardEvent) => callbacks.onEscape.forEach((onEscape) => onEscape(keyboardEvent)),
+    handleReturn: (keyboardEvent) => (
+     callbacks.handleReturn
+     .map((handleReturn) => handleReturn(keyboardEvent))
+     .find((result) => result === true)
+    ),
+    onChange: (editorState) => {
+      let newEditorState = editorState;
+      if (callbacks.onChange.size !== 0) {
+        callbacks.onChange.forEach((onChange) => {
+          newEditorState = onChange(editorState);
+        });
+      }
+
+      return newEditorState;
     },
   };
 };

draft-js-hashtag-plugin/src/index.js

@@ -17,14 +17,12 @@ const hashtagPlugin = (config = {}) => {
   // breaking change. 1px of an increased padding can break a whole layout.
   const theme = config.theme ? config.theme : defaultTheme;
   return {
-    pluginProps: {
-      decorators: [
-        {
-          strategy: hashtagStrategy,
-          component: decorateComponentWithProps(Hashtag, { theme }),
-        },
-      ],
-    },
+    decorators: [
+      {
+        strategy: hashtagStrategy,
+        component: decorateComponentWithProps(Hashtag, { theme }),
+      },
+    ],
   };
 };
 

draft-js-linkify-plugin/src/index.js

@@ -17,14 +17,12 @@ const linkPlugin = (config = {}) => {
   // breaking change. 1px of an increased padding can break a whole layout.
   const theme = config.theme ? config.theme : defaultTheme;
   return {
-    pluginProps: {
-      decorators: [
-        {
-          strategy: linkStrategy,
-          component: decorateComponentWithProps(Link, { theme }),
-        },
-      ],
-    },
+    decorators: [
+      {
+        strategy: linkStrategy,
+        component: decorateComponentWithProps(Link, { theme }),
+      },
+    ],
   };
 };
 

draft-js-mention-plugin/src/index.js

@@ -53,49 +53,47 @@ const mentionPlugin = (config = {}) => {
     theme,
   };
   return {
-    pluginProps: {
-      decorators: [
-        {
-          strategy: mentionStrategy,
-          component: decorateComponentWithProps(Mention, { theme }),
-        },
-        {
-          strategy: mentionSearchStrategy,
-          component: decorateComponentWithProps(MentionSearch, mentionSearchProps),
-        },
-      ],
-      getEditorProps: () => {
-        const ariaHasPopup = ariaProps.ariaHasPopup.some((entry) => entry);
-        const ariaExpanded = ariaProps.ariaExpanded.some((entry) => entry);
-        return {
-          role: 'combobox',
-          ariaAutoComplete: 'list',
-          ariaHasPopup: ariaHasPopup ? 'true' : 'false',
-          ariaExpanded: ariaExpanded ? 'true' : 'false',
-          ariaActiveDescendantID: ariaProps.ariaActiveDescendantID.first(),
-          ariaOwneeID: ariaProps.ariaOwneeID.first(),
-        };
+    decorators: [
+      {
+        strategy: mentionStrategy,
+        component: decorateComponentWithProps(Mention, { theme }),
       },
+      {
+        strategy: mentionSearchStrategy,
+        component: decorateComponentWithProps(MentionSearch, mentionSearchProps),
+      },
+    ],
+    getEditorProps: () => {
+      const ariaHasPopup = ariaProps.ariaHasPopup.some((entry) => entry);
+      const ariaExpanded = ariaProps.ariaExpanded.some((entry) => entry);
+      return {
+        role: 'combobox',
+        ariaAutoComplete: 'list',
+        ariaHasPopup: ariaHasPopup ? 'true' : 'false',
+        ariaExpanded: ariaExpanded ? 'true' : 'false',
+        ariaActiveDescendantID: ariaProps.ariaActiveDescendantID.first(),
+        ariaOwneeID: ariaProps.ariaOwneeID.first(),
+      };
+    },
 
-      onDownArrow: (keyboardEvent) => callbacks.onDownArrow.forEach((onDownArrow) => onDownArrow(keyboardEvent)),
-      onTab: (keyboardEvent) => callbacks.onTab.forEach((onTab) => onTab(keyboardEvent)),
-      onUpArrow: (keyboardEvent) => callbacks.onUpArrow.forEach((onUpArrow) => onUpArrow(keyboardEvent)),
-      onEscape: (keyboardEvent) => callbacks.onEscape.forEach((onEscape) => onEscape(keyboardEvent)),
-      handleReturn: (keyboardEvent) => (
-        callbacks.handleReturn
-          .map((handleReturn) => handleReturn(keyboardEvent))
-          .find((result) => result === true)
-      ),
-      onChange: (editorState) => {
-        let newEditorState = editorState;
-        if (callbacks.onChange.size !== 0) {
-          callbacks.onChange.forEach((onChange) => {
-            newEditorState = onChange(editorState);
-          });
-        }
+    onDownArrow: (keyboardEvent) => callbacks.onDownArrow.forEach((onDownArrow) => onDownArrow(keyboardEvent)),
+    onTab: (keyboardEvent) => callbacks.onTab.forEach((onTab) => onTab(keyboardEvent)),
+    onUpArrow: (keyboardEvent) => callbacks.onUpArrow.forEach((onUpArrow) => onUpArrow(keyboardEvent)),
+    onEscape: (keyboardEvent) => callbacks.onEscape.forEach((onEscape) => onEscape(keyboardEvent)),
+    handleReturn: (keyboardEvent) => (
+      callbacks.handleReturn
+        .map((handleReturn) => handleReturn(keyboardEvent))
+        .find((result) => result === true)
+    ),
+    onChange: (editorState) => {
+      let newEditorState = editorState;
+      if (callbacks.onChange.size !== 0) {
+        callbacks.onChange.forEach((onChange) => {
+          newEditorState = onChange(editorState);
+        });
+      }
 
-        return newEditorState;
-      },
+      return newEditorState;
     },
   };
 };

draft-js-plugins-editor/src/Editor/index.js

@@ -17,15 +17,10 @@ import moveToStartOfSelectedBlock from '../modifiers/moveToStartOfSelectedBlock'
 import { List } from 'immutable';
 
 export default class PluginEditor extends Component {
-
   // TODO add flow types & propTypes - since it's a library and people might not use flow we want to have both
-
   constructor(props) {
     super(props);
-    this.plugins = List(props.plugins)
-      .filter((plugin) => plugin.pluginProps !== undefined)
-      .map((plugin) => plugin.pluginProps)
-      .toArray();
+    this.plugins = List(props.plugins).toArray();
     const compositeDecorator = createCompositeDecorator(this.plugins, this.getEditorState, this.onChange);
 
     // TODO consider triggering an onChange here to make sure the editorState is in sync

draft-js-sticker-plugin/src/index.js

@@ -55,10 +55,8 @@ const stickerPlugin = (config = {}) => {
     Sticker: decorateComponentWithProps(Sticker, stickerProps),
   };
   return {
-    pluginProps: {
-      blockRendererFn: blockRendererFn(blockRendererConfig),
-      onChange: cleanupEmptyStickers,
-    },
+    blockRendererFn: blockRendererFn(blockRendererConfig),
+    onChange: cleanupEmptyStickers,
     add: addSticker,
     remove: removeSticker,
     StickerSelect: decorateComponentWithProps(StickerSelect, stickerSelectProps),