Merge branch 't/12162'

CHANGES.md

@@ -21,6 +21,7 @@ Fixed Issues:
 * [#12398](http://dev.ckeditor.com/ticket/12398): Fixed: Maximize does not work on instance without a [title](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-title).
 * [#12097](http://dev.ckeditor.com/ticket/12097): Fixed: JAWS not reading number of list options correctly in colors list box.
 * [#12411](http://dev.ckeditor.com/ticket/12411): Fixed: [Page Break](http://ckeditor.com/addon/pagebreak) used directly in the editable breaks the editor.
+* [#12162](http://dev.ckeditor.com/ticket/12162): Fixed: Auto paragraphing and enter key in nested editables.
 
 ## CKEditor 4.4.4
 

core/editable.js

@@ -1099,9 +1099,10 @@
 	// Whether in given context (pathBlock, pathBlockLimit and editor settings)
 	// editor should automatically wrap inline contents with blocks.
 	function shouldAutoParagraph( editor, pathBlock, pathBlockLimit ) {
+		// Check whether pathBlock equals pathBlockLimit to support nested editable (#12162).
 		return editor.config.autoParagraph !== false &&
 			editor.activeEnterMode != CKEDITOR.ENTER_BR &&
-			editor.editable().equals( pathBlockLimit ) && !pathBlock;
+			( editor.editable().equals( pathBlockLimit ) && !pathBlock ) || ( pathBlock && pathBlock.getAttribute( 'contenteditable' ) == 'true' );
 	}
 
 	// Matching an empty paragraph at the end of document.

plugins/enterkey/plugin.js

@@ -4,6 +4,22 @@
  */
 
 ( function() {
+
+	function replaceRangeWithClosestEditableRoot( range ) {
+		var closestEditable = range.startContainer.getAscendant( function( node ) {
+			return node.type == CKEDITOR.NODE_ELEMENT && node.getAttribute( 'contenteditable' ) == 'true';
+		}, true );
+
+		if ( range.root.equals( closestEditable ) ) {
+			return range;
+		} else {
+			var newRange = new CKEDITOR.dom.range( closestEditable );
+
+			newRange.moveToRange( range );
+			return newRange;
+		}
+	}
+
 	CKEDITOR.plugins.add( 'enterkey', {
 		init: function( editor ) {
 			editor.addCommand( 'enter', {
@@ -42,6 +58,10 @@
 			if ( !range )
 				return;
 
+			// When range is in nested editable, we have to replace range with this one,
+			// which have root property set to closest editable, to make auto paragraphing work. (#12162)
+			range = replaceRangeWithClosestEditableRoot( range );
+
 			var doc = range.document;
 
 			var atBlockStart = range.checkStartOfBlock(),

tests/core/config/ignoreEmptyParagraph.js

@@ -1,4 +1,4 @@
-/* bender-tags: editor,unit */
+/* bender-tags: editor,unit,autoparagraphing */
 /* bender-ckeditor-plugins: entities */
 
 bender.test(

tests/core/editable/domfix.js

@@ -1,4 +1,4 @@
-/* bender-tags: editor,unit */
+/* bender-tags: editor,unit,autoparagraphing */
 
 var doc = CKEDITOR.document,
 	tools = bender.tools;

tests/core/editable/domfix2.js

@@ -1,4 +1,4 @@
-/* bender-tags: editor,unit */
+/* bender-tags: editor,unit,autoparagraphing */
 
 var doc = CKEDITOR.document;
 // This group of tests plays upon the framed content.

tests/core/editable/domfixnestededitable.js

@@ -0,0 +1,60 @@
+/* bender-tags: editor,unit,autoparagraphing */
+
+( function () {
+	'use strict';
+
+	var doc = CKEDITOR.document;
+
+	bender.test( {
+		// Initialize the editor instance.
+		'async:init': function() {
+			var that = this;
+
+			bender.tools.setUpEditors( {
+				editor1: {
+					name: 'editor1'
+				}
+			}, function( editors, bots ) {
+				that.editors = editors;
+				that.callback();
+			} );
+		},
+
+		// (#12162)
+		'test autoparagraphing in nested editable': function() {
+			var editor = this.editors.editor1,
+				editable = editor.editable(),
+				expected =
+					'<p>foo@</p>' +
+					'<div contenteditable="false">' +
+						'<div contenteditable="true">' +
+							'<p>^hello@</p>' +
+						'</div>' +
+					'</div>',
+				htmlMatchingOpts = {
+					compareSelection: true,
+					normalizeSelection: true
+				};
+
+			bender.tools.selection.setWithHtml( editor,
+				'<p>f[o]o</p>' +
+				'<div contenteditable="false">' +
+					'<div contenteditable="true">' +
+						'hello' +
+					'</div>' +
+				'</div>' );
+
+			var nestedEditable = editable.findOne( 'div[contenteditable="true"]' ),
+				sel = editor.getSelection(),
+				range = editor.createRange();
+
+			nestedEditable.focus();
+			range.setStart( nestedEditable, 0 );
+			range.setEnd( nestedEditable, 0 );
+			sel.selectRanges( [ range ] );
+
+			assert.isInnerHtmlMatching( expected, bender.tools.selection.getWithHtml( editor ),
+				htmlMatchingOpts, 'Paragraph should be added.' );
+		}
+	} );
+} )();

tests/core/selection/editor.js

@@ -1,4 +1,4 @@
-/* bender-tags: editor,unit */
+/* bender-tags: editor,unit,autoparagraphing */
 
 'use strict';
 

tests/plugins/enter/enterkey.js

@@ -187,6 +187,31 @@
 			assert.areSame( '<p>foo</p><p>bar</p>', bot.getData(), 'main mode was used' );
 		},
 
+		// (#12162)
+		'test enter key directly in nested editable': function() {
+			var editor = this.editors.editorNoAutoParagraph,
+				expected = '<p>foo</p>' +
+				'<div contenteditable="false">' +
+					'<div contenteditable="true">' +
+						'<p>hell@</p>' +
+						'<p>@</p>' +
+					'</div>' +
+				'</div>';
+
+			bender.tools.selection.setWithHtml( editor,
+				'<p>foo</p>' +
+				'<div contenteditable="false">' +
+					'<div contenteditable="true">' +
+						'hell[o]' +
+					'</div>' +
+				'</div>' );
+
+			editor.execCommand( 'enter' );
+
+			assert.isInnerHtmlMatching( expected, editor.editable().getHtml().replace( / data-cke-expando="\d+"/g, '' ),
+				'New paragraphs should be created.' );
+		},
+
 		/*
 		// Commented out until we decide whether we want to block enter key completely and how.
 		'test enter key is completely blocked if neither p nor br are allowed': function() {
@@ -218,7 +243,7 @@
 		'test shift+enter key - end of block, inside inline element followed by bogus br':
 			se( 'editor', '<p><em>foo{}</em><br /></p>', '<p><em>foo<br />^</em><br /></p>' ),
 		'test shift+enter key - end of list item, inside inline element followed by bogus br':
-			se( 'editor', '<ul><li><em>foo{}</em><br /></li></ul>', '<ul><li><em>foo<br />^</em><br /></li></ul>' ),
+			se( 'editor', '<ul><li><em>foo{}</em><br /></li></ul>', '<ul><li><em>foo<br />^</em><br /></li></ul>' )
 	} );
 
 } )();