diff --git a/plugins/talk-plugin-rich-text/client/components/rte/RTE.js b/plugins/talk-plugin-rich-text/client/components/rte/RTE.js index 76557cd02..403d1ed02 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/RTE.js +++ b/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; diff --git a/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js b/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js index dc822bb89..200354cd6 100644 --- a/plugins/talk-plugin-rich-text/client/components/rte/lib/dom.js +++ b/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') {