Changeset 31786

Timestamp:

03/15/2015 11:15:28 PM (10 years ago)

Author:

azaozz

Message:

Emoji:

• Add the styling for the replacement images to the admin CSS.
• Revert to using .emoji as replacement image class.
• When pasting in the editor, convert emoji images to our format so we can replace them with chars on saving.
• Some more clean up of both the plugin and wp-emoji.js.

See #31242.

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (1 diff)
• wp-includes/default-filters.php (modified) (1 diff)
• wp-includes/formatting.php (modified) (1 diff)
• wp-includes/js/tinymce/plugins/wpemoji/plugin.js (modified) (3 diffs)
• wp-includes/js/tinymce/skins/wordpress/wp-content.css (modified) (1 diff)
• wp-includes/js/wp-emoji.js (modified) (11 diffs)

trunk/src/wp-admin/css/common.css

@@ -678 +678 @@
 .wp-ui-text-icon {
     color: #999;
+}
+
+/* For emoji replacement images */
+img.emoji {
+    display: inline !important;
+    border: none !important;
+    height: 1em !important;
+    width: 1em !important;
+    margin: 0 .07em !important;
+    vertical-align: -0.1em !important;
+    background: none !important;
+    padding: 0 !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
 }
 

trunk/src/wp-includes/default-filters.php

@@ -255 +255 @@
 add_action( 'admin_print_footer_scripts', '_wp_footer_scripts'                             );
 add_action( 'admin_print_styles',         'print_admin_styles',                      20    );
-add_action( 'admin_print_styles',         'print_emoji_styles'                             );
 add_action( 'init',                       'smilies_init',                             5    );
 add_action( 'plugins_loaded',             'wp_maybe_load_widgets',                    0    );

trunk/src/wp-includes/formatting.php

@@ -4047 +4047 @@
     height: 1em !important;
     width: 1em !important;
-    margin: 0 .05em 0 .1em !important;
+    margin: 0 .07em !important;
     vertical-align: -0.1em !important;
     background: none !important;

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

