feat(copy-paste): add wip internal clipboard reuse for copy-paste

See springload/draftail#148.

src/demo/components/DemoEditor.js

@@ -14,6 +14,11 @@ import type { DraftBlockType } from "draft-js/lib/DraftBlockType.js.flow";
 import type { DraftEntityType } from "draft-js/lib/DraftEntityType.js.flow";
 
 import { ListNestingStyles, blockDepthStyleFn } from "../../lib/index";
+import {
+  registerCopySource,
+  unregisterCopySource,
+  handleDraftEditorPastedText,
+} from "../../lib/copypaste";
 
 import SentryBoundary from "./SentryBoundary";
 import Highlight from "./Highlight";
@@ -98,6 +103,8 @@ type State = {
  * Demo editor.
  */
 class DemoEditor extends Component<Props, State> {
+  editorRef: ?Object;
+
   constructor(props: Props) {
     super(props);
     const { extended } = props;
@@ -130,6 +137,15 @@ class DemoEditor extends Component<Props, State> {
     (this: any).toggleBlock = this.toggleBlock.bind(this);
     (this: any).toggleEntity = this.toggleEntity.bind(this);
     (this: any).blockRenderer = this.blockRenderer.bind(this);
+    (this: any).handlePastedText = this.handlePastedText.bind(this);
+  }
+
+  componentDidMount() {
+    registerCopySource(this.editorRef);
+  }
+
+  componentWillUnmount() {
+    unregisterCopySource(this.editorRef);
   }
 
   onChange(nextState: EditorState) {
@@ -194,6 +210,13 @@ class DemoEditor extends Component<Props, State> {
     }
 
     const entityKey = block.getEntityAt(0);
+
+    if (!entityKey) {
+      return {
+        editable: false,
+      };
+    }
+
     const entity = content.getEntity(entityKey);
 
     if (entity.getType() === "HORIZONTAL_RULE") {
@@ -209,6 +232,22 @@ class DemoEditor extends Component<Props, State> {
     };
   }
 
+  handlePastedText(text: string, html: ?string, editorState: EditorState) {
+    let newState = handleDraftEditorPastedText(
+      this.editorRef,
+      text,
+      html,
+      editorState,
+    );
+
+    if (newState) {
+      this.onChange(newState);
+      return true;
+    }
+
+    return false;
+  }
+
   onTab(event: SyntheticKeyboardEvent<>) {
     const { editorState } = this.state;
     const newState = RichUtils.onTab(event, editorState, MAX_LIST_NESTING);
@@ -252,12 +291,16 @@ class DemoEditor extends Component<Props, State> {
             ))}
           </div>
           <Editor
+            ref={(ref) => {
+              this.editorRef = ref;
+            }}
             editorState={editorState}
             onChange={this.onChange}
             stripPastedStyles={false}
             blockRendererFn={this.blockRenderer}
             blockStyleFn={blockDepthStyleFn}
             onTab={this.onTab}
+            handlePastedText={this.handlePastedText}
           />
         </SentryBoundary>
         <ListNestingStyles max={MAX_LIST_NESTING} />

src/lib/copypaste.js

@@ -0,0 +1,42 @@
+// @flow
+import type { ElementRef } from "react";
+import { Editor, EditorState, Modifier } from "draft-js";
+
+const sourceEditors = {};
+
+export const registerCopySource = (ref: ElementRef<Editor>) => {
+  sourceEditors[ref.getEditorKey()] = ref;
+};
+
+export const unregisterCopySource = (ref: ElementRef<Editor>) => {
+  delete sourceEditors[ref.getEditorKey()];
+};
+
+export const handleDraftEditorPastedText = (
+  ref: ElementRef<Editor>,
+  text: string,
+  html: ?string,
+  editorState: EditorState,
+) => {
+  const isEditor = html && html.includes("data-editor");
+  const sourceKey = html && isEditor ? /data-editor="(\w+)"/.exec(html)[1] : "";
+  const editorKey = ref.getEditorKey();
+
+  if (!sourceKey || sourceKey === editorKey || !sourceEditors[sourceKey]) {
+    return false;
+  }
+
+  const clipboard = sourceEditors[sourceKey].getClipboard();
+
+  // TODO Potentially layer this separately.
+  if (clipboard) {
+    const newContent = Modifier.replaceWithFragment(
+      editorState.getCurrentContent(),
+      editorState.getSelection(),
+      clipboard,
+    );
+    return EditorState.push(editorState, newContent, "insert-fragment");
+  }
+
+  return false;
+};