Emoji:

- Enhance twemoji.js to support passing of additional attributes for the replacement images.
- Use that to add the needed attributes when replacing emoji inside the editor.
Fixes #31627.
Built from https://develop.svn.wordpress.org/trunk@31948


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

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

@@ -22,12 +22,17 @@
 			image.className = 'emoji';
 			image.setAttribute( 'data-mce-resize', 'false' );
 			image.setAttribute( 'data-mce-placeholder', '1' );
-			image.setAttribute( 'data-wp-emoji', image.alt );
+			image.setAttribute( 'data-wp-emoji', '1' );
 		}
 
 		function replaceEmoji( node ) {
-			wp.emoji.parse( node, { className: 'emoji _inserted-emoji' } );
-			tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
+			var imgAttr = {
+				'data-mce-resize': 'false',
+				'data-mce-placeholder': '1',
+				'data-wp-emoji': '1'
+			};
+
+			wp.emoji.parse( node, { imgAttr: imgAttr } );
 		}
 
 		// Test if the node text contains emoji char(s) and replace.
@@ -102,7 +107,15 @@
 
 		editor.on( 'postprocess', function( event ) {
 			if ( event.content ) {
-				event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, '$1' );
+				event.content = event.content.replace( /<img[^>]+data-wp-emoji="[^>]+>/g, function( img ) {
+					var alt = img.match( /alt="([^"]+)"/ );
+
+					if ( alt && alt[1] ) {
+						return alt[1];
+					}
+
+					return img;
+				});
 			}
 		} );
 

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)}function g(a){var b,e;a&&c.test(a.textContent||a.innerText)&&(i.webkit&&(b=d.selection,e=b.getBookmark()),f(a),i.webkit&&b.moveToBookmark(e))}var h,i=a.Env,j=window.navigator.userAgent,k=j.indexOf("Windows")>-1,l=function(){var a=j.match(/Windows NT 6\.(\d)/);return a&&a[1]>1?!0:!1}();b&&b.emoji&&b.emoji.replaceEmoji&&(l?d.on("keyup",function(a){231===a.keyCode&&g(d.selection.getNode())}):k||(d.on("keydown keyup",function(a){h="keydown"===a.type}),d.on("input",function(){h||g(d.selection.getNode())})),d.on("setcontent",function(a){var b=d.selection,e=b.getNode();c.test(e.textContent||e.innerText)&&(f(e),i.ie&&i.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);
+!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","1")}function f(a){var c={"data-mce-resize":"false","data-mce-placeholder":"1","data-wp-emoji":"1"};b.emoji.parse(a,{imgAttr:c})}function g(a){var b,e;a&&c.test(a.textContent||a.innerText)&&(i.webkit&&(b=d.selection,e=b.getBookmark()),f(a),i.webkit&&b.moveToBookmark(e))}var h,i=a.Env,j=window.navigator.userAgent,k=j.indexOf("Windows")>-1,l=function(){var a=j.match(/Windows NT 6\.(\d)/);return a&&a[1]>1?!0:!1}();b&&b.emoji&&b.emoji.replaceEmoji&&(l?d.on("keyup",function(a){231===a.keyCode&&g(d.selection.getNode())}):k||(d.on("keydown keyup",function(a){h="keydown"===a.type}),d.on("input",function(){h||g(d.selection.getNode())})),d.on("setcontent",function(a){var b=d.selection,e=b.getNode();c.test(e.textContent||e.innerText)&&(f(e),i.ie&&i.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,function(a){var b=a.match(/alt="([^"]+)"/);return b&&b[1]?b[1]:a}))}),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/js/twemoji.js

