Fix for HTML pasting not working in IE (#882)

* imported babel-polyfill to make examples run in IE

* Fix for HTML pasting not working in IE

* Revert "imported babel-polyfill to make examples run in IE"

This reverts commit a8405075d6a44de8cae8092e3773829b56dadd93.

* Refactored and corrected comments of fix: HTML pasting not working in IE

* Removed handleData and tuned getTransferData call of fix: HTML pasting not working in IE

src/components/content.js

@@ -15,7 +15,8 @@ import findDeepestNode from '../utils/find-deepest-node'
 import getPoint from '../utils/get-point'
 import getTransferData from '../utils/get-transfer-data'
 import setTransferData from '../utils/set-transfer-data'
-import { IS_FIREFOX, IS_MAC } from '../constants/environment'
+import getHtmlFromNativePaste from '../utils/get-html-from-native-paste'
+import { IS_FIREFOX, IS_MAC, IS_IE } from '../constants/environment'
 
 /**
  * Debug.
@@ -701,15 +702,27 @@ class Content extends React.Component {
     if (this.props.readOnly) return
     if (!this.isInEditor(event.target)) return
 
-    event.preventDefault()
     const data = getTransferData(event.clipboardData)
 
     // Attach the `isShift` flag, so that people can use it to trigger "Paste
     // and Match Style" logic.
     data.isShift = !!this.tmp.isShifting
-
     debug('onPaste', { event, data })
-    this.props.onPaste(event, data)
+
+    // COMPAT: In IE 11, only plain text can be retrieved from the event's
+    // `clipboardData`. To get HTML, use the browser's native paste action which
+    // can only be handled synchronously. (2017/06/23)
+    if (IS_IE) {
+      // Do not use `event.preventDefault()` as we need the native paste action.
+      getHtmlFromNativePaste(event.target, (html) => {
+        // If pasted HTML can be retreived, it is added to the `data` object,
+        // setting the `type` to `html`.
+        this.props.onPaste(event, html === undefined ? data : { ...data, html, type: 'html' })
+      })
+    } else {
+      event.preventDefault()
+      this.props.onPaste(event, data)
+    }
   }
 
   /**

src/constants/environment.js

@@ -74,6 +74,7 @@ if (browser) {
 export const IS_CHROME = BROWSER === 'chrome'
 export const IS_FIREFOX = BROWSER === 'firefox'
 export const IS_SAFARI = BROWSER === 'safari'
+export const IS_IE = BROWSER === 'ie'
 
 export const IS_MAC = OS === 'macos'
 export const IS_WINDOWS = OS === 'windows'

src/utils/get-html-from-native-paste.js

@@ -0,0 +1,46 @@
+import { findDOMNode } from 'react-dom'
+
+/**
+ * Get clipboard HTML data by capturing the HTML inserted by the browser's
+ * native paste action. To make this work, `preventDefault()` may not be
+ * called on the `onPaste` event. As this method is asynchronous, a callback
+ * is needed to return the HTML content. This solution was adapted from
+ * http://stackoverflow.com/a/6804718.
+ *
+ * @param {React.Component} component
+ * @param {Function} callback
+ */
+
+function getHtmlFromNativePaste(component, callback) {
+  const el = findDOMNode(component)
+
+  // Clone contentedible element, move out of screen and set focus.
+  const clone = el.cloneNode()
+  clone.setAttribute('class', '')
+  clone.setAttribute('style', 'position: fixed; left: -9999px')
+  el.parentNode.insertBefore(clone, el)
+  clone.focus()
+
+  // Clear call stack to let native paste behaviour occur on cloned element,
+  // then get what was pasted from the DOM and remove cloned element.
+  setTimeout(() => {
+    if (clone.childElementCount > 0) {
+      // If the node contains any child nodes, that is the HTML content.
+      const html = clone.innerHTML
+      clone.parentNode.removeChild(clone)
+
+      callback(html)
+    } else {
+      // Only plain text, no HTML.
+      callback()
+    }
+  }, 0)
+}
+
+/**
+ * Export.
+ *
+ * @type {Function}
+ */
+
+export default getHtmlFromNativePaste

src/utils/get-transfer-data.js

@@ -18,11 +18,11 @@ const FRAGMENT_MATCHER = / data-slate-fragment="([^\s]+)"/
  */
 
 function getTransferData(transfer) {
-  let fragment = transfer.getData(TYPES.FRAGMENT) || null
-  let node = transfer.getData(TYPES.NODE) || null
-  const html = transfer.getData('text/html') || null
-  const rich = transfer.getData('text/rtf') || null
-  let text = transfer.getData('text/plain') || null
+  let fragment = getType(transfer, TYPES.FRAGMENT)
+  let node = getType(transfer, TYPES.NODE)
+  const html = getType(transfer, 'text/html')
+  const rich = getType(transfer, 'text/rtf')
+  let text = getType(transfer, 'text/plain')
   let files
 
   // If there isn't a fragment, but there is HTML, check to see if the HTML is
@@ -122,6 +122,25 @@ function getTransferType(data) {
   return 'unknown'
 }
 
+/**
+ * Get one of types `TYPES.FRAGMENT`, `TYPES.NODE`, `text/html`, `text/rtf` or
+ * `text/plain` from transfers's `data` if possible, otherwise return null.
+ *
+ * @param {Object} transfer
+ * @param {String} type
+ * @return {String}
+ */
+
+function getType(transfer, type) {
+  if (!transfer.types || !transfer.types.length) {
+    // COMPAT: In IE 11, there is no `types` field but `getData('Text')`
+    // is supported`. (2017/06/23)
+    return type === 'text/plain' ? transfer.getData('Text') || null : null
+  }
+
+  return transfer.types.indexOf(type) !== -1 ? transfer.getData(type) || null : null
+}
+
 /**
  * Export.
  *