Override Draft.js copy-paste to preserve full editor content

README.md

@@ -19,7 +19,7 @@ By default, Draft.js only provides support for [5 list levels](https://github.co
 Instead of manually writing and maintaining the list nesting styles, use this little helper:
 
 ```js
-import { ListNestingStyles, blockDepthStyleFn } from 'draftjs-conductor';
+import { ListNestingStyles, blockDepthStyleFn } from "draftjs-conductor";
 
 <Editor blockStyleFn={blockDepthStyleFn} />
 <ListNestingStyles max={6} />
@@ -32,6 +32,82 @@ Relevant Draft.js issues:
 * [maxDepth param is greater than 4 in RichUtils.onTab – facebook/draft-js#997](https://github.com/facebook/draft-js/issues/997)
 * Still problematic: [Nested list styles above 4 levels are not retained when copy-pasting between Draft instances. – facebook/draft-js#1605 (comment)](https://github.com/facebook/draft-js/pull/1605#pullrequestreview-87340460)
 
+### Idempotent copy-paste between Draft.js editors
+
+The default Draft.js copy-paste handlers lose a lot of the formatting when copy-pasting between Draft.js editors 😕. While this might be ok for some use cases, some sites will use multiple editors on the same page, and need them to reliably support copy-paste.
+
+Here is a little override for the Draft.js copy-paste that makes it _just work_:
+
+```js
+import {
+  registerCopySource,
+  handleDraftEditorPastedText,
+} from "draftjs-conductor";
+
+class MyEditor extends Component {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      editorState: EditorState.createEmpty(),
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.handlePastedText = this.handlePastedText.bind(this);
+  }
+
+  componentDidMount() {
+    this.copySource = registerCopySource(this.editorRef);
+  }
+
+  onChange(nextState: EditorState) {
+    this.setState({ editorState: nextState });
+  }
+
+  handlePastedText(text: string, html: ?string, editorState: EditorState) {
+    let newState = handleDraftEditorPastedText(html, editorState);
+
+    if (newState) {
+      this.onChange(newState);
+      return true;
+    }
+
+    return false;
+  }
+
+  componentWillUnmount() {
+    if (this.copySource) {
+      this.copySource.unregister();
+    }
+  }
+
+  render() {
+    const { editorState } = this.state;
+
+    return (
+      <Editor
+        ref={(ref) => {
+          this.editorRef = ref;
+        }}
+        editorState={editorState}
+        onChange={this.onChange}
+        handlePastedText={this.handlePastedText}
+      />
+    );
+  }
+}
+```
+
+`registerCopySource` will ensure the clipboard contains a full representation of the Draft.js content state on copy, while `handleDraftEditorPastedText` retrieves Draft.js content state from the clipboard. Voilà!
+
+Relevant Draft.js issues:
+
+* [Copy/paste between editors – facebook/draft-js#787](https://github.com/facebook/draft-js/issues/787)
+* [Copy/paste between editors strips soft returns – facebook/draft-js#1154](https://github.com/facebook/draft-js/issues/1154)
+* [Sequential unstyled blocks are merged into the same block on paste – facebook/draft-js#738](https://github.com/facebook/draft-js/issues/738)
+
+Note: IE11 isn’t supported, as it doesn't support storing HTML in the clipboard.
+
 ## Contributing
 
 See anything you like in here? Anything missing? We welcome all support, whether on bug reports, feature requests, code, design, reviews, tests, documentation, and more. Please have a look at our [contribution guidelines](.github/CONTRIBUTING.md).