TinyMCE emoji: catch the inserting of emoji chars with the Windows 8 onscreen keyboard and replace if needed.

Fixes #31627.
Built from https://develop.svn.wordpress.org/trunk@31922


git-svn-id: http://core.svn.wordpress.org/trunk@31901 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/js/tinymce/plugins/wpemoji/plugin.js

@@ -1,7 +1,18 @@
 ( function( tinymce, wp, twemoji ) {
 	tinymce.PluginManager.add( 'wpemoji', function( editor ) {
-		var typing,
+		var typing, match,
-			isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
+			env = tinymce.Env,
+			ua = window.navigator.userAgent,
+			isWin = ua.indexOf( 'Windows' ) > -1,
+			isWin8 = ( function() {
+				var match = ua.match( /Windows NT 6\.(\d)/ );
+
+				if ( match && match[1] > 1 ) {
+					return true;
+				}
+
+				return false;
+			}());
 
 		if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
 			return;
@@ -19,31 +30,51 @@
 			tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
 		}
 
-		editor.on( 'keydown keyup', function( event ) {
+		if ( isWin8 ) {
-			typing = event.type === 'keydown';
+			// Windows 8+ emoji can be "typed" with the onscreen keyboard.
-		} );
+			// That triggers the normal keyboard events, but not the 'input' event.
+			// Thankfully it sets keyCode 231 when the onscreen keyboard inserts any emoji.
+			editor.on( 'keyup', function( event ) {
+				var node;
 
-		editor.on( 'input', function() {
+				if ( event.keyCode === 231 ) {
-			if ( typing ) {
+					node = editor.selection.getNode();
-				return;
-			}
 
-			var bookmark,
+					if ( twemoji.test( node.textContent || node.innerText ) ) {
-				selection = editor.selection,
+						replaceEmoji( node );
-				node = selection.getNode();
+					}
+				}
+			} );
+		} else if ( ! isWin ) {
+			// In MacOS inserting emoji doesn't trigger the stanradr keyboard events.
+			// Thankfully it triggers the 'input' event.
+			// This works in Android and iOS as well.
+			editor.on( 'keydown keyup', function( event ) {
+				typing = ( event.type === 'keydown' );
+			} );
 
-			if ( twemoji.test( node.textContent || node.innerText ) ) {
+			editor.on( 'input', function( event ) {
-				if ( isMacWebKit ) {
+				if ( typing ) {
-					bookmark = selection.getBookmark();
+					return;
 				}
 
-				replaceEmoji( node );
+				var bookmark,
+					selection = editor.selection,
+					node = selection.getNode();
 
-				if ( isMacWebKit ) {
+				if ( twemoji.test( node.textContent || node.innerText ) ) {
-					selection.moveToBookmark( bookmark );
+					if ( env.webkit ) {
+						bookmark = selection.getBookmark();
+					}
+
+					replaceEmoji( node );
+
+					if ( env.webkit ) {
+						selection.moveToBookmark( bookmark );
+					}
 				}
-			}
+			});
-		});
+		}
 
 		editor.on( 'setcontent', function( event ) {
 			var selection = editor.selection,
@@ -54,7 +85,7 @@
 
 				// In IE all content in the editor is left selected after wp.emoji.parse()...
 				// Collapse the selection to the beginning.
-				if ( tinymce.Env.ie && tinymce.Env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
+				if ( env.ie && env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
 					selection.collapse( true );
 				}
 			}
@@ -73,9 +104,7 @@
 
 		editor.on( 'postprocess', function( event ) {
 			if ( event.content ) {
-				event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, function( match, emoji ) {
+				event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, '$1' );
-					return emoji;
-				} );
 			}
 		} );
 

wp-includes/js/tinymce/plugins/wpemoji/plugin.min.js

@@ -1 +1 @@
-!function(a,b,c){a.PluginManager.add("wpemoji",function(d){function e(a){a.className="emoji",a.setAttribute("data-mce-resize","false"),a.setAttribute("data-mce-placeholder","1"),a.setAttribute("data-wp-emoji",a.alt)}function f(c){b.emoji.parse(c,{className:"emoji _inserted-emoji"}),a.each(d.dom.$("img._inserted-emoji",c),e)}var g,h=a.Env.mac&&a.Env.webkit;b&&b.emoji&&b.emoji.replaceEmoji&&(d.on("keydown keyup",function(a){g="keydown"===a.type}),d.on("input",function(){if(!g){var a,b=d.selection,e=b.getNode();c.test(e.textContent||e.innerText)&&(h&&(a=b.getBookmark()),f(e),h&&b.moveToBookmark(a))}}),d.on("setcontent",function(b){var e=d.selection,g=e.getNode();c.test(g.textContent||g.innerText)&&(f(g),a.Env.ie&&a.Env.ie<9&&b.load&&g&&"BODY"===g.nodeName&&e.collapse(!0))}),d.on("PastePostProcess",function(b){c&&a.each(d.dom.$("img.emoji",b.node),function(a){a.alt&&c.test(a.alt)&&e(a)})}),d.on("postprocess",function(a){a.content&&(a.content=a.content.replace(/<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g,function(a,b){return b}))}),d.on("resolvename",function(a){"IMG"===a.target.nodeName&&d.dom.getAttrib(a.target,"data-wp-emoji")&&a.preventDefault()}))})}(window.tinymce,window.wp,window.twemoji);
+!function(a,b,c){a.PluginManager.add("wpemoji",function(d){function e(a){a.className="emoji",a.setAttribute("data-mce-resize","false"),a.setAttribute("data-mce-placeholder","1"),a.setAttribute("data-wp-emoji",a.alt)}function f(c){b.emoji.parse(c,{className:"emoji _inserted-emoji"}),a.each(d.dom.$("img._inserted-emoji",c),e)}var g,h=a.Env,i=window.navigator.userAgent,j=i.indexOf("Windows")>-1,k=function(){var a=i.match(/Windows NT 6\.(\d)/);return a&&a[1]>1?!0:!1}();b&&b.emoji&&b.emoji.replaceEmoji&&(k?d.on("keyup",function(a){var b;231===a.keyCode&&(b=d.selection.getNode(),c.test(b.textContent||b.innerText)&&f(b))}):j||(d.on("keydown keyup",function(a){g="keydown"===a.type}),d.on("input",function(){if(!g){var a,b=d.selection,e=b.getNode();c.test(e.textContent||e.innerText)&&(h.webkit&&(a=b.getBookmark()),f(e),h.webkit&&b.moveToBookmark(a))}})),d.on("setcontent",function(a){var b=d.selection,e=b.getNode();c.test(e.textContent||e.innerText)&&(f(e),h.ie&&h.ie<9&&a.load&&e&&"BODY"===e.nodeName&&b.collapse(!0))}),d.on("PastePostProcess",function(b){c&&a.each(d.dom.$("img.emoji",b.node),function(a){a.alt&&c.test(a.alt)&&e(a)})}),d.on("postprocess",function(a){a.content&&(a.content=a.content.replace(/<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g,"$1"))}),d.on("resolvename",function(a){"IMG"===a.target.nodeName&&d.dom.getAttrib(a.target,"data-wp-emoji")&&a.preventDefault()}))})}(window.tinymce,window.wp,window.twemoji);

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.2-beta3-31921';
+$wp_version = '4.2-beta3-31922';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.