Handling pasted text with handlePastedText does not work!

I just want to trim the text when pasting, to avoid undesired whitespace. The DraftJs docs says that I should use handlePastedText, that’s what I did with the following code :

  handlePastedText(text, html) {
    console.log("handlePastedText executed");
    const {editorState} = this.state;
    const newState = Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), text.trim());
    this.onChange(EditorState.push(editorState, newState, 'insert-fragment'));

    return true;
  }

but that didn’t work, until I changed import { Editor } from 'draft-js-plugins-editor'; to import { Editor } from 'draft-js';

Here are some gifs :

(With the normal Editor)

(With the Plugins Editor)

[icd2k3]

@ramrami and @juliankrispel we figured this one out. The draft-js docs are confusing for handlePastedtext which state:

Handle text and html(for rich text) that has been pasted directly into the editor. Returning true will prevent the default paste behavior.

This should actually read:

Handle text and html(for rich text) that has been pasted directly into the editor. Returning ‘handled’ will prevent the default paste behavior.

So, for my example above, switching to this works:

import Editor from 'draft-js-plugins-editor';
<Editor
  handlePastedText={() => 'handled'}  // blocks text from being pasted into editor
  //...
/>

The reason why returning true was not working in the plugins editor is because of the createHandleHooks which expects ‘handled’ or ‘not-handled’.

So IMO the main problem here is the draft-js docs for handlePastedText to reflect this which is outlined in Cancelable Handlers

EDIT: submitted documentation PR to draft-js here: https://github.com/facebook/draft-js/pull/1318

[ramrami]

Thanks @icd2k3, this is interesting. However, if you look at the draft-js source code here, the function is checking for value === true.

/**
 * Utility method for determining whether or not the value returned
 * from a handler indicates that it was handled.
 */
function isEventHandled(value: DraftHandleValue): boolean {
  return value === 'handled' || value === true;
}

So both values should work (maybe the docs should be updated with both values). But IMO it’s still a problem with draft-js-plugins that should check for both values, or use isEventHandled if it’s public.