Add Draft.js copy-paste handling overrides from draftjs-conductor. Fix …

…#147 This makes Draftail always preserve the full content as-is when copy-pasting between editors. See also thibaudcolas/draftjs-conductor#2.
springload · Jun 3, 2018 · d3ee6f0 · d3ee6f0
1 parent da0f470
commit d3ee6f0
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 ## Unreleased
 
+### Added
+
+*   Add Draft.js copy-paste handling overrides from `draftjs-conductor`. This makes Draftail always preserve the full content as-is when copy-pasting between editors. Fix [#147](https://github.com/springload/draftail/issues/147) ([thibaudcolas/draftjs-conductor#2](https://github.com/thibaudcolas/draftjs-conductor/pull/2)).
+
 ## [[v0.17.1]](https://github.com/springload/draftail/releases/tag/v0.17.1)
 
 ### Changed

diff --git a/lib/components/DraftailEditor.js b/lib/components/DraftailEditor.js
@@ -1,7 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Editor, EditorState, RichUtils } from 'draft-js';
-import { ListNestingStyles } from 'draftjs-conductor';
+import {
+    ListNestingStyles,
+    registerCopySource,
+    handleDraftEditorPastedText,
+} from 'draftjs-conductor';
 
 import {
     ENTITY_TYPE,
@@ -48,6 +52,7 @@ class DraftailEditor extends Component {
         this.onTab = this.onTab.bind(this);
         this.handleKeyCommand = this.handleKeyCommand.bind(this);
         this.handleBeforeInput = this.handleBeforeInput.bind(this);
+        this.handlePastedText = this.handlePastedText.bind(this);
 
         this.toggleBlockType = this.toggleBlockType.bind(this);
         this.toggleInlineStyle = this.toggleInlineStyle.bind(this);
@@ -312,6 +317,24 @@ class DraftailEditor extends Component {
         return NOT_HANDLED;
     }
 
+    handlePastedText(text, html, editorState) {
+        const { stripPastedStyles } = this.props;
+
+        // Leave paste handling to Draft.js when stripping styles is desirable.
+        if (stripPastedStyles) {
+            return false;
+        }
+
+        const pastedState = handleDraftEditorPastedText(html, editorState);
+
+        if (pastedState) {
+            this.onChange(pastedState);
+            return true;
+        }
+
+        return false;
+    }
+
     toggleBlockType(blockType) {
         const { editorState } = this.state;
         this.onChange(RichUtils.toggleBlockType(editorState, blockType));
@@ -528,6 +551,14 @@ class DraftailEditor extends Component {
         return null;
     }
 
+    componentDidMount() {
+        this.copySource = registerCopySource(this.editorRef);
+    }
+
+    componentWillUnmount() {
+        this.copySource.unregister();
+    }
+
     render() {
         const {
             placeholder,
@@ -609,6 +640,7 @@ class DraftailEditor extends Component {
                     )}
                     handleKeyCommand={this.handleKeyCommand}
                     handleBeforeInput={this.handleBeforeInput}
+                    handlePastedText={this.handlePastedText}
                     onFocus={this.onFocus}
                     onBlur={this.onBlur}
                     onTab={this.onTab}