Changeset 31948

Timestamp:

04/01/2015 02:38:25 AM (10 years ago)

Author:

azaozz

Message:

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.

Location:

trunk/src/wp-includes/js

Files:

• tinymce/plugins/wpemoji/plugin.js (modified) (2 diffs)
• twemoji.js (modified) (6 diffs)
• wp-emoji.js (modified) (1 diff)

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

@@ -23 +23 @@
             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 } );
         }
 
@@ -103 +108 @@
         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;
+                });
             }
         } );

trunk/src/wp-includes/js/twemoji.js

@@ -338 +338 @@
       icon,
       variant,
-      src;
+      src,
+      attr;
     while (length--) {
       modified = false;
@@ -364 +365 @@
           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;
@@ -407 +416 @@
   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
@@ -419 +428 @@
         );
         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
@@ -432 +450 @@
             src,
             '"',
+            attributes,
             '>'
           );
@@ -484 +503 @@
       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
     });
   }

trunk/src/wp-includes/js/wp-emoji.js

@@ -101 +101 @@
             }
 
-            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.