@@ -1 @@
-( function( tinymce, wp ) {
+( function( tinymce, wp, twemoji ) {
     tinymce.PluginManager.add( 'wpemoji', function( editor ) {
         var typing,
             isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
 
-        if ( ! wp || ! wp.emoji ) {
+        if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
             return;
+        }
+
+        function setImgAttr( image ) {
+            image.className = 'emoji';
+            image.setAttribute( 'data-mce-resize', 'false' );
+            image.setAttribute( 'data-mce-placeholder', '1' );
+            image.setAttribute( 'data-wp-emoji', image.alt );
+        }
+
+        function replaceEmoji( node ) {
+            wp.emoji.parse( node, { className: 'emoji _inserted-emoji' } );
+            tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
         }
 
@@ -12 +24 @@
         } );
 
-        editor.on( 'input setcontent', function( event ) {
-            var selection, node, bookmark, images;
-
-            if ( typing && event.type === 'input' ) {
+        editor.on( 'input', function( event ) {
+            if ( typing ) {
                 return;
             }
 
-            selection = editor.selection;
-            node = selection.getNode();
+            var bookmark,
+                selection = editor.selection,
+                node = selection.getNode();
 
-            if ( isMacWebKit ) {
-                bookmark = selection.getBookmark();
+            if ( twemoji.test( node.textContent || node.innerText ) ) {
+                if ( isMacWebKit ) {
+                    bookmark = selection.getBookmark();
+                }
+
+                replaceEmoji( node );
+
+                if ( isMacWebKit ) {
+                    selection.moveToBookmark( bookmark );
+                }
             }
+        });
 
-            wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
+        editor.on( 'setcontent', function( event ) {
+            var selection = editor.selection,
+                node = selection.getNode();
 
-            images = editor.dom.select( 'img.new-emoji', node );
+            if ( twemoji.test( node.textContent || node.innerText ) ) {
+                replaceEmoji( node );
 
-            tinymce.each( images, function( image ) {
-                image.className = 'wp-emoji';
-                image.setAttribute( 'data-mce-resize', 'false' );
-                image.setAttribute( 'data-mce-placeholder', '1' );
-                image.setAttribute( 'data-wp-emoji', image.alt );
-            } );
-
-            // In IE all content in the editor is left selected aftrer wp.emoji.parse()...
-            // Collapse the selection to the beginning.
-            if ( tinymce.Env.ie && node && node.nodeName === 'BODY' ) {
-                selection.collapse( true );
-            }
-
-            if ( isMacWebKit ) {
-                selection.moveToBookmark( bookmark );
+                // In IE all content in the editor is left selected aftrer wp.emoji.parse()...
+                // Collapse the selection to the beginning.
+                if ( tinymce.Env.ie && tinymce.Env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
+                    selection.collapse( true );
+                }
             }
         } );
+
+        // Convert Twemoji compatible pasted emoji repacement images into our format.
+        editor.on( 'PastePostProcess', function( event ) {
+            if ( twemoji ) {
+                tinymce.each( editor.dom.$( 'img.emoji', event.node ), function( image ) {
+                    if ( image.alt && twemoji.test( image.alt ) ) {
+                        setImgAttr( image );
+                    }
+                });
+            }
+        });
 
         editor.on( 'postprocess', function( event ) {
@@ -62 +86 @@
         } );
     } );
-} )( window.tinymce, window.wp );
+} )( window.tinymce, window.wp, window.twemoji );

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

@@ -59 +59 @@
 
 /* For emoji replacement images */
-img.wp-emoji {
+img.emoji {
+    display: inline !important;
+    border: none !important;
     height: 1em !important;
     width: 1em !important;
-    margin: 0 0.07em !important;
+    margin: 0 .07em !important;
     vertical-align: -0.1em !important;
-    border: none !important;
+    background: none !important;
     padding: 0 !important;
     -webkit-box-shadow: none !important;

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

@@ -5 +5 @@
 
         /**
-         * Flag to determine if we should parse all emoji characters into Twemoji images.
+         * Flag to determine if the browser and the OS support emoji.
          *
          * @since 4.2.0
@@ -11 +11 @@
          * @var Boolean
          */
-        parseAllEmoji = false,
+        supportsEmoji = false,
 
         /**
-         * Flag to determine if we should consider parsing emoji characters into Twemoji images.
+         * Flag to determine if the browser and the OS support flag (two character) emoji.
          *
          * @since 4.2.0
@@ -20 +20 @@
          * @var Boolean
          */
-        parseEmoji = false,
+        supportsFlagEmoji = false,
 
         /**
-         * Flag to determine if we should parse flag characters into Twemoji images.
+         * Flag to determine if we should replace emoji characters with images.
          *
          * @since 4.2.0
@@ -29 +29 @@
          * @var Boolean
          */
-        parseFlags = false;
+        replaceEmoji = false;
 
         /**
@@ -40 +40 @@
                 new MutationObserver( function( mutationRecords ) {
                     var i = mutationRecords.length,
-                        ii,
-                        node;
+                        ii, node;
 
                     while ( i-- ) {
@@ -58 +57 @@
                         }
                     }
-                } )
-
-                .observe( document.body, {
+                } ).observe( document.body, {
                     childList: true,
                     subtree: true
@@ -75 +72 @@
          * @since 4.2.0
          *
-         * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
+         * @param type {String} Whether to test for support of "simple" or "flag" emoji.
          * @return {Boolean} True if the browser can render emoji, false if it cannot.
          */
@@ -118 +115 @@
          *
          * @param {HTMLElement|String} object The element or string to parse.
+         * @param {Object} args Additional options for Twemoji.
          */
-        function parse( object, options ) {
-            if ( ! parseEmoji ) {
+        function parse( object, args ) {
+            if ( ! replaceEmoji ) {
                 return object;
             }
 
-            var className = ( options && options.className ) || 'emoji';
+            var className = ( args && args.className ) || 'emoji';
 
             return twemoji.parse( object, {
@@ -144 +142 @@
                     }
 
-                    if ( parseFlags && ! parseAllEmoji &&
+                    if ( ! supportsFlagEmoji && supportsEmoji &&
                         ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
 
@@ -159 +157 @@
          */
         if ( twemoji && settings ) {
-            parseAllEmoji = ! browserSupportsEmoji();
-            parseFlags = ! browserSupportsEmoji( 'flag' );
-            parseEmoji = parseAllEmoji || parseFlags;
-    
+            supportsEmoji = browserSupportsEmoji();
+            supportsFlagEmoji = browserSupportsEmoji( 'flag' );
+            replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
+
             if ( window.addEventListener ) {
                 window.addEventListener( 'load', load, false );
@@ -172 +170 @@
         return {
             browserSupportsEmoji: browserSupportsEmoji,
+            replaceEmoji: replaceEmoji,
             parse: parse
         };