WordPress.org

Make WordPress Core

Changeset 31786


Ignore:
Timestamp:
03/15/2015 11:15:28 PM (7 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:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/common.css

    r31747 r31786  
    678678.wp-ui-text-icon {
    679679    color: #999;
     680}
     681
     682/* For emoji replacement images */
     683img.emoji {
     684    display: inline !important;
     685    border: none !important;
     686    height: 1em !important;
     687    width: 1em !important;
     688    margin: 0 .07em !important;
     689    vertical-align: -0.1em !important;
     690    background: none !important;
     691    padding: 0 !important;
     692    -webkit-box-shadow: none !important;
     693    box-shadow: none !important;
    680694}
    681695
  • trunk/src/wp-includes/default-filters.php

    r31733 r31786  
    255255add_action( 'admin_print_footer_scripts', '_wp_footer_scripts'                             );
    256256add_action( 'admin_print_styles',         'print_admin_styles',                      20    );
    257 add_action( 'admin_print_styles',         'print_emoji_styles'                             );
    258257add_action( 'init',                       'smilies_init',                             5    );
    259258add_action( 'plugins_loaded',             'wp_maybe_load_widgets',                    0    );
  • trunk/src/wp-includes/formatting.php

    r31781 r31786  
    40474047    height: 1em !important;
    40484048    width: 1em !important;
    4049     margin: 0 .05em 0 .1em !important;
     4049    margin: 0 .07em !important;
    40504050    vertical-align: -0.1em !important;
    40514051    background: none !important;
  • trunk/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js

    r31779 r31786  
    1 ( function( tinymce, wp ) {
     1( function( tinymce, wp, twemoji ) {
    22    tinymce.PluginManager.add( 'wpemoji', function( editor ) {
    33        var typing,
    44            isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
    55
    6         if ( ! wp || ! wp.emoji ) {
     6        if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
    77            return;
     8        }
     9
     10        function setImgAttr( image ) {
     11            image.className = 'emoji';
     12            image.setAttribute( 'data-mce-resize', 'false' );
     13            image.setAttribute( 'data-mce-placeholder', '1' );
     14            image.setAttribute( 'data-wp-emoji', image.alt );
     15        }
     16
     17        function replaceEmoji( node ) {
     18            wp.emoji.parse( node, { className: 'emoji _inserted-emoji' } );
     19            tinymce.each( editor.dom.$( 'img._inserted-emoji', node ), setImgAttr );
    820        }
    921
     
    1224        } );
    1325
    14         editor.on( 'input setcontent', function( event ) {
    15             var selection, node, bookmark, images;
    16 
    17             if ( typing && event.type === 'input' ) {
     26        editor.on( 'input', function( event ) {
     27            if ( typing ) {
    1828                return;
    1929            }
    2030
    21             selection = editor.selection;
    22             node = selection.getNode();
     31            var bookmark,
     32                selection = editor.selection,
     33                node = selection.getNode();
    2334
    24             if ( isMacWebKit ) {
    25                 bookmark = selection.getBookmark();
     35            if ( twemoji.test( node.textContent || node.innerText ) ) {
     36                if ( isMacWebKit ) {
     37                    bookmark = selection.getBookmark();
     38                }
     39
     40                replaceEmoji( node );
     41
     42                if ( isMacWebKit ) {
     43                    selection.moveToBookmark( bookmark );
     44                }
    2645            }
     46        });
    2747
    28             wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
     48        editor.on( 'setcontent', function( event ) {
     49            var selection = editor.selection,
     50                node = selection.getNode();
    2951
    30             images = editor.dom.select( 'img.new-emoji', node );
     52            if ( twemoji.test( node.textContent || node.innerText ) ) {
     53                replaceEmoji( node );
    3154
    32             tinymce.each( images, function( image ) {
    33                 image.className = 'wp-emoji';
    34                 image.setAttribute( 'data-mce-resize', 'false' );
    35                 image.setAttribute( 'data-mce-placeholder', '1' );
    36                 image.setAttribute( 'data-wp-emoji', image.alt );
    37             } );
    38 
    39             // In IE all content in the editor is left selected aftrer wp.emoji.parse()...
    40             // Collapse the selection to the beginning.
    41             if ( tinymce.Env.ie && node && node.nodeName === 'BODY' ) {
    42                 selection.collapse( true );
    43             }
    44 
    45             if ( isMacWebKit ) {
    46                 selection.moveToBookmark( bookmark );
     55                // In IE all content in the editor is left selected aftrer wp.emoji.parse()...
     56                // Collapse the selection to the beginning.
     57                if ( tinymce.Env.ie && tinymce.Env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
     58                    selection.collapse( true );
     59                }
    4760            }
    4861        } );
     62
     63        // Convert Twemoji compatible pasted emoji repacement images into our format.
     64        editor.on( 'PastePostProcess', function( event ) {
     65            if ( twemoji ) {
     66                tinymce.each( editor.dom.$( 'img.emoji', event.node ), function( image ) {
     67                    if ( image.alt && twemoji.test( image.alt ) ) {
     68                        setImgAttr( image );
     69                    }
     70                });
     71            }
     72        });
    4973
    5074        editor.on( 'postprocess', function( event ) {
     
    6286        } );
    6387    } );
    64 } )( window.tinymce, window.wp );
     88} )( window.tinymce, window.wp, window.twemoji );
  • trunk/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css

    r31779 r31786  
    5959
    6060/* For emoji replacement images */
    61 img.wp-emoji {
     61img.emoji {
     62    display: inline !important;
     63    border: none !important;
    6264    height: 1em !important;
    6365    width: 1em !important;
    64     margin: 0 0.07em !important;
     66    margin: 0 .07em !important;
    6567    vertical-align: -0.1em !important;
    66     border: none !important;
     68    background: none !important;
    6769    padding: 0 !important;
    6870    -webkit-box-shadow: none !important;
  • trunk/src/wp-includes/js/wp-emoji.js

    r31780 r31786  
    55
    66        /**
    7          * Flag to determine if we should parse all emoji characters into Twemoji images.
     7         * Flag to determine if the browser and the OS support emoji.
    88         *
    99         * @since 4.2.0
     
    1111         * @var Boolean
    1212         */
    13         parseAllEmoji = false,
     13        supportsEmoji = false,
    1414
    1515        /**
    16          * Flag to determine if we should consider parsing emoji characters into Twemoji images.
     16         * Flag to determine if the browser and the OS support flag (two character) emoji.
    1717         *
    1818         * @since 4.2.0
     
    2020         * @var Boolean
    2121         */
    22         parseEmoji = false,
     22        supportsFlagEmoji = false,
    2323
    2424        /**
    25          * Flag to determine if we should parse flag characters into Twemoji images.
     25         * Flag to determine if we should replace emoji characters with images.
    2626         *
    2727         * @since 4.2.0
     
    2929         * @var Boolean
    3030         */
    31         parseFlags = false;
     31        replaceEmoji = false;
    3232
    3333        /**
     
    4040                new MutationObserver( function( mutationRecords ) {
    4141                    var i = mutationRecords.length,
    42                         ii,
    43                         node;
     42                        ii, node;
    4443
    4544                    while ( i-- ) {
     
    5857                        }
    5958                    }
    60                 } )
    61 
    62                 .observe( document.body, {
     59                } ).observe( document.body, {
    6360                    childList: true,
    6461                    subtree: true
     
    7572         * @since 4.2.0
    7673         *
    77          * @param flagEmoji {Boolean} Whether to test for support of flag emoji.
     74         * @param type {String} Whether to test for support of "simple" or "flag" emoji.
    7875         * @return {Boolean} True if the browser can render emoji, false if it cannot.
    7976         */
     
    118115         *
    119116         * @param {HTMLElement|String} object The element or string to parse.
     117         * @param {Object} args Additional options for Twemoji.
    120118         */
    121         function parse( object, options ) {
    122             if ( ! parseEmoji ) {
     119        function parse( object, args ) {
     120            if ( ! replaceEmoji ) {
    123121                return object;
    124122            }
    125123
    126             var className = ( options && options.className ) || 'emoji';
     124            var className = ( args && args.className ) || 'emoji';
    127125
    128126            return twemoji.parse( object, {
     
    144142                    }
    145143
    146                     if ( parseFlags && ! parseAllEmoji &&
     144                    if ( ! supportsFlagEmoji && supportsEmoji &&
    147145                        ! /^1f1(?:e[6-9a-f]|f[1-9a-f])-1f1(?:e[6-9a-f]|f[1-9a-f])$/.test( icon ) ) {
    148146
     
    159157         */
    160158        if ( twemoji && settings ) {
    161             parseAllEmoji = ! browserSupportsEmoji();
    162             parseFlags = ! browserSupportsEmoji( 'flag' );
    163             parseEmoji = parseAllEmoji || parseFlags;
    164    
     159            supportsEmoji = browserSupportsEmoji();
     160            supportsFlagEmoji = browserSupportsEmoji( 'flag' );
     161            replaceEmoji = ! supportsEmoji || ! supportsFlagEmoji;
     162
    165163            if ( window.addEventListener ) {
    166164                window.addEventListener( 'load', load, false );
     
    172170        return {
    173171            browserSupportsEmoji: browserSupportsEmoji,
     172            replaceEmoji: replaceEmoji,
    174173            parse: parse
    175174        };
Note: See TracChangeset for help on using the changeset viewer.