@@ -337,7 +337,8 @@ var twemoji = (function (
       alt,
       icon,
       variant,
-      src;
+      src,
+      attr;
     while (length--) {
       modified = false;
       fragment = document.createDocumentFragment();
@@ -363,6 +364,14 @@ var twemoji = (function (
           );
           if (src) {
             img = new Image();
+
+			// Set additional image attributes.
+            if ( options.imgAttr ) {
+              for ( attr in options.imgAttr ) {
+                img.setAttribute( attr, options.imgAttr[attr] );
+              }
+            }
+
             img.onerror = twemoji.onerror;
             img.className = options.className;
             img.setAttribute('draggable', 'false');
@@ -406,7 +415,7 @@ var twemoji = (function (
    */
   function parseString(str, options) {
     return replace(str, function (match, icon, variant) {
-      var src;
+      var src, attr, attributes = '';
       // verify the variant is not the FE0E one
       // this variant means "emoji as text" and should not
       // require any action/replacement
@@ -418,6 +427,15 @@ var twemoji = (function (
           variant
         );
         if (src) {
+          // Set additional image attributes.
+          if ( options.imgAttr ) {
+            for ( attr in options.imgAttr ) {
+              if ( ! /draggable|class|alt|src/i.test( attr ) ) {
+                attributes += ' '.concat( attr, '="', options.imgAttr[attr], '"' );
+              }
+            }
+          }
+
           // recycle the match string replacing the emoji
           // with its image counter part
           match = '<img '.concat(
@@ -431,6 +449,7 @@ var twemoji = (function (
             'src="',
             src,
             '"',
+            attributes,
             '>'
           );
         }
@@ -483,7 +502,8 @@ var twemoji = (function (
       base:     typeof how.base === 'string' ? how.base : twemoji.base,
       ext:      how.ext || twemoji.ext,
       size:     how.folder || toSizeSquaredAsset(how.size || twemoji.size),
-      className:how.className || twemoji.className
+      className:how.className || twemoji.className,
+      imgAttr:  how.imgAttr
     });
   }
 
@@ -519,4 +539,4 @@ var twemoji = (function (
     return r.join(sep || '-');
   }
 
-}());
+}());

wp-includes/js/wp-emoji.js

@@ -100,12 +100,13 @@
 				return object;
 			}
 
-			var className = ( args && args.className ) || 'emoji';
+			args = args || {};
 
 			return twemoji.parse( object, {
 				base: settings.baseUrl,
 				ext: settings.ext,
-				className: className,
+				className: args.className || 'emoji',
+				imgAttr: args.imgAttr,
 				callback: function( icon, options ) {
 					// Ignore some standard characters that TinyMCE recommends in its character map.
 					switch ( icon ) {

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

@@ -1 +1 @@
-!function(a,b){function c(){function c(){if("undefined"==typeof a.twemoji){if(m>600)return;return a.clearTimeout(g),g=a.setTimeout(c,50),void m++}f=a.twemoji,h&&new h(function(a){for(var b,c,e=a.length;e--;)for(b=a[e].addedNodes.length;b--;)c=a[e].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&d(c)}).observe(document.body,{childList:!0,subtree:!0}),d(document.body)}function d(a,c){if(!k)return a;var d=c&&c.className||"emoji";return f.parse(a,{base:b.baseUrl,ext:b.ext,className:d,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||!i||/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})}function e(){(!l&&"interactive"===document.readyState||l&&"complete"===document.readyState)&&c()}var f,g,h=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,i=!1,j=!1,k=!1,l=-1!==a.navigator.userAgent.indexOf("IE 8"),m=0;return b&&(i=a._wpemojiSettings.supports.simple,j=a._wpemojiSettings.supports.flag,k=!i||!j,!l&&"loading"===document.readyState||l&&"complete"!==document.readyState?document.addEventListener?document.addEventListener("readystatechange",e,!1):document.attachEvent&&document.attachEvent("onreadystatechange",e):c()),{replaceEmoji:k,parse:d}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings);
+!function(a,b){function c(){function c(){if("undefined"==typeof a.twemoji){if(m>600)return;return a.clearTimeout(g),g=a.setTimeout(c,50),void m++}f=a.twemoji,h&&new h(function(a){for(var b,c,e=a.length;e--;)for(b=a[e].addedNodes.length;b--;)c=a[e].addedNodes[b],3===c.nodeType&&(c=c.parentNode),c&&1===c.nodeType&&d(c)}).observe(document.body,{childList:!0,subtree:!0}),d(document.body)}function d(a,c){return k?(c=c||{},f.parse(a,{base:b.baseUrl,ext:b.ext,className:c.className||"emoji",imgAttr:c.imgAttr,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||!i||/^1f1(?:e[6-9a-f]|f[0-9a-f])-1f1(?:e[6-9a-f]|f[0-9a-f])$/.test(a)?"".concat(b.base,"/",a,b.ext):!1}})):a}function e(){(!l&&"interactive"===document.readyState||l&&"complete"===document.readyState)&&c()}var f,g,h=a.MutationObserver||a.WebKitMutationObserver||a.MozMutationObserver,i=!1,j=!1,k=!1,l=-1!==a.navigator.userAgent.indexOf("IE 8"),m=0;return b&&(i=a._wpemojiSettings.supports.simple,j=a._wpemojiSettings.supports.flag,k=!i||!j,!l&&"loading"===document.readyState||l&&"complete"!==document.readyState?document.addEventListener?document.addEventListener("readystatechange",e,!1):document.attachEvent&&document.attachEvent("onreadystatechange",e):c()),{replaceEmoji:k,parse:d}}a.wp=a.wp||{},a.wp.emoji=new c}(window,window._wpemojiSettings);

wp-includes/version.php

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