JSFiddle - React, Tailwind, and code Playground

by Comandeer

HTML

<p>Small demo for IE 11</p>
<div id="pastebin" contenteditable="true"></div>
<p><a href="http://dev.ckeditor.com/raw-attachment/ticket/13924/test.docx" target="_blank">Download test document</a></p>
<div id="editor" contenteditable="true"></div>

<hr>

<ol>
	<li>Open attached 27 page document and paste it into <code>[contenteditable]</code> element.</li>
	<li>Start typing immediately after paste. Document is being still processed so first characters my not show up but later on you can type without problems</li>
	<li>Press <kbd>Ctrl+A</kbd> and <kbd>Backspace</kbd> (you can press <kbd>Delete</kbd> and <kbd>Backspace</kbd> few times – it doesn't matter).</li>
	<li>Paste text again and, after the text shows up, start typing.</li>
</ol>
<p><b>Expected result:</b> Typing speed should be normal.</p>
<p><b>Actual result: </b> Typing is very slow even after few minutes.</p>

CSS

#editor {
		height: 200px;
		overflow: auto;
		border: 1px orange solid;
	}
	#pastebin {
		height: 0;
		width: 0;
		overflow: hidden;
	}

JavaScript

var editor = document.getElementById( 'editor'),
		pastebin = document.getElementById( 'pastebin' );

	editor.addEventListener( 'beforepaste', function( e ) {
		pastebin.focus();

		setTimeout( function() {
			editor.focus();
			var documentFragment = document.createRange().createContextualFragment( pastebin.innerHTML ),
				range = window.getSelection().getRangeAt( 0 );

			range.insertNode( documentFragment );
			range.collapse( false );

			window.getSelection().removeAllRanges();
			window.getSelection().addRange( range );
      pastebin.innerHTML = '';
		} );
	} );