Fix element id is not escaped properly in IE

CHANGES.md

@@ -4,6 +4,9 @@ CKEditor 4 Changelog
 ## CKEditor 4.16.2
 
 Fixed Issues:
+* [#4666](/~https://github.com/ckeditor/ckeditor4/pull/4666): [IE] Introduce CSS.escape polyfill. Thanks to [limingli0707](/~https://github.com/limingli0707)!
+	* [#681](/~https://github.com/ckeditor/ckeditor4/issues/681): Fixed: Table elements (td, tr, th, ..) with an id that starts with dot (.) causes javascript runtime err.
+	* [#641](/~https://github.com/ckeditor/ckeditor4/issues/641): Fixed: UploadImage Plugin Widgets not working in IE, Opera, Safari, PhantomJS.
 * [#3638](/~https://github.com/ckeditor/ckeditor4/issues/3638): Fixed: Opening the same dialog twice causes it to become hidden under the dialog's page cover.
 * [#4247](/~https://github.com/ckeditor/ckeditor4/issues/4247): Fixed: [Color Button](https://ckeditor.com/cke4/addon/colorbutton)'s incorrect rendering on the first opening.
 
@@ -17,7 +20,7 @@ Fixed Issues:
 * [#4351](/~https://github.com/ckeditor/ckeditor4/issues/4351): Fixed: Incorrect values for RGBA/HSLA colors in [Color Dialog](https://ckeditor.com/cke4/addon/colordialog).
 * [#4509](/~https://github.com/ckeditor/ckeditor4/issues/4509): Fixed: Incorrect handling of drag & drop inside [widgets](https://ckeditor.com/cke4/addon/widget) and nested editables.
 * [#4611](/~https://github.com/ckeditor/ckeditor4/issues/4611): [Android, iOS] Fixed: Incorrect hover styles for buttons in the toolbar on mobile devices.
-* [#4652](/~https://github.com/ckeditor/ckeditor4/issues/4652): Fixed: [Event data](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_eventInfo.html) set to `false` is treated as an event cancellation.
+* [#4652](/~https://github.com/ckeditor/ckeditor4/issues/4652): Fixed: [Event data](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_eventInfo.html) set to `false` is treated as an event cancelation.
 * [#4659](/~https://github.com/ckeditor/ckeditor4/issues/4659): Fixed: [`CKEDITOR.htmlParser`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_htmlParser.html) does not treat `--!>` as a comment end tag correctly.
 
 ## CKEditor 4.16

LICENSE.md

@@ -41,6 +41,7 @@ The following libraries are included in CKEditor under the MIT license (see Appe
 * PicoModal (included in `samples/js/sf.js`) - Copyright (c) 2012 James Frasca.
 * CodeMirror (included in the samples) - Copyright (C) 2014 by Marijn Haverbeke <marijnh@gmail.com> and others.
 * ES6Promise - Copyright (c) 2014 Yehuda Katz, Tom Dale, Stefan Penner and contributors.
+* A polyfill for `CSS.escape` (adopted with modifications in `core/tools.js`), Mathias Bynens, v1.5.1, https://mths.be/cssescape.
 
 Parts of code taken from the following libraries are included in CKEditor under the MIT license (see Appendix D):
 

core/tools.js

@@ -38,6 +38,78 @@
 			} else {
 				return namedEntities[ code ];
 			}
+		},
+		// This is the polyill for the CSS.escape for IE. (#681)
+		// /~https://github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js
+		cssEscapeForIE = function( selector ) {
+			var stringifiedSelector = String( selector ),
+				selectorLength = stringifiedSelector.length,
+				index = -1,
+				codeUnit,
+				result = '',
+				firstCodeUnit = stringifiedSelector.charCodeAt( 0 ),
+				UTF16 = {
+					NULL: 0x0000,
+					START_OF_HEADING: 0x0001,
+					UNIT_SEPARATOR: 0x001F,
+					DELETE: 0x007F,
+					DIGIT_ZERO: 0x0030,
+					DIGIT_NINE: 0x0039,
+					HYPHEN_MINUS: 0x002D,
+					LOW_LINE: 0x005F,
+					START_OF_LATIN_1_SUPPLEMENT: 0x0080,
+					CAPITAL_LETTER_A: 0x0041,
+					CAPITAL_LETTER_Z: 0x005A,
+					SMALL_LETTER_A: 0x0061,
+					SMALL_LETTER_Z: 0x007A
+				};
+
+			// Helper function to check if value is in the range.
+			function isInRange( value, min, max ) {
+				return value >= min && value <= max;
+			}
+
+			while ( ++index < selectorLength ) {
+				codeUnit = stringifiedSelector.charCodeAt( index );
+
+				if ( codeUnit == UTF16.NULL ) {
+					result += '\uFFFD';
+					continue;
+				}
+
+				if ( codeUnit == UTF16.DELETE ||
+					isInRange( codeUnit, UTF16.START_OF_HEADING, UTF16.UNIT_SEPARATOR ) ||
+					( index == 0 && isInRange( codeUnit, UTF16.DIGIT_ZERO, UTF16.DIGIT_NINE ) ) ||
+					( index == 1 && isInRange( codeUnit, UTF16.DIGIT_ZERO, UTF16.DIGIT_NINE ) && firstCodeUnit == UTF16.HYPHEN_MINUS )
+				) {
+					// https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+					result += '\\' + codeUnit.toString( 16 ) + ' ';
+					continue;
+				}
+
+				if ( index == 0 && selectorLength == 1 && codeUnit == UTF16.HYPHEN_MINUS ) {
+					result += '\\' + stringifiedSelector.charAt( index );
+					continue;
+				}
+
+				if (
+					codeUnit >= UTF16.START_OF_LATIN_1_SUPPLEMENT ||
+					codeUnit == UTF16.HYPHEN_MINUS ||
+					codeUnit == UTF16.LOW_LINE ||
+					isInRange( codeUnit, UTF16.DIGIT_ZERO, UTF16.DIGIT_NINE ) ||
+					isInRange( codeUnit, UTF16.CAPITAL_LETTER_A, UTF16.CAPITAL_LETTER_Z ) ||
+					isInRange( codeUnit, UTF16.SMALL_LETTER_A, UTF16.SMALL_LETTER_Z )
+				) {
+					// the character itself
+					result += stringifiedSelector.charAt( index );
+					continue;
+				}
+
+				// Otherwise, the escaped character.
+				// https://drafts.csswg.org/cssom/#escape-a-character
+				result += '\\' + stringifiedSelector.charAt( index );
+			}
+			return result;
 		};
 
 	CKEDITOR.on( 'reset', function() {
@@ -1547,12 +1619,8 @@
 				return CSS.escape( selector );
 			}
 
-			// Simple leading digit escape.
-			if ( !isNaN( parseInt( selector.charAt( 0 ), 10 ) ) ) {
-				return '\\3' + selector.charAt( 0 ) + ' ' + selector.substring( 1, selector.length );
-			}
-
-			return selector;
+			// (#681)
+			return cssEscapeForIE( selector );
 		},
 
 		/**

tests/core/tools.js

@@ -855,6 +855,49 @@
 			assert.areSame( escapedSelector, '\\30 ', 'only-one-number selector' );
 		},
 
+		// (#681)
+		'test escapeCss - escaped colon in the css selector': function() {
+			var selector = 'abc:def',
+				escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+			assert.areSame( escapedSelector, 'abc\\:def', 'The colon character is not escaped in CSS selector.' );
+		},
+
+		// (#681)
+		'test escapeCss - escaped dot in the css selector': function() {
+			var selector = 'abc.def',
+				escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+			assert.areSame( escapedSelector, 'abc\\.def', 'The dot character is not escaped in CSS selector.' );
+		},
+
+		// (#681)
+		'test escapeCss - escaped null in the css selector': function() {
+			var selector = 'a\0',
+				escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+			assert.areSame( escapedSelector, 'a\uFFFD', 'The null character is not escaped in CSS selector.' );
+		},
+
+		// (#681)
+		'test escapeCss - escaped U+0001 to U+001F or U+007F in the css selector': function() {
+			var selector = '\x7F\x01\x02\x1E\x1F',
+				escapedSelector = CKEDITOR.tools.escapeCss( selector );
+
+			assert.areSame( escapedSelector, '\\7f \\1 \\2 \\1e \\1f ', 'Character from U+0001 to U+001F or U+007F is not escaped in CSS selector.' );
+		},
+
+		// (#681)
+		'test escapeCss - escaped U+002D in the css selector': function() {
+			var selectorWithSecondCharIsNumber = '-1a',
+				escapedSelectorWithSecondCharIsNumber = CKEDITOR.tools.escapeCss( selectorWithSecondCharIsNumber ),
+				selectorWithSecondCharIsNotNumber = '-a',
+				escapedSelectorWithSecondCharNotNumber = CKEDITOR.tools.escapeCss( selectorWithSecondCharIsNotNumber );
+
+			assert.areSame( escapedSelectorWithSecondCharIsNumber, '-\\31 a', 'has U+002D in selector and second character and is in the range [0-9]' );
+			assert.areSame( escapedSelectorWithSecondCharNotNumber, '-a', 'has U+002D in selector and second character and is not in the range [0-9]' );
+		},
+
 		'test escapeCss - standard selector': function() {
 			var selector = 'aaa';
 			var escapedSelector = CKEDITOR.tools.escapeCss( selector );

tests/core/tools/manual/escapecss.html

@@ -0,0 +1,58 @@
+<textarea id="editor1">
+	<table border="0" cellpadding="0" cellspacing="0" class="finTable" style="width: 100%; text-indent: 0px; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">
+		<tr style="vertical-align: bottom; background-color: rgb(204, 238, 255);">
+			<td style="font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td id=".lead.D2" style="padding-bottom: 1px; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td colspan="2" id=".amt.D2" style="text-align: center; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-left: 0pt; border-bottom-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid;">
+				<p style="margin: 0pt; text-align: center; font-family: Times New Roman, Times, serif; font-size: 10pt;">
+					<b><b><b>April 2, 2017</b></b></b>
+				</p>
+			</td>
+			<td id=".trail.D2" style="padding-bottom: 1px; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td id=".lead.D3" style="padding-bottom: 1px; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td colspan="2" id=".amt.D3" style="text-align: center; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-left: 0pt; border-bottom-color: rgb(0, 0, 0); border-bottom-width: 1px; border-bottom-style: solid;">
+				<p style="margin: 0pt; text-align: center; font-family: Times New Roman, Times, serif; font-size: 10pt;">
+					<b><b><b>July 3, 2016</b></b></b>
+				</p>
+			</td>
+			<td id=".trail.D3" style="padding-bottom: 1px; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+		</tr>
+		<tr style="vertical-align: bottom; background-color: rgb(255, 255, 255);">
+			<td>&nbsp;</td>
+			<td id=".lead.B2">&nbsp;</td>
+			<td id=".symb.B2">&nbsp;</td>
+			<td id=".amt.B2" style="text-align: center;"><i>(unaudited)</i></td>
+			<td id=".trail.B2">&nbsp;</td>
+			<td id=".lead.B3">&nbsp;</td>
+			<td id=".symb.B3">&nbsp;</td>
+			<td id=".amt.B3">&nbsp;</td>
+			<td id=".trail.B3">&nbsp;</td>
+		</tr>
+
+		<tr style="vertical-align: bottom; background-color: rgb(255, 255, 255);">
+			<td style="font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">
+				<p style="font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-top: 0pt; margin-bottom: 0pt;">Property, plant and equipment, net</p>
+			</td>
+			<td id=".lead.2" style="width: 1%; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td id=".symb.2" style="width: 1%; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td id=".amt.2" style="width: 12%; text-align: right; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-left: 0pt;"><em data-td-fact-id="17716072" style="font-style: normal; font-weight: inherit;">154,668</em></td>
+			<td id=".trail.2" nowrap="true" style="width: 1%; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-left: 0pt;">&nbsp;</td>
+			<td id=".lead.3" style="width: 1%; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td id=".symb.3" style="width: 1%; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt;">&nbsp;</td>
+			<td id=".amt.3" style="width: 12%; text-align: right; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-left: 0pt;"><em data-td-fact-id="17716073" style="font-style: normal; font-weight: inherit;">171,362</em></td>
+			<td id=".trail.3" nowrap="true" style="width: 1%; font-family: &quot;Times New Roman&quot;, Times, serif; font-size: 10pt; margin-left: 0pt;">&nbsp;</td>
+		</tr>
+	</table>
+</textarea>
+
+<script>
+	( function() {
+		if ( !CKEDITOR.env.ie ) {
+			return bender.ignore();
+		}
+
+		CKEDITOR.replace( 'editor1', {
+			allowedContent: true
+		} );
+	} )();
+</script>

tests/core/tools/manual/escapecss.md

@@ -0,0 +1,10 @@
+@bender-tags: 4.16.2, bug, 681
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, tableselection, elementspath
+
+1. Open developer console.
+2. Select the table cell with "April 2, 2017".
+
+**Expected** There are no errors in the console.
+
+**Unexpected** There is Syntax Error in the console pointing to querySelector function.

tests/plugins/uploadwidget/manual/escapecssuploadimage.html

@@ -0,0 +1,11 @@
+<div id="edito,r" name="edito,r" contenteditable="true">
+	<p>Hello World</p>
+</div>
+
+<script>
+	( function() {
+		CKEDITOR.inline( 'edito,r', {
+			uploadUrl: '%BASE_PATH%'
+		} );
+	} )();
+</script>

tests/plugins/uploadwidget/manual/escapecssuploadimage.md

@@ -0,0 +1,13 @@
+@bender-tags: 4.16.2, bug, 641
+@bender-ui: collapsed
+@bender-ckeditor-plugins: image, uploadimage, floatingspace
+@bender-include: _helpers/xhr.js
+
+**Note:** This test use upload mock which will show you *Lena* instead of the real uploaded image.
+
+1. Open developer console.
+2. Drag and drop some image into editor.
+
+**Expected** Image is uploaded and inserted into editor.
+
+**Unexpected** Image is uploaded but not inserted into editor.