Merge branch 't/14831'

core/selection.js

@@ -4,6 +4,12 @@
  */
 
 ( function() {
+	var isMSSelection = typeof window.getSelection != 'function',
+		nextRev = 1,
+		// #13816
+		fillingCharSequence = CKEDITOR.tools.repeat( '\u200b', 7 ),
+		fillingCharSequenceRegExp = new RegExp( fillingCharSequence + '( )?', 'g' );
+
 	// #### checkSelectionChange : START
 
 	// The selection change check basically saves the element parent tree of
@@ -238,7 +244,7 @@
 	// Creates cke_hidden_sel container and puts real selection there.
 	function hideSelection( editor, ariaLabel ) {
 		var content = ariaLabel || ' ',
-			style = CKEDITOR.env.ie ? 'display:none' : 'position:fixed;top:0;left:-1000px',
+			style = CKEDITOR.env.ie && CKEDITOR.env.version < 14 ? 'display:none' : 'position:fixed;top:0;left:-1000px',
 			hiddenEl = CKEDITOR.dom.element.createFromHtml(
 				'<div data-cke-hidden-sel="1" data-cke-temp="1" style="' + style + '">' + content + '</div>',
 				editor.document );
@@ -621,6 +627,9 @@
 				// the normal behavior on old IEs. (#1659, #7932)
 				if ( doc.$.compatMode != 'BackCompat' ) {
 					if ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) {
+						var textRng,
+							startRng;
+
 						html.on( 'mousedown', function( evt ) {
 							evt = evt.data;
 
@@ -663,11 +672,11 @@
 									evt.$.y < html.$.clientHeight &&
 									evt.$.x < html.$.clientWidth ) {
 								// Start to build the text range.
-								var textRng = body.$.createTextRange();
+								textRng = body.$.createTextRange();
 								moveRangeToPoint( textRng, evt.$.clientX, evt.$.clientY );
 
 								// Records the dragging start of the above text range.
-								var startRng = textRng.duplicate();
+								startRng = textRng.duplicate();
 
 								html.on( 'mousemove', onHover );
 								outerDoc.on( 'mouseup', onSelectEnd );
@@ -1050,9 +1059,6 @@
 	 */
 	CKEDITOR.SELECTION_ELEMENT = 3;
 
-	var isMSSelection = typeof window.getSelection != 'function',
-		nextRev = 1;
-
 	/**
 	 * Manipulates the selection within a DOM element. If the current browser selection
 	 * spans outside of the element, an empty selection object is returned.
@@ -1153,10 +1159,6 @@
 	var styleObjectElements = { img: 1, hr: 1, li: 1, table: 1, tr: 1, td: 1, th: 1, embed: 1, object: 1, ol: 1, ul: 1,
 			a: 1, input: 1, form: 1, select: 1, textarea: 1, button: 1, fieldset: 1, thead: 1, tfoot: 1 };
 
-	// #13816
-	var fillingCharSequence = CKEDITOR.tools.repeat( '\u200b', 7 ),
-		fillingCharSequenceRegExp = new RegExp( fillingCharSequence + '( )?', 'g' );
-
 	CKEDITOR.tools.extend( CKEDITOR.dom.selection, {
 		_removeFillingCharSequenceString: removeFillingCharSequenceString,
 		_createFillingCharSequenceNode: createFillingCharSequenceNode,

plugins/wysiwygarea/plugin.js

@@ -9,6 +9,8 @@
  */
 
 ( function() {
+	var framedWysiwyg;
+
 	CKEDITOR.plugins.add( 'wysiwygarea', {
 		init: function( editor ) {
 			if ( editor.config.fullPage ) {
@@ -289,10 +291,13 @@
 
 			// 2. On keyup remove all elements that were not marked
 			// as non-superfluous (which means they must have had appeared in the meantime).
+			// Also we should preserve all temporary elements inserted by editor – otherwise we'd likely
+			// leak fake selection's content into editable due to removing hidden selection container (#14831).
 			editable.attachListener( editable, 'keyup', function() {
 				var elements = doc.getElementsByTag( tagName );
 				if ( lockRetain ) {
-					if ( elements.count() == 1 && !elements.getItem( 0 ).getCustomData( 'retain' ) ) {
+					if ( elements.count() == 1 && !elements.getItem( 0 ).getCustomData( 'retain' ) &&
+						!elements.getItem( 0 ).hasAttribute( 'data-cke-temp' ) ) {
 						elements.getItem( 0 ).remove( 1 );
 					}
 					lockRetain = false;
@@ -301,7 +306,7 @@
 		}
 	}
 
-	var framedWysiwyg = CKEDITOR.tools.createClass( {
+	framedWysiwyg = CKEDITOR.tools.createClass( {
 		$: function() {
 			this.base.apply( this, arguments );
 

tests/core/selection/fake.js

@@ -107,9 +107,15 @@ bender.test( {
 	},
 
 	'Reset fake-selection': function() {
-		var editor = this.editor;
+		var editor = this.editor,
+			inputHtml = '<p>{foo <span id="bar">bar</span>}</p>';
 
-		bender.tools.setHtmlWithSelection( editor, '<p>[foo <span id="bar">bar</span>]</p>' );
+		// Edge behaves very weird if there's element selection inside paragraph in this test.
+		if ( !CKEDITOR.env.edge || CKEDITOR.env.version < 14 ) {
+			inputHtml = '<p>[foo <span id="bar">bar</span>]</p>';
+		}
+
+		bender.tools.setHtmlWithSelection( editor, inputHtml );
 
 		var span = editor.document.getById( 'bar' ),
 			sel = editor.getSelection();

tests/core/selection/manual/edgefakewysiwygarea.html

@@ -0,0 +1,13 @@
+<p>Editor 1:</p>
+<textarea id="editor1" cols="10" rows="10"><p>[[placeholder]] foo bar</p></textarea>
+
+<p>Editor 2:</p>
+<div id="editor2" contenteditable="true"><p>[[placeholder]] foo bar</p></div>
+
+<script>
+if ( !CKEDITOR.env.edge || CKEDITOR.env.version < 14 ) {
+	bender.ignore();
+}
+CKEDITOR.replace( 'editor1' );
+CKEDITOR.inline( 'editor2' );
+</script>

tests/core/selection/manual/edgefakewysiwygarea.md

@@ -0,0 +1,16 @@
+@bender-tags: selection, fake, widget, 4.5.11, tc, 14831
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, placeholder, basicstyles, toolbar, floatingspace
+
+### ONLY IN EDGE 14+
+
+1. Click the placeholder widget.
+2. Press `Ctrl+B` to bold it.
+
+**Expected results:**
+
+* After pressing `Ctrl+B` widget becomes bold.
+
+**Unexpected results:**
+
+* After pressing `Ctrl+B` "placeholder placeholder widget" is added to the editable and the selection is moved to the end of the new added text.

tests/plugins/wysiwygarea/superfluouselement.js

@@ -176,6 +176,56 @@ bender.test( {
 			} );
 		} );
 		wait();
-	}
+	},
+
+	// #14831
+	'Test not removing [data-cke-temp] <div> when typing': function() {
+		if ( !CKEDITOR.env.edge || CKEDITOR.env.version < 14 ) {
+			assert.ignore();
+		}
+
+		var editor = this.editor;
+
+		editor.setData( '', function() {
+			resume( function() {
+				bender.tools.setHtmlWithSelection( editor, '^' );
+
+				// Expected behaviour:
+				// keydown <- mark divs for retention, disable marking
+				// keydown <- do nothing
+				// ...
+				// keyup <- remove not marked divs, enable marking
+				// keyup <- do nothing
+				// ...
+				editor.editable().fire( 'keydown', new CKEDITOR.dom.event( {
+					keyCode: 75,
+					ctrlKey: false,
+					shiftKey: false
+				} ) );
 
-} );
+				bender.tools.setHtmlWithSelection( editor, '<div data-cke-temp>k^</div>' );
+
+				editor.editable().fire( 'keydown', new CKEDITOR.dom.event( {
+					keyCode: 76,
+					ctrlKey: false,
+					shiftKey: false
+				} ) );
+
+				editor.editable().fire( 'keydown', new CKEDITOR.dom.event( {
+					keyCode: 77,
+					ctrlKey: false,
+					shiftKey: false
+				} ) );
+
+				editor.editable().fire( 'keyup', new CKEDITOR.dom.event( {} ) );
+
+				editor.editable().fire( 'keyup', new CKEDITOR.dom.event( {} ) );
+
+				editor.editable().fire( 'keyup', new CKEDITOR.dom.event( {} ) );
+
+				assert.isInnerHtmlMatching( '<div>k^</div>', bender.tools.getHtmlWithSelection( editor ) );
+			} );
+		} );
+		wait();
+	}
+} );