Switch implementation to use custom onPaste handler with custom mime type instead of handlePastedText

[thibaudcolas]

Is your proposal related to a problem?

Follow-up to #268. This package now uses the undocumented onCopy and onCut props of the Draft.js Editor, but not onPaste. The benefits of onPaste aren’t that clear-cut to me just yet. It would make it possible to use a custom MIME type rather than having to hack the transfer of the content in a data- attribute, but requires importing more Draft.js internals so we can fall back to the Draft.js default paste handling.

Describe the solution you’d like

First draft – to add to the copy/cut handler (potentially also removing all the other custom logic):

e.clipboardData.setData(
    "application/x-draftjs-conductor-fragment",
    serialisedContent,
);

Here is what the new paste handler would look like:

import editOnPaste from "draft-js/lib/editOnPaste";

export const onDraftEditorPaste = (
    editor: Editor,
    e: SyntheticClipboardEvent<>,
  ) => {
    const editorState = editor._latestEditorState;
    const draftEditorPaste = e.clipboardData.getData(
      "application/x-draftjs-conductor-fragment",
    );
    if (draftEditorPaste) {
      let rawContent;
      try {
        // If JSON parsing fails, leave paste handling to Draft.js.
        // There is no reason for this to happen, unless the clipboard was altered somehow.
        // $FlowFixMe
        rawContent = JSON.parse(draftEditorPaste);
      } catch (error) {
        return;
      }
      console.log(rawContent);
  
      const fragment = convertFromRaw(rawContent).getBlockMap();
  
      const content = Modifier.replaceWithFragment(
        editorState.getCurrentContent(),
        editorState.getSelection(),
        fragment,
      );
      e.preventDefault();
      editor.update(EditorState.push(editorState, content, "insert-fragment"));
      return;
    }
    console.log("here?");
    editOnPaste(editor, e);
  };

Describe alternatives you’ve considered

Keep on using handlePastedText.

Additional context

One of the reasons I haven’t done this yet is that it feels like a much bigger departure from the Draft.js 0.10 implementation than the copy/cut listeners are – ideally we’d only change this implementation as part of a breaking change to remove support for Draft.js 0.10, in a future major release.

• facebookarchive/draft-js@d09ef3e
• Feature requests/discussion: Expose more handlers for clipboard events facebookarchive/draft-js#823
• Improve control of content onCopy facebookarchive/draft-js#721
• Transfer selected content via HTML clipboard on copy-paste between editors facebookarchive/draft-js#1784