Fix for double escaping content in nested editables

CHANGES.md

@@ -10,6 +10,10 @@ New features:
 * [#1795](https://github.com/ckeditor/ckeditor4/issues/1795): Colors picked from [Color Dialog](https://ckeditor.com/cke4/addon/colordialog) are now stored in [Color Button](https://ckeditor.com/cke4/addon/colorbutton) palette and can be easily reused.
 * [#3783](https://github.com/ckeditor/ckeditor4/issues/3783): Colors used in the document are now displayed as a part of the [Color Button](https://ckeditor.com/cke4/addon/colorbutton) palette.
 
+Fixed Issues:
+
+* [#4060](https://github.com/ckeditor/ckeditor4/issues/4060): Fixed: Content inside [Widget](https://ckeditor.com/cke4/addon/widget) nested editables is escaped twice.
+
 ## CKEditor 4.14.1
 
 Fixed Issues:

plugins/widget/plugin.js

@@ -1928,11 +1928,19 @@
 			}
 			this._.initialSetData = false;
 
+			// Unescape protected content to prevent double escaping and corruption of content.
+			// This can be done by transforming the content to data format and then back to input HTML (#4060).
+			data = this.editor.dataProcessor.toDataFormat( data, {
+				context: this.getName(),
+				filter: this.filter,
+				enterMode: this.enterMode
+			} );
 			data = this.editor.dataProcessor.toHtml( data, {
 				context: this.getName(),
 				filter: this.filter,
 				enterMode: this.enterMode
 			} );
+
 			this.setHtml( data );
 
 			this.editor.widgets.initOnAll( this );

tests/plugins/widget/manual/nestedprotected.html

@@ -0,0 +1,68 @@
+<p>
+	<button id="check">Check source protection</button>
+</p>
+<p id="result" style="color: white;"></p>
+<div id="editor">
+	<div class="testwidget">
+		<div class="content">
+			<p>CKEditor rulez</p>
+			<script src="data:text/javascript,''"></script>
+		</div>
+	</div>
+</div>
+
+<script>
+CKEDITOR.plugins.add( 'testwidget', {
+	requires: 'widget',
+
+	init: function( editor ) {
+		editor.widgets.add( 'testwidget', {
+
+			template: '<div class="testwidget">' +
+				  '<div class="content"></div>' +
+				'</div>',
+
+			editables: {
+				content: {
+					selector: '.content',
+					allowedContent: 'p;script[src]'
+				}
+			},
+
+			allowedContent:
+				'div(!testwidget); div(!content);',
+
+			requiredContent: 'div(testwidget);',
+
+			upcast: function( element ) {
+				return element.name == 'div' && element.hasClass( 'testwidget' );
+			}
+		} );
+	},
+} );
+
+CKEDITOR.replace( 'editor', {
+	extraPlugins: 'testwidget',
+	extraAllowedContent: 'div(testwidget,content);script[src]',
+	on: {
+		instanceReady: function( evt ) {
+			var editor = evt.editor,
+				button = CKEDITOR.document.getById( 'check' ),
+				result = CKEDITOR.document.getById( 'result' ),
+				protectedRegex = /<!--{cke_protected}.+?-->/,
+				unprotectedRegex = /<script src="data:text\/javascript,''"><\/script>/;
+
+			button.on( 'click', function() {
+				var editable = editor.editable(),
+					isWysiwyg = editor.mode === 'wysiwyg',
+					html = isWysiwyg ? editable.getHtml() : editable.getValue(),
+					modeRegex = isWysiwyg ? protectedRegex : unprotectedRegex,
+					isOk = modeRegex.test( html );
+
+				result.setHtml( ( isOk ? 'Ok' : 'Not ok' ) + ' (editor mode: ' + editor.mode + ')' );
+				result.setStyle( 'background-color', isOk ? 'green' : 'red' );
+			} );
+		}
+	}
+} );
+</script>

tests/plugins/widget/manual/nestedprotected.md

@@ -0,0 +1,15 @@
+@bender-tags: 4.15.0, bug, 4060
+@bender-ui: collapsed
+@bender-ckeditor-plugins: widget, wysiwygarea, toolbar, sourcearea, htmlwriter
+
+1. Press "Check source protection" button and inspect the result below the button.
+
+	### Expected
+
+	There is "Ok" text on green background.
+
+	### Unexpected
+
+	There is "Not ok" text on red background.
+2. Switch to source editing mode and repeat step 1.
+3. Repeat steps 1-2 several times.

tests/plugins/widget/manual/nestedprotectedcomplex.html

@@ -0,0 +1,144 @@
+<p>
+	<button id="check">Check source protection</button>
+</p>
+<p id="result" style="color: white;"></p>
+<div id="editor">
+	<h2>First widget</h2>
+	<div class="testwidget">
+		<div class="header">
+			<p>I have a <strong>very important</strong> message</p>
+		</div>
+		<div class="content">
+			<div class="testwidget">
+				<div class="header">
+					<p>Yeah, it's very important</p>
+				</div>
+				<div class="content">
+					<p>CKEditor rulez</p>
+					<script src="data:text/javascript,''"></script>
+				</div>
+				<div class="footer">
+					<p>As you, it was really <strong>very important</strong> one.</p>
+				</div>
+			</div>
+		</div>
+		<div class="footer">
+			<p>End of the message</p>
+		</div>
+	</div>
+	<h2>Second widget</h2>
+	<div class="testwidget">
+		<div class="header">
+			<p>I have a <strong>very important</strong> message</p>
+		</div>
+		<div class="content">
+			<div class="testwidget">
+				<div class="header">
+					<p>Yeah, it's very important</p>
+				</div>
+				<div class="content">
+					<p>CKEditor rulez</p>
+					<script src="data:text/javascript,''"></script>
+				</div>
+				<div class="footer">
+					<p>As you, it was really <strong>very important</strong> one.</p>
+				</div>
+			</div>
+		</div>
+		<div class="footer">
+			<p>End of the message</p>
+		</div>
+	</div>
+	<h2>Third widget</h2>
+	<div class="testwidget">
+		<div class="header">
+			<p>I have a <strong>very important</strong> message</p>
+		</div>
+		<div class="content">
+			<div class="testwidget">
+				<div class="header">
+					<p>Yeah, it's very important</p>
+				</div>
+				<div class="content">
+					<p>CKEditor rulez</p>
+					<script src="data:text/javascript,''"></script>
+				</div>
+				<div class="footer">
+					<p>As you, it was really <strong>very important</strong> one.</p>
+				</div>
+			</div>
+		</div>
+		<div class="footer">
+			<p>End of the message</p>
+		</div>
+	</div>
+</div>
+
+<script>
+CKEDITOR.plugins.add( 'testwidget', {
+	requires: 'widget',
+
+	init: function( editor ) {
+		editor.widgets.add( 'testwidget', {
+
+			template: '<div class="testwidget">' +
+					'<div class="header"></div>' +
+					'<div class="content"></div>' +
+					'<div class="footer"></div>' +
+				'</div>',
+
+			editables: {
+				header: {
+					selector: '.header',
+					allowedContent: 'p;script[src];div(*);strong'
+				},
+
+				content: {
+					selector: '.content',
+					allowedContent: 'p;script[src];div(*);strong'
+				},
+
+				footer: {
+					selector: '.footer',
+					allowedContent: 'p;script[src];div(*);strong'
+				}
+			},
+
+			allowedContent:
+				'div(!testwidget); div(!content);',
+
+			requiredContent: 'div(testwidget);',
+
+			upcast: function( element ) {
+				return element.name == 'div' && element.hasClass( 'testwidget' );
+			}
+		} );
+	},
+} );
+
+CKEDITOR.replace( 'editor', {
+	extraPlugins: 'testwidget',
+	extraAllowedContent: 'div(testwidget,content,header,footer);script[src];h2;strong',
+	on: {
+		instanceReady: function( evt ) {
+			var editor = evt.editor,
+				button = CKEDITOR.document.getById( 'check' ),
+				result = CKEDITOR.document.getById( 'result' ),
+				protectedRegex = /<!--{cke_protected}.+?-->/g,
+				unprotectedRegex = /<script src="data:text\/javascript,''"><\/script>/g;
+
+			button.on( 'click', function() {
+				var editable = editor.editable(),
+					isWysiwyg = editor.mode === 'wysiwyg',
+					html = isWysiwyg ? editable.getHtml() : editable.getValue(),
+					modeRegex = isWysiwyg ? protectedRegex : unprotectedRegex,
+					match = html.match( modeRegex ),
+					isOk = match && match.length === 3;
+
+				result.setHtml( ( isOk ? 'Ok' : 'Not ok' ) + ' (editor mode: ' + editor.mode + ')' );
+				result.setStyle( 'background-color', isOk ? 'green' : 'red' );
+			} );
+		}
+	}
+} );
+</script>

tests/plugins/widget/manual/nestedprotectedcomplex.md

@@ -0,0 +1,15 @@
+@bender-tags: 4.15.0, bug, 4060
+@bender-ui: collapsed
+@bender-ckeditor-plugins: widget, wysiwygarea, toolbar, sourcearea, htmlwriter
+
+1. Press "Check source protection" button and inspect the result below the button.
+
+	### Expected
+
+	There is "Ok" text on green background.
+
+	### Unexpected
+
+	There is "Not ok" text on red background.
+2. Switch to source editing mode and repeat step 1.
+3. Repeat steps 1-2 several times.

tests/plugins/widget/nestededitables.js

@@ -1678,6 +1678,37 @@
 				// If that code is being executed, it means that everything is OK.
 				assert.pass( 'Editables with numeric ids are handled correctly.' );
 			} );
+		},
+
+		// (#4060)
+		'test nested editables\' content is correctly unescaped': function() {
+			// IE 8 returns wrong editor's data in this test, even if it works correctly in manual one.
+			if ( CKEDITOR.env.ie && CKEDITOR.env.version < 9 ) {
+				assert.ignore();
+			}
+
+			var editor = this.editor,
+				bot = this.editorBot,
+				// String must be concatenated to avoid prematurely closing <script> element.
+				html = '<div data-widget="testprotected"><div class="content"><script>\'use strict\';</' +
+					'script></div></div>';
+
+			editor.widgets.add( 'testprotected', {
+				editables: {
+					foo: {
+						selector: '.content',
+						allowedContent: 'script'
+					}
+				}
+			} );
+
+			bot.setData( html, function() {
+				var editableContent = editor.editable().getHtml(),
+					protectedRegex = /<!--{cke_protected}.+?-->/;
+
+				assert.isTrue( protectedRegex.test( editableContent ), 'Source is protected' );
+				assert.areSame( html, editor.getData(), 'Data is correctly unescaped' );
+			} );
 		}
 	} );
 } )();