Fix paste for ie

plugins/talk-plugin-rich-text/client/components/rte/RTE.js

@@ -116,6 +116,7 @@ class RTE extends React.Component {
     this.forEachButton(b => {
       b.onSelectionChange && b.onSelectionChange();
     });
+    console.log('sel', getSelectionRange());
   };
 
   // Called when Enter was pressed without shift.
@@ -163,9 +164,22 @@ class RTE extends React.Component {
       (e.originalEvent || e).clipboardData || window.clipboardData
     ).getData('Text');
 
-    // insert text manually
-    insertText(text);
-    this.handleChange();
+    // IE does this funny thing to change the selection after the paste
+    // event, remember the range for now.
+    const range = getSelectionRange().cloneRange();
+
+    // Run outside of event loop to fix
+    // selection issues with IE.
+    setTimeout(() => {
+      // Manually delete range, cope with IE.
+      if (!range.collapsed) {
+        range.deleteContents();
+      }
+
+      // insert text manually
+      insertText(text);
+      this.handleChange();
+    });
 
     e.preventDefault();
     return false;

plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js

@@ -139,10 +139,11 @@ export function indexOfChildNode(parent, child) {
  */
 export function insertText(text) {
   const selection = window.getSelection();
-  if (!selection.isCollapsed) {
-    document.execCommand('delete');
-  }
   const range = selection.getRangeAt(0);
+  if (!range.collapsed) {
+    range.deleteContents();
+  }
+  const newRange = document.createRange();
   const offset = range.startOffset;
   const container = range.startContainer;
 
@@ -152,14 +153,16 @@ export function insertText(text) {
       text +
       container.textContent.slice(offset);
     const nextOffset = offset + text.length;
-    range.setStart(container, nextOffset);
-    range.setEnd(container, nextOffset);
+
+    newRange.setStart(container, nextOffset);
+    newRange.setEnd(container, nextOffset);
   } else {
     const textNode = document.createTextNode(text);
     container.insertBefore(textNode, container.childNodes[offset]);
-    range.setStart(textNode, text.length);
-    range.setEnd(textNode, text.length);
+    newRange.setStart(textNode, text.length);
+    newRange.setEnd(textNode, text.length);
   }
+  replaceSelection(newRange);
 }
 
 /**
@@ -168,10 +171,10 @@ export function insertText(text) {
  */
 export function insertNodes(...nodes) {
   const selection = window.getSelection();
-  if (!selection.isCollapsed) {
-    document.execCommand('delete');
-  }
   const range = selection.getRangeAt(0);
+  if (!range.collapsed) {
+    range.deleteContents();
+  }
   const offset = range.startOffset;
   const container = range.startContainer;
   if (container.nodeName === '#text') {