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.

git-svn-id: https://develop.svn.wordpress.org/trunk@31948 602fd350-edb4-49c9-b593-d223f7449a82

src/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;
+				});
 			}
 		} );
 

src/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 || '-');
   }
 
-}());
+}());

src/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 ) {