deprecate custom handle functions and make sure the arguments are passed down to the plugins + getEditorState + updateEditorState

nikgraf · nikgraf · commit 43432be31b5e · 2016-03-31T21:36:41.000-07:00
diff --git a/draft-js-plugins-editor/src/Editor/__test__/index.js b/draft-js-plugins-editor/src/Editor/__test__/index.js
@@ -77,16 +77,18 @@ describe('Editor', () => {
         />
       );
 
-      result.node.props.onUpArrow();
-      expect(plugins[0].onUpArrow).has.been.calledOnce();
-      result.node.props.onDragEnter();
-      expect(plugins[0].onDragEnter).has.been.calledOnce();
-      result.node.props.onEscape();
-      expect(plugins[0].onEscape).has.been.calledOnce();
-      result.node.props.onTab();
-      expect(plugins[0].onTab).has.been.calledOnce();
-      result.node.props.onChange(editorState);
-      expect(plugins[0].onChange).has.been.calledOnce();
+      const draftEditor = result.node;
+      const plugin = plugins[0];
+      draftEditor.props.onUpArrow();
+      expect(plugin.onUpArrow).has.been.calledOnce();
+      draftEditor.props.onDragEnter();
+      expect(plugin.onDragEnter).has.been.calledOnce();
+      draftEditor.props.onEscape();
+      expect(plugin.onEscape).has.been.calledOnce();
+      draftEditor.props.onTab();
+      expect(plugin.onTab).has.been.calledOnce();
+      draftEditor.props.onChange(editorState);
+      expect(plugin.onChange).has.been.calledOnce();
     });
 
     it('calls the handle-hooks of the plugin', () => {
@@ -106,14 +108,21 @@ describe('Editor', () => {
         />
       );
 
-      result.node.props.handleKeyCommand();
-      expect(plugins[0].handleKeyCommand).has.been.calledOnce();
-      result.node.props.handlePastedText();
-      expect(plugins[0].handlePastedText).has.been.calledOnce();
-      result.node.props.handleReturn();
-      expect(plugins[0].handleReturn).has.been.calledOnce();
-      result.node.props.handleDrop();
-      expect(plugins[0].handleDrop).has.been.calledOnce();
+      const pluginEditor = result.instance();
+      const draftEditor = result.node;
+      const plugin = plugins[0];
+      draftEditor.props.handleKeyCommand('command');
+      expect(plugin.handleKeyCommand).has.been.calledOnce();
+      expect(plugin.handleKeyCommand).has.been.calledWith('command', pluginEditor.getEditorState, pluginEditor.onChange);
+      draftEditor.props.handlePastedText('command');
+      expect(plugin.handlePastedText).has.been.calledOnce();
+      expect(plugin.handlePastedText).has.been.calledWith('command', pluginEditor.getEditorState, pluginEditor.onChange);
+      draftEditor.props.handleReturn('command');
+      expect(plugin.handleReturn).has.been.calledOnce();
+      expect(plugin.handleReturn).has.been.calledWith('command', pluginEditor.getEditorState, pluginEditor.onChange);
+      draftEditor.props.handleDrop('command');
+      expect(plugin.handleDrop).has.been.calledOnce();
+      expect(plugin.handleDrop).has.been.calledWith('command', pluginEditor.getEditorState, pluginEditor.onChange);
     });
   });
 });
diff --git a/draft-js-plugins-editor/src/Editor/index.js b/draft-js-plugins-editor/src/Editor/index.js
@@ -91,7 +91,6 @@ export default class PluginEditor extends Component {
   };
 
   keyBindingFn = (keyboardEvent) => {
-    // TODO optimize to break after the first one
     let command = this.plugins
       .map((plugin) => {
         if (plugin.keyBindingFn) {
@@ -113,8 +112,6 @@ export default class PluginEditor extends Component {
       }
     }
 
-    // TODO allow to provide a custom handleKeyCommand
-
     return command !== undefined ? command : getDefaultKeyBinding(keyboardEvent);
   };
 
@@ -141,87 +138,21 @@ export default class PluginEditor extends Component {
       .find((result) => result !== undefined);
   };
 
-  handleDroppedFiles = (selection, files) => {
-    if (this.props.handleDroppedFiles) {
-      const result = this.props.handleDroppedFiles({
-        selection,
-        files,
-        getEditorState: this.getEditorState,
-        updateEditorState: this.onChange,
-        props: this.props,
-      });
-      if (result) {
-        return result;
-      }
-    }
-
-    return this.plugins
-        .map((plugin) => {
-          if (plugin.handleDroppedFiles) {
-            const result = plugin.handleDroppedFiles({
-              selection,
-              files,
-              getEditorState: this.getEditorState,
-              updateEditorState: this.onChange,
-              props: this.props,
-            });
-            if (result) {
-              return result;
-            }
-          }
-
-          return undefined;
-        })
-        .find((result) => result !== undefined);
-  };
-
-  handleDrop = (selection, dataTransfer, isInternal) => {
-    if (this.props.handleDrop) {
-      const result = this.props.handleDrop({
-        selection,
-        dataTransfer,
-        isInternal,
-        getEditorState: this.getEditorState,
-        updateEditorState: this.onChange,
-        props: this.props,
-      });
-      if (result) {
-        return result;
-      }
-    }
-
-    return this.plugins
-        .map((plugin) => {
-          if (plugin.handleDrop) {
-            const result = plugin.handleDrop({
-              selection,
-              dataTransfer,
-              isInternal,
-              getEditorState: this.getEditorState,
-              updateEditorState: this.onChange,
-              props: this.props,
-            });
-            if (result) {
-              return result;
-            }
-          }
-
-          return undefined;
-        })
-        .find((result) => result !== undefined);
-  };
-
   // Put the keyboard focus on the editor
   focus = () => {
     this.refs.editor.focus();
   };
 
-  createHandleListener = (name) => (event) => (
-    this.plugins
-      .filter((plug) => plug[name])
-      .map((plugin) => plugin[name](event))
-      .find((result) => result === true) === true
-  );
+  createHandleListener = (name) => (...args) => {
+    const newArgs = [].slice.apply(args);
+    newArgs.push(this.getEditorState);
+    newArgs.push(this.onChange);
+
+    return this.plugins
+      .filter((plugin) => plugin[name])
+      .map((plugin) => plugin[name](...newArgs))
+      .find((result) => result === true) === true;
+  };
 
   createOnListener = (name) => (event) => (
     this.plugins
@@ -230,18 +161,12 @@ export default class PluginEditor extends Component {
   );
 
   createEventListeners = () => {
-    const listeners = {
-      onChange: this.onChange,
-      handleKeyCommand: this.handleKeyCommand,
-      keyBindingFn: this.keyBindingFn,
-      handleReturn: this.handleReturn,
-    };
-
+    const listeners = {};
     const keepHandlers = ['onChange', 'handleKeyCommand'];
 
     // bind random onListeners and handleListeners
-    this.plugins.forEach((plug) => {
-      Object.keys(plug).forEach((attrName) => {
+    this.plugins.forEach((plugin) => {
+      Object.keys(plugin).forEach((attrName) => {
         if (attrName.indexOf('on') === 0 && keepHandlers.indexOf(attrName !== -1)) {
           listeners[attrName] = this.createOnListener(attrName);
         }
@@ -276,8 +201,9 @@ export default class PluginEditor extends Component {
         {...pluginProps}
         {...this.props}
         {...listeners}
-        handleDroppedFiles={ this.handleDroppedFiles }
-        handleDrop={ this.handleDrop }
+        onChange={ this.onChange }
+        handleKeyCommand={ this.handleKeyCommand }
+        keyBindingFn={ this.keyBindingFn }
         editorState={this.editorState}
         blockRendererFn={this.blockRendererFn}
         ref="editor"
