Emoji:

- Move the TinyMCE plugin CSS to wp-content.css.
- Change the replacement images class to `wp-emoji` inside the editor.
- Clean up both the plugin and wp-emoji.js, abstract and restructure a bit.
See #31242.
Built from https://develop.svn.wordpress.org/trunk@31779


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

wp-includes/js/tinymce/plugins/wpemoji/css/editor.css

@@ -1,15 +0,0 @@
-.emoji-wrapper,
-.emoji-spacer {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-img.emoji {
-	height: 1em;
-	width: 1em;
-	margin: 0 .05em 0 .1em;
-	vertical-align: -0.1em;
-	border: none;
-	padding: 0;
-}

wp-includes/js/tinymce/plugins/wpemoji/css/rtl/editor-rtl.css

@@ -1,17 +0,0 @@
-/* This file was automatically generated on Nov 19 2014 05:08:11 */
-
-.emoji-wrapper,
-.emoji-spacer {
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-img.emoji {
-	height: 1em;
-	width: 1em;
-	margin: 0 .1em 0 .05em;
-	vertical-align: -0.1em;
-	border: none;
-	padding: 0;
-}

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

@@ -1,29 +1,18 @@
 ( function( tinymce, wp ) {
-	tinymce.PluginManager.add( 'wpemoji', function( editor, url ) {
+	tinymce.PluginManager.add( 'wpemoji', function( editor ) {
 		var typing,
 			isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
 
-		if ( ! wp.emoji.parseEmoji ) {
+		if ( ! wp || ! wp.emoji ) {
 			return;
 		}
 
-		// Loads stylesheet for custom styles within the editor
-		editor.on( 'init', function() {
-			var cssId = editor.dom.uniqueId();
-			var linkElm = editor.dom.create( 'link', {
-				id:   cssId,
-				rel:  'stylesheet',
-				href: url + '/css/editor.css'
-			});
-			editor.getDoc().getElementsByTagName( 'head' )[0].appendChild( linkElm );
-		} );
-
 		editor.on( 'keydown keyup', function( event ) {
 			typing = event.type === 'keydown';
 		} );
 
 		editor.on( 'input setcontent', function( event ) {
-			var selection, node, bookmark, imgs;
+			var selection, node, bookmark, images;
 
 			if ( typing && event.type === 'input' ) {
 				return;
@@ -36,16 +25,15 @@
 				bookmark = selection.getBookmark();
 			}
 
-			wp.emoji.parse( node );
+			wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
 
-			imgs = editor.dom.select( 'img.emoji', node );
+			images = editor.dom.select( 'img.new-emoji', node );
 
-			tinymce.each( imgs, function( elem ) {
+			tinymce.each( images, function( image ) {
-				if ( ! elem.getAttribute( 'data-wp-emoji' ) ) {
+				image.className = 'wp-emoji';
-					elem.setAttribute( 'data-mce-resize', 'false' );
+				image.setAttribute( 'data-mce-resize', 'false' );
-					elem.setAttribute( 'data-mce-placeholder', '1' );
+				image.setAttribute( 'data-mce-placeholder', '1' );
-					elem.setAttribute( 'data-wp-emoji', elem.alt );
+				image.setAttribute( 'data-wp-emoji', image.alt );
-				}
 			} );
 
 			// In IE all content in the editor is left selected aftrer wp.emoji.parse()...

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

@@ -1 +1 @@
-!function(a,b){a.PluginManager.add("wpemoji",function(c,d){var e,f=a.Env.mac&&a.Env.webkit;b.emoji.parseEmoji&&(c.on("init",function(){var a=c.dom.uniqueId(),b=c.dom.create("link",{id:a,rel:"stylesheet",href:d+"/css/editor.css"});c.getDoc().getElementsByTagName("head")[0].appendChild(b)}),c.on("keydown keyup",function(a){e="keydown"===a.type}),c.on("input setcontent",function(d){var g,h,i,j;e&&"input"===d.type||(g=c.selection,h=g.getNode(),f&&(i=g.getBookmark()),b.emoji.parse(h),j=c.dom.select("img.emoji",h),a.each(j,function(a){a.getAttribute("data-wp-emoji")||(a.setAttribute("data-mce-resize","false"),a.setAttribute("data-mce-placeholder","1"),a.setAttribute("data-wp-emoji",a.alt))}),a.Env.ie&&h&&"BODY"===h.nodeName&&g.collapse(!0),f&&g.moveToBookmark(i))}),c.on("postprocess",function(a){a.content&&(a.content=a.content.replace(/<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g,function(a,b){return b}))}),c.on("resolvename",function(a){"IMG"===a.target.nodeName&&c.dom.getAttrib(a.target,"data-wp-emoji")&&a.preventDefault()}))})}(window.tinymce,window.wp);
+!function(a,b){a.PluginManager.add("wpemoji",function(c){var d,e=a.Env.mac&&a.Env.webkit;b&&b.emoji&&(c.on("keydown keyup",function(a){d="keydown"===a.type}),c.on("input setcontent",function(f){var g,h,i,j;d&&"input"===f.type||(g=c.selection,h=g.getNode(),e&&(i=g.getBookmark()),b.emoji.parse(h,{className:"wp-emoji new-emoji"}),j=c.dom.select("img.new-emoji",h),a.each(j,function(a){a.className="wp-emoji",a.setAttribute("data-mce-resize","false"),a.setAttribute("data-mce-placeholder","1"),a.setAttribute("data-wp-emoji",a.alt)}),a.Env.ie&&h&&"BODY"===h.nodeName&&g.collapse(!0),e&&g.moveToBookmark(i))}),c.on("postprocess",function(a){a.content&&(a.content=a.content.replace(/<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g,function(a,b){return b}))}),c.on("resolvename",function(a){"IMG"===a.target.nodeName&&c.dom.getAttrib(a.target,"data-wp-emoji")&&a.preventDefault()}))})}(window.tinymce,window.wp);

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -57,6 +57,18 @@ th {
 	font-size: inherit;
 }
 
+/* For emoji replacement images */
+img.wp-emoji {
+	height: 1em !important;
+	width: 1em !important;
+	margin: 0 0.07em !important;
+	vertical-align: -0.1em !important;
+	border: none !important;
+	padding: 0 !important;
+	-webkit-box-shadow: none !important;
+	box-shadow: none !important;
+}
+
 /* DFW mode */
 html.wp-fullscreen,
 html.wp-fullscreen body#tinymce {

wp-includes/js/wp-emoji.js

@@ -1,9 +1,8 @@
-window.wp = window.wp || {};
 
-( function( window, wp, twemoji, settings ) {
+( function( window, twemoji, settings ) {
-	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
+	function wpEmoji() {
+		var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver,
 
-	var emoji = {
 		/**
 		 * Flag to determine if we should parse all emoji characters into Twemoji images.
 		 *
@@ -11,7 +10,7 @@ window.wp = window.wp || {};
 		 *
 		 * @var Boolean
 		 */
-		parseAllEmoji: false,
+		parseAllEmoji = false,
 
 		/**
 		 * Flag to determine if we should consider parsing emoji characters into Twemoji images.
@@ -20,7 +19,7 @@ window.wp = window.wp || {};
 		 *
 		 * @var Boolean
 		 */
-		parseEmoji: false,
+		parseEmoji = false,
 
 		/**
 		 * Flag to determine if we should parse flag characters into Twemoji images.
@@ -29,31 +28,14 @@ window.wp = window.wp || {};
 		 *
 		 * @var Boolean
 		 */
-		parseFlags: false,
+		parseFlags = false;
-
-		/**
-		 * Initialize our emoji support, and set up listeners.
-		 *
-		 * @since 4.2.0
-		 */
-		init: function() {
-			emoji.parseAllEmoji = ! emoji.browserSupportsEmoji();
-			emoji.parseFlags = ! emoji.browserSupportsFlagEmoji();
-			emoji.parseEmoji = emoji.parseAllEmoji || emoji.parseFlags;
-
-			if ( window.addEventListener ) {
-				window.addEventListener( 'load', emoji.load, false );
-			} else if ( window.attachEvent ) {
-				window.attachEvent( 'onload', emoji.load );
-			}
-		},
 
 		/**
 		 * Runs when the document load event is fired, so we can do our first parse of the page.
 		 *
 		 * @since 4.2.0
 		 */
-		load: function() {
+		function load() {
 			if ( MutationObserver ) {
 				new MutationObserver( function( mutationRecords ) {
 					var i = mutationRecords.length,
@@ -71,7 +53,7 @@ window.wp = window.wp || {};
 							}
 
 							if ( node && node.nodeType === 1 ) {
-								emoji.parse( node );
+								parse( node );
 							}
 						}
 					}
@@ -83,45 +65,19 @@ window.wp = window.wp || {};
 				} );
 			}
 
-			emoji.parse( document.body );
+			parse( document.body );
-		},
+		}
 
 		/**
-		 * Detect if the browser supports rendering emoji.
+		 * Detect if the browser supports rendering emoji or flag emoji. Flag emoji are a single glyph
-		 *
-		 * @since 4.2.0
-		 *
-		 * @return {Boolean} True if the browser can render emoji, false if it cannot.
-		 */
-		browserSupportsEmoji: function() {
-			var canvas = document.createElement( 'canvas' ),
-				context = canvas.getContext && canvas.getContext( '2d' );
-
-			if ( ! context || ! context.fillText ) {
-				return false;
-			}
-
-			/*
-			 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
-			 * it doesn't work when the font is bolder than 500 weight. So, we
-			 * check for bold rendering support to avoid invisible emoji in Chrome.
-			 */
-			context.textBaseline = 'top';
-			context.font = '600 32px Arial';
-			context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
-
-			return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
-		},
-
-		/**
-		 * Detect if the browser supports rendering flag emoji. Flag emoji are a single glyph
 		 * made of two characters, so some browsers (notably, Firefox OS X) don't support them.
 		 *
 		 * @since 4.2.0
 		 *
-		 * @return {Boolean} True if the browser renders flag characters as a flag glyph, false if it does not.
+		 * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
+		 * @return {Boolean} True if the browser can render emoji, false if it cannot.
 		 */
-		browserSupportsFlagEmoji: function() {
+		function browserSupportsEmoji( type ) {
 			var canvas = document.createElement( 'canvas' ),
 				context = canvas.getContext && canvas.getContext( '2d' );
 
@@ -130,20 +86,30 @@ window.wp = window.wp || {};
 			}
 
 			context.textBaseline = 'top';
-			context.font = '32px Arial';
+			context.font = '600 32px Arial';
-			context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
 
-			/*
+			if ( type === 'flag' ) {
-			 * This works because the image will be one of three things:
+				/*
-			 * - Two empty squares, if the browser doen't render emoji
+				 * This works because the image will be one of three things:
-			 * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji
+				 * - Two empty squares, if the browser doen't render emoji
-			 * - The British flag
+				 * - Two squares with 'G' and 'B' in them, if the browser doen't render flag emoji
-			 *
+				 * - The British flag
-			 * The first two will encode to small images (1-2KB data URLs), the third will encode
+				 *
-			 * to a larger image (4-5KB data URL).
+				 * The first two will encode to small images (1-2KB data URLs), the third will encode
-			 */
+				 * to a larger image (4-5KB data URL).
-			return canvas.toDataURL().length > 3000;
+				 */
-		},
+				context.fillText( String.fromCharCode( 55356, 56812, 55356, 56807 ), 0, 0 );
+				return canvas.toDataURL().length > 3000;
+			} else {
+				/*
+				 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
+				 * it doesn't work when the font is bolder than 500 weight. So, we
+				 * check for bold rendering support to avoid invisible emoji in Chrome.
+				 */
+				context.fillText( String.fromCharCode( 55357, 56835 ), 0, 0 );
+				return context.getImageData( 16, 16, 1, 1 ).data[0] !== 0;
+			}
+		}
 
 		/**
 		 * Given an element or string, parse any emoji characters into Twemoji images.
@@ -152,14 +118,17 @@ window.wp = window.wp || {};
 		 *
 		 * @param {HTMLElement|String} object The element or string to parse.
 		 */
-		parse: function( object ) {
+		function parse( object, options ) {
-			if ( ! emoji.parseEmoji ) {
+			if ( ! parseEmoji ) {
 				return object;
 			}
 
+			var className = ( options && options.className ) || 'emoji';
+
 			return twemoji.parse( object, {
 				base: settings.baseUrl,
 				ext: settings.ext,
+				className: className,
 				callback: function( icon, options ) {
 					// Ignore some standard characters that TinyMCE recommends in its character map.
 					switch ( icon ) {
@@ -174,7 +143,7 @@ window.wp = window.wp || {};
 							return false;
 					}
 
-					if ( emoji.parseFlags && ! emoji.parseAllEmoji &&
+					if ( parseFlags && ! parseAllEmoji &&
 						! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
 
 						return false;
@@ -184,9 +153,31 @@ window.wp = window.wp || {};
 				}
 			} );
 		}
-	};
 
-	emoji.init();
+		if ( ! twemoji || ! settings ) {
+			return;
+		}		
 
-	wp.emoji = emoji;
+		/**
-} )( window, window.wp, window.twemoji, window._wpemojiSettings );
+		 * Initialize our emoji support, and set up listeners.
+		 */
+		parseAllEmoji = ! browserSupportsEmoji();
+		parseFlags = ! browserSupportsEmoji( 'flag' );
+		parseEmoji = parseAllEmoji || parseFlags;
+
+		if ( window.addEventListener ) {
+			window.addEventListener( 'load', load, false );
+		} else if ( window.attachEvent ) {
+			window.attachEvent( 'onload', load );
+		}
+
+		return {
+			browserSupportsEmoji: browserSupportsEmoji,
+			parse: parse
+		};
+	}
+
+	window.wp = window.wp || {};
+	window.wp.emoji = new wpEmoji();
+
+} )( window, window.twemoji, window._wpemojiSettings );

wp-includes/js/wp-emoji.min.js

@@ -1 +1 @@
-window.wp=window.wp||{},function(a,b,c,d){var e=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,f={parseAllEmoji:!1,parseEmoji:!1,parseFlags:!1,init:function(){f.parseAllEmoji=!f.browserSupportsEmoji(),f.parseFlags=!f.browserSupportsFlagEmoji(),f.parseEmoji=f.parseAllEmoji||f.parseFlags,a.addEventListener?a.addEventListener("load",f.load,!1):a.attachEvent&&a.attachEvent("onload",f.load)},load:function(){e&&new e(function(a){for(var b,c,d=a.length;d--;)for(b=a[d].addedNodes.length;b--;)c=a[d].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&f.parse(c)}).observe(document.body,{childList:!0,subtree:!0}),f.parse(document.body)},browserSupportsEmoji:function(){var a=document.createElement("canvas"),b=a.getContext&&a.getContext("2d");return b&&b.fillText?(b.textBaseline="top",b.font="600 32px Arial",b.fillText(String.fromCharCode(55357,56835),0,0),0!==b.getImageData(16,16,1,1).data[0]):!1},browserSupportsFlagEmoji:function(){var a=document.createElement("canvas"),b=a.getContext&&a.getContext("2d");return b&&b.fillText?(b.textBaseline="top",b.font="32px Arial",b.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),a.toDataURL().length>3e3):!1},parse:function(a){return f.parseEmoji?c.parse(a,{base:d.baseUrl,ext:d.ext,callback:function(a,b){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return!f.parseFlags||f.parseAllEmoji||/^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}}):a}};f.init(),b.emoji=f}(window,window.wp,window.twemoji,window._wpemojiSettings);
+!function(a,b,c){function d(){function d(){g&&new g(function(a){for(var b,c,d=a.length;d--;)for(b=a[d].addedNodes.length;b--;)c=a[d].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&f(c)}).observe(document.body,{childList:!0,subtree:!0}),f(document.body)}function e(a){var b=document.createElement("canvas"),c=b.getContext&&b.getContext("2d");return c&&c.fillText?(c.textBaseline="top",c.font="600 32px Arial","flag"===a?(c.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),b.toDataURL().length>3e3):(c.fillText(String.fromCharCode(55357,56835),0,0),0!==c.getImageData(16,16,1,1).data[0])):!1}function f(a,d){if(!i)return a;var e=d&&d.className||"emoji";return b.parse(a,{base:c.baseUrl,ext:c.ext,className:e,callback:function(a,b){switch(a){case"a9":case"ae":case"2122":case"2194":case"2660":case"2663":case"2665":case"2666":return!1}return!j||h||/^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})}var g=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,h=!1,i=!1,j=!1;if(b&&c)return h=!e(),j=!e("flag"),i=h||j,a.addEventListener?a.addEventListener("load",d,!1):a.attachEvent&&a.attachEvent("onload",d),{browserSupportsEmoji:e,parse:f}}a.wp=a.wp||{},a.wp.emoji=new d}(window,window.twemoji,window._wpemojiSettings);

wp-includes/version.php

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