Merge pull request #4985 from ckeditor/t/4873

Fix: Pasting Outlook email with horizontal line and image

CHANGES.md

@@ -9,6 +9,7 @@ Fixed issues:
 
 * [#547](https://github.com/ckeditor/ckeditor4/issues/547): Fixed: Dragging and dropping elements like images within a table is no longer available.
 * [#4875](https://github.com/ckeditor/ckeditor4/issues/4875): Fixed: Not possible to delete multiple selected lists.
+* [#4873](https://github.com/ckeditor/ckeditor4/issues/4873): Fixed: Pasting content from MS Word and Outlook with horizontal lines prevents images from being uploaded.
 
 API changes:
 

plugins/pastetools/filter/image.js

@@ -300,7 +300,8 @@
 				// WordArt shapes are defined using \defshp control word. Thanks to that
 				// they can be easily filtered.
 				isWordArtShape = currentImage.indexOf( '\\defshp' ) !== -1,
-				isSupportedType = CKEDITOR.tools.array.indexOf( CKEDITOR.pasteFilters.image.supportedImageTypes, imageType ) !== -1;
+				isSupportedType = CKEDITOR.tools.array.indexOf( CKEDITOR.pasteFilters.image.supportedImageTypes, imageType ) !== -1,
+				isHorizontalLine = CKEDITOR.tools.indexOf( currentImage, 'fHorizRule' ) !== -1;
 
 			if ( isDuplicated ) {
 				ret.push( ret[ imageDataIndex ] );
@@ -312,6 +313,11 @@
 				continue;
 			}
 
+			// Continue when the element is a <hr> line to allow paste image with horizontal line. (#4873)
+			if ( isHorizontalLine ) {
+				continue;
+			}
+
 			var newImageData = {
 				id: imageId,
 				hex: isSupportedType ? getImageContent( currentImage ) : null,

tests/plugins/pastefromword/_helpers/easyimage.js

@@ -0,0 +1,7 @@
+/* exported easyImage */
+var easyImage = ( function() {
+	return {
+		CLOUD_SERVICES_UPLOAD_GATEWAY: 'https://33333.cke-cs.com/easyimage/upload/',
+		CLOUD_SERVICES_TOKEN_URL: 'https://33333.cke-cs.com/token/dev/ijrDsqFix838Gh3wGO3F77FSW94BwcLXprJ4APSp3XQ26xsUHTi0jcb1hoBt'
+	};
+} )();

tests/plugins/pastefromword/manual/pasteimagewithhrline.html

@@ -0,0 +1,11 @@
+<textarea name="editor1"></textarea>
+
+<script>
+	( function() {
+		if ( CKEDITOR.env.ie || bender.tools.env.mobile ) {
+			bender.ignore();
+		}
+
+		CKEDITOR.replace( 'editor1' );
+	} )();
+</script>

tests/plugins/pastefromword/manual/pasteimagewithhrline.md

@@ -0,0 +1,19 @@
+@bender-tags: 4.17.2, bug, 4873
+@bender-ui: collapsed
+@bender-ckeditor-plugins:basicstyles, elementspath, horizontalrule, pastefromword, showborders, sourcearea, table, toolbar, wysiwygarea, autogrow, image, undo
+
+1. Open browser's console.
+2. Open [outlook1](_assets/outlook1.msg)
+or [image_with_hrline](_assets/image_with_hrline.docx)
+3. Copy entire content from outlook.
+4. Paste the content in the editor.
+
+**Expected**
+
+* Horizontal line and image was pasted properly.
+* There is no error in console.
+
+**Unxpected**
+
+* Image was not pasted in the editor.
+* There is an error in the browser's console `Error code: pastetools-failed-image-extraction. {rtf: 2, html: 1}`

tests/plugins/pastefromword/manual/pasteimagewithhrlineeasyimage.html

@@ -0,0 +1,18 @@
+<textarea name="editor1"></textarea>
+
+<script>
+	( function() {
+		if ( CKEDITOR.env.ie || bender.tools.env.mobile ) {
+			bender.ignore();
+		}
+
+		bender.tools.ignoreUnsupportedEnvironment( 'easyimage' );
+
+		var config = {
+			cloudServices_uploadUrl: easyImage.CLOUD_SERVICES_UPLOAD_GATEWAY,
+			cloudServices_tokenUrl: easyImage.CLOUD_SERVICES_TOKEN_URL
+		};
+
+		CKEDITOR.replace( 'editor1', config );
+	} )();
+</script>

tests/plugins/pastefromword/manual/pasteimagewithhrlineeasyimage.md

@@ -0,0 +1,20 @@
+@bender-tags: 4.17.2, bug, 4873
+@bender-ui: collapsed
+@bender-ckeditor-plugins:basicstyles, elementspath, horizontalrule, pastefromword, showborders, sourcearea, table, toolbar, wysiwygarea, autogrow, easyimage, undo
+@bender-include: ../_helpers/easyimage.js
+
+1. Open browser's console.
+2. Open [outlook1](_assets/outlook1.msg)
+or [image_with_hrline](_assets/image_with_hrline.docx)
+3. Copy entire content from outlook.
+4. Paste the content in the editor.
+
+**Expected**
+
+* Horizontal line and image was pasted properly.
+* There is no error in console.
+
+**Unxpected**
+
+* Image was not pasted in the editor.
+* There is an error in the browser's console `Error code: pastetools-failed-image-extraction. {rtf: 2, html: 1}`

tests/plugins/pastetools/filter/_fixtures/imagewithhorizontalline.json

@@ -0,0 +1,7 @@
+[
+	{
+		"id": "d536bc7abc246111a601f022af142e66",
+		"hex": "89504e470d0a1a0a0000000d49484452000000940000003808060000001be2d141000000017352474200aece1ce90000000467414d410000b18f0bfc6105000000097048597300000ec300000ec301c76fa8640000115c49444154785eed5b799055d59dfedde5bd7ebd40b3354b23b4411a61400151511cc1349665522a1ab38c0b2ec1542a4b4d397fe49f4ca2666a324b9249303593aa68a2a968959828380346501b945591163ad0204b630b343bf4bebde5def9bedf7df7f5e3f15e773feb652658f7d35f9f7bcf76cf3de73bbfe5dc87d1db177525408002c14ca60102140401a102141401a102141401a102141401a102141401a102141401a102141401a102141401a102141401a102141401a102141401a102141401a102141401a102141479ff7cc5eded12c371c52d2e158945459cb8188621ae8b6eac90186e42dc689f48e97054460303ff1be4ad2bbd8976310d4bc26699449d0eb18cb0d727da1ae2a0862b71a7571b45ec919a06b8b49017a14eae5f2d9d2b7e29a58e23d110f8934860c9d39a832c8e1117132403e3a4dbb2a4fcabdf11fbba79f2d2b647a4cf3a23a692c744bd18feda5e3308c9c4be9c785c1cd794cbca6e9225f37f2145211037c02583bc4c5ea8af4bc6b737cbf8b66332f1fc3119df7256c6b59cef97f367a4f25c8b54b4b5c8d8b61332bef5ac585ddd20480c643a2c7df661e9b19ba42774407a71df631d54e9d6f4907487705dfcb144232893663c312fe519e0af0079fb500998af9e5048e206c44e40622949d8d02e164c9ee94283c11c9a3dd03a3089208629bd9038cc5c1469424cd4314c68b834812d05872c3c053acc08c87429222f42d9ae23c53077b69310cb05395c0362a6841c70f0279c809f140fc3f4d9788025a8867c5b126e088404294d0394a2d774a1684510ca451f092558f2c1012e19e44528075a85ae33c1bf0e08962eea9843e2f0a3bc5aa409fc29803e9298b16443664093699b34416d57db7aad03fcdfa0a5a545d6ad5b2bbf7bfe79796dd54ae9e9e94996e48fbc4d1e979a0b4f30babb4858060de4e29a9ac6630febf22f5b26ff4b6f93144f25f9641a7c687bf6ec91ba1d3be4c3ba3a95eeeeae64496ef474776b1b5f0e1cd89f2c11397bf6acbcf6da2a797dcd1ae9e8e848e67e76e1c0da6cd9bc597efe1f3f934d1b374a63e321d9b973a7f4f632d2fe74c88b50fe527b74ca0d2aaafeda1ef40e0dbddc0bcbfa81fcc13a4fc39bd855afbcf24759855dc5b4a1a101cfced5b787fa3fd7cbabafbe222b57beaa525b5babf96cf7c69f5e970fb66f97ad5bb760721b35ffb38c53a74ec9860deb9558c5c5c572e59557ca9429578885e89cf3d1d7d727e7ce9d9304a2f9a1226f0d450cbc6439c046c986be86cb06e8aa21938a13619aa6a69c80cd9b36e924e402cb36befb6e521b5e8c09132a536521041e9f751c3c88683ba98deeb8f34eb9ff810765e9430f495959996cdbb6559e7feeb72a34894345de84f22d932e7c0e786b821a69ccf3d790e9002d2103d1ed62f81a89bbaabdbd5d8e1fe77143761c3b76544d994f9a7462f17af1adb7eaa4de7fff03326ddab464c96717fbf6ee55edc3cd533db55a37278579fbf6edc37c1d935e6cc25c1b301bf2221449646001e370ce4dc71213d19c99c020926240a885ccb8ad27e6ace320ca237858e9605c8e016d82541d70e4a70b09c8a1f37aa820a1cacbcbf53a168bc9ae5dbb5224cbc4eeddbbb56ce4c89152545474513d6a3a128962dbdea16b26f88caecece9444a3d16409a2572c04cba3492dc9fee9e0b21efb4e07efbbbbba52fd0ce6b7b05fbf3efdc078dc0b76b2a137f94c0adb649a2c7f9c844f9604c6c371fb7599af9a1f12c33ba6b71908799d94b7bef1b2143ff76371ec841425e288fa3031c9324287e6da62a3206ac5a55722e23ef03d492cba515ef8a0467aad53a843825138b80b279924639f6454a55d23f7cd5f214576995798053ffbe94fd4919e3e6386144722525f5faf44f8fe3ffe4022b84f471f16eca7a8cf05befbee7b64cb96cdea434caeaa926f7debdb5ae7cf684fff899379f73d5f9271e3c6693ec109ad0759b77fb05d17d447494989dcfbe5afc898316352ed59f7f62f7c514e9e382175753b74f11ffdfa322532415fefbd6ddba4abab33b5801c7775f534d59299e6f6d0a183f2d65b6f295138361275d8b0e16a9eb8317cb07c2dfcca8f0f1fd67bbf6e79f908f4bb58aaaa2ed7fb37d7add33ecf9c39a3632371264f9eacd716c6619916e6e624829c6ed5fc63c78e9562bce7b0b261f2a57bef9570d8fb64960d7969282e3f4963255c3d47428201f68b03319c98c48d5e31dd3e741e17d7a4464281191303d73cbc74cc3e712ce453a1a50bf20c10d1443d4f7f0d0e7f87cdbd665e4a5d6fdbba55f3d2b103115d17766b4949a95427cd99dfd6475b7b9b1c3d7a544e9e3c7981e621095f7ce10575e68f1e39a224a6b3caf408eea905888ece0e6d4f53d10c79f3cd75da17eb71b138b6d7d7ac465fbf97c3871b95d02ca3b0dea64d1be557fff59f7a4f70f1495286f37ceee9d3a7d59f613923b2d6d67edfa6a9e96359be7cb906157e9f149286759f7de619dd10240fc77efcf8711d8f6fe69a9a9aa4b9b9593e41cabe48267f7e38cec64387d465a0c61a08d9f57a0e4423b69c1d592221fd66674998a79419ebce93f4388811c2c68b4a48c25840db2c92905b05b3381a351cd481bae6a978127e173c0815070be986246256221d1adf3921932ebb4c4d1f277cd7ae9d72e38205292dc59d4b4d4154574fd57a9cac4c427101334122ac4234480796f5274c98209faf592c23478cd0b24d08044cece24c904ca3468dd2a8a913a6871a8841c356909de3ada8a8901af4c3341a8baad62039492c1e5b50fb70c1dfdffebe9280eff277f7dd2f13274e9496f3e76557fd2e68324f53b0ff175f781141073632fa9e7fc30d3277ce5cbd6e0471df8676a3b962543b7acc68b9fefaebf5b99c13b665bd458b6e51cdc8eb8998cbb7307e1289dae8aebb96c8f9f3e7e0ac0f93d000da89c88b50a3afbb55dceaaba03d3cfdc1f4627879fc4b13668e1a2b46a458eebbfef7a0927726ee2d5bb6b60489664ac82c93b05dec650d002eb24e38c2ded9b3e7c83bef6cc0cb9fd788ce27544b6babee542e2a279b0b35d4b316eee603070e28d926c12c2c5dba544a4bfbcdf057bff6b5143199b21e539a89871f7954c9cb3c12fdbdf7dfd3b2d2d252b90f8e7fba497d70e943f2cba7976bd0b07fff4720d72732b662ac9a4db6193e7c782a5060fb0995956a8e089e25f5f4786678c14d37c9edb77f2155366efc7825c5aa952bf5bd79dec4674fadae562dd94fa84552827e096e948d983bceab8132bef7ec3973b46c300c4d052471246acbfff48c9655dda3201529599976bdaadb2f1f25ffdd39529a7a2d7113bd52dab14fcadbf7c8f0f68f6478c71e19d1de80fb4cd903d92be51d0d52d4453f60f0f38f74ad72cdbc793ad99c389e29112c5fb776ad4e0eb50b8f06388194f4b6b9f01ec267ee6ed6bdedb6db2e20134192fa8bc73a5c7cca8c197f930a16784ff343279975b898e96422780ef4f99a1a1d3beb7fd2f4896a3e2e32db90d80ce569b609ff991c1b351bdf8f75172cb8295546f03d67cd9aa51a897d6be4068d3d14f8f3e3a743415e84da78b253beb93b268fd59bf2e887217974a7adf2f5644a59b603f71f5af20d5898bfff20211b9a11f1444f8b7de0bb12d90f27f2a3a512517910f70f204d93fd0f4a3124b26f9998479e069f729f29f9e0e4fb2f4c133375ea54cd6b6c3c2c6d6d6daaad9a9b8fe9c44e9f3e43772baf8772cec47e4fc16f614ae77b3c76fb40481fcb988a319afaa09fc59d4f6492c947c5980a2503fbe0c2d3e1beeedaeb74bc24c39ad5abf554bbf6edb75327f909f4c92f046c1741fdb2a496498765d93a7ed6613f24df5f0a79112a81e8accf2d427c6663f760e2e06cf39705ea786bea4a1ceb14b7c3d2178e48d4c6e4a889c34463b22d2b867670d64d3883067b73c4822f65a3bd4d87dc8489c4b565610719dc4583ef0c4e3e1792e0c45f7df56ccd630475b8b1513fadd0bc316fdeb5d76a3d2e6c5f5fbfd39d0b9cf8cee4b915c544f433187c52651296791482e3cc86fee798baf8bca609bbfb9e7b60f2ca359fefb27e7d2d1cf5e7d4ac33dca7d662dfda0e1a331bfcbefd31fca59017a1b0e61246b46fe125128cd6b08e8cec1c177e0c528e95bf42b0e158f31c2a86721d3eca850e379c78138eb6a9fe132499b08ebe2848865786bf6e881de7e2b1427eb872fa7455ef04a3a66d5bb7e9ae9c397396fa2104cd5424d21f6ee7021795c701849e2725cdcda781eff0125d9d1e0132d10193481253fc77e058af85967afcf1c7f5349bbe19418779edda37b4df91d0cc244b0fc896ed1b24fbf33553fa380602ebf824cc0779118a9a2661d8d02b580c3702d2f0e729fdc23326c7e4ce44b78ce2a089a8b5f4da801f42871bd724a372c9c1a0292e7623fa3240367d0634556c706590159c0846784c19319d3b77561765cedcb9794f0e3169d2644db9185b366fd285490789c1b2c15001223048e018f6ecd9ad044d07fb60744ab0ce1530dd84df37838ef9f36f50879aa690e3e031029fcff321b6e101a47f06958e33674ecb89a4733f69d224ed6b30f80464ffd9c89f0b7911ca3be966e79c54100424e14f79fb853fdfe5f914fd00744dfee09e4df8db29d54d2090cd8ef46c0a1528d04c14d305d1d83dfed0580e05d94872c5155375d259c649a1ff70f9e555c9d28191397974f4192e33bfaeae4e36ac5fafa686e002befbce3baa2d8881267ef4e8d15289909fe3a15fc7109e8e3adb306f7d6dad1c4434497c6eca14a9aaaa52d2bdf2c73f28717c504bb23e370c0f73e913deb8e04635e324c19a35aba5bede3b6f221825ae786985de7363dd7cf342cd4f47b671b32e9fc177e4991ac1887030e445a87ea861424ae395212083a15a4979c1d16a0bdeeb012753cdba98080afd070d84372183211ba168a6782a9c3e89c5c525c9d27e64b6e57d661e23b5bb962c51edc2888a5fe79f7af209f9d1534fca9348f93b224e7a3ab28d89e35872d7128d3489bd0d0dea60b39f277ef803a9ad7d5b4941e2dd71c79dda070f11f7eedd2bcb7ff173f9971fffb3fcfbbffdabfce6d96794d0dc307f8bf7623d9e75f14c8bc4a08fb5e2a597e49f7ef4943cf9c40fe5e9a79723386955f3bd70e1223d6ec844e67839560603ec8f637af9e515dadfb3cffc3af5592917f22614a63c990e0025122fd87dae9a7ea54c193a18d5913cfe41a50f5edfbc70a19631a2ba7af6ec6489079e82736773f1468c1891cc152901e998473f850be063e6cc99f2d0c30fabd6e0b104279c6425c918f9959679470965a565eafb502245177efa21c620ffb1c7be2173e6ccd12ffa1c03b50afbe3bb5c73cd3c5986723f9aa4833d71e265fa4c92991a8bcfe4b9d0c38f3c02ad7bb9d6e3fbd62c5eacc42761790441708cc3860d934a908807a58b6eb9e58279e227197e0ee27879de948e59575da5ae039fed8f93f5d141b24676e4f52def370de7e41f1a42306998503c9f7a2a13d45c3473346145f1a8fc6496c8b2cfb589595723452eec385bd1b4e51a1834140fe07b4b6bc49afdb21876ee7ff5e27f1e615fd98e01fc724e4826b2b5e5a451b833d926738cdcad3c0fe2398e5f8724617bd6f5db1324094d463670a15b5b5bf55c8af549dee1d8145cfccc36e9cf24c2d04c247db6772248bc3330914c39a6221090a4c9569f757c73e7bf433a384e9a5b7e07e5b8b841f94d6f207c0a4285618c3c42914f9983800ba7847249a81809e52aa12c102a9c4e286a2fb58919c8835001fefa907d0be5808be8cc35f9c197dfe248064601dcd19ef077e230fca014fc1f251549433dc66bd4e64f834942bd673e09489094106d43c79ca4d482009718f22294c9109f67499438750c9df07e51879a1a4bef511f04e3b73b1f4a340a9d768d143d4a79ff40c1fbd2972093944c9ff2dc20c0ff2bf22294edc6a5c489d2e0a9849c988413174a11cac3cc7712529ae8154b55922171b70436b9541ca348a290980947d3488a5586fb329009cea453843a251297c0d45d8ac8cb87da75a24d5e3fd22509930799802a9f7e0d447e7aff6c0a7e9084e084c7e4cbd3ca65ca084b7a9a9e8556eb807347dd64a15ef6c792a80e3f7114cd9470e5ed9ed60b70c9202f420508301882ed1fa0a0080815a0a0080815a0a0080815a0a0080815a0a0080815a0a0080815a0a0080815a0a0080815a0a0080815a0a0080815a08010f95fd4501034a0fa4c750000000049454e44ae426082",
+		"type": "image/png"
+	}
+]