Merge branch 't/12157'

CHANGES.md

@@ -5,6 +5,7 @@ CKEditor 4 Changelog
 
 Fixed Issues:
 
+* [#12157](http://dev.ckeditor.com/ticket/12157): Fixed: Lost text formatting when pressing `tab` when [tabSpaces](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-tabSpaces) config option was greater than zero.
 * [#12777](http://dev.ckeditor.com/ticket/12777): Fixed: The `table-layout` CSS property should be reset by skins. Thanks to [vita10gy](https://github.com/vita10gy)!
 * [#12747](http://dev.ckeditor.com/ticket/12747): [IE8-10] Fixed: Opening a drop-down for a specific selection when editor is maximized results in incorrect drop-down panel position.
 * [#12735](http://dev.ckeditor.com/ticket/12735): Fixed: [`Config.fillEmptyBlocks`](http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-fillEmptyBlocks) should only apply when outputting data.

plugins/tab/plugin.js

@@ -93,9 +93,9 @@
 
 			if ( tabText ) {
 				editor.on( 'key', function( ev ) {
-					// TAB
+					// TAB.
 					if ( ev.data.keyCode == 9 ) {
-						editor.insertHtml( tabText );
+						editor.insertText( tabText );
 						ev.cancel();
 					}
 				} );

tests/plugins/tab/manual/tabpreservesstyles.html

@@ -0,0 +1,9 @@
+<textarea id="editor1">
+	<p><strong>Foobar</strong></p>
+</textarea>
+
+<script>
+	CKEDITOR.replace( 'editor1', {
+		tabSpaces: 4
+	} );
+</script>

tests/plugins/tab/manual/tabpreservesstyles.md

@@ -0,0 +1,9 @@
+@bender-tags: 4.4.7, tc
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, tab, basicstyles, toolbar
+
+1. Place caret after "Foo".
+2. Press the Tab key to insert spaces.
+	* Expected: the Bold button should be "on".
+3. Type a word.
+	* Expected: the word should be bolded.

tests/plugins/tab/tab.js

@@ -5,19 +5,30 @@
 
 	bender.editor = {
 		config: {
-			allowedContent: 'p',
+			allowedContent: 'p em',
 			tabSpaces: 3,
 			plugins: 'tab'
 		}
 	};
 
 	bender.test( {
 		'test tabSpaces setting': function() {
-			this.editorBot.setHtmlWithSelection( '<p>foo^bar</p>' );
+			bender.tools.selection.setWithHtml( this.editor, '<p>foo{}bar</p>' );
 
 			this.editor.editable().fire( 'keydown', new CKEDITOR.dom.event( { keyCode: 9 } ) );
 
 			assert.areSame( '<p>foo&nbsp;&nbsp;&nbsp;bar</p>', this.editorBot.getData( true ), '3 spaces were inserted' );
+		},
+
+		// #12157
+		'test tab preserves inline styles': function() {
+			bender.tools.selection.setWithHtml( this.editor, '<p><em>foo{}</em>bar</p>' );
+
+			this.editor.editable().fire( 'keydown', new CKEDITOR.dom.event( { keyCode: 9 } ) );
+			this.editor.insertText( 'x' );
+
+			assert.areSame( '<p><em>foo&nbsp;&nbsp;&nbsp;x</em>bar</p>', this.editorBot.getData( true ),
+				'spaces and text were inserted into the inline element' );
 		}
 	} );