WordPress.org

Make WordPress Core

Changeset 31922


Ignore:
Timestamp:
03/30/2015 02:38:26 AM (6 years ago)
Author:
azaozz
Message:

TinyMCE emoji: catch the inserting of emoji chars with the Windows 8 onscreen keyboard and replace if needed.
Fixes #31627.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js

    r31787 r31922  
    11( function( tinymce, wp, twemoji ) {
    22    tinymce.PluginManager.add( 'wpemoji', function( editor ) {
    3         var typing,
    4             isMacWebKit = tinymce.Env.mac && tinymce.Env.webkit;
     3        var typing, match,
     4            env = tinymce.Env,
     5            ua = window.navigator.userAgent,
     6            isWin = ua.indexOf( 'Windows' ) > -1,
     7            isWin8 = ( function() {
     8                var match = ua.match( /Windows NT 6\.(\d)/ );
     9
     10                if ( match && match[1] > 1 ) {
     11                    return true;
     12                }
     13
     14                return false;
     15            }());
    516
    617        if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
     
    2031        }
    2132
    22         editor.on( 'keydown keyup', function( event ) {
    23             typing = event.type === 'keydown';
    24         } );
     33        if ( isWin8 ) {
     34            // Windows 8+ emoji can be "typed" with the onscreen keyboard.
     35            // That triggers the normal keyboard events, but not the 'input' event.
     36            // Thankfully it sets keyCode 231 when the onscreen keyboard inserts any emoji.
     37            editor.on( 'keyup', function( event ) {
     38                var node;
    2539
    26         editor.on( 'input', function() {
    27             if ( typing ) {
    28                 return;
    29             }
     40                if ( event.keyCode === 231 ) {
     41                    node = editor.selection.getNode();
    3042
    31             var bookmark,
    32                 selection = editor.selection,
    33                 node = selection.getNode();
     43                    if ( twemoji.test( node.textContent || node.innerText ) ) {
     44                        replaceEmoji( node );
     45                    }
     46                }
     47            } );
     48        } else if ( ! isWin ) {
     49            // In MacOS inserting emoji doesn't trigger the stanradr keyboard events.
     50            // Thankfully it triggers the 'input' event.
     51            // This works in Android and iOS as well.
     52            editor.on( 'keydown keyup', function( event ) {
     53                typing = ( event.type === 'keydown' );
     54            } );
    3455
    35             if ( twemoji.test( node.textContent || node.innerText ) ) {
    36                 if ( isMacWebKit ) {
    37                     bookmark = selection.getBookmark();
     56            editor.on( 'input', function( event ) {
     57                if ( typing ) {
     58                    return;
    3859                }
    3960
    40                 replaceEmoji( node );
     61                var bookmark,
     62                    selection = editor.selection,
     63                    node = selection.getNode();
    4164
    42                 if ( isMacWebKit ) {
    43                     selection.moveToBookmark( bookmark );
     65                if ( twemoji.test( node.textContent || node.innerText ) ) {
     66                    if ( env.webkit ) {
     67                        bookmark = selection.getBookmark();
     68                    }
     69
     70                    replaceEmoji( node );
     71
     72                    if ( env.webkit ) {
     73                        selection.moveToBookmark( bookmark );
     74                    }
    4475                }
    45             }
    46         });
     76            });
     77        }
    4778
    4879        editor.on( 'setcontent', function( event ) {
     
    5586                // In IE all content in the editor is left selected after wp.emoji.parse()...
    5687                // Collapse the selection to the beginning.
    57                 if ( tinymce.Env.ie && tinymce.Env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
     88                if ( env.ie && env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
    5889                    selection.collapse( true );
    5990                }
     
    74105        editor.on( 'postprocess', function( event ) {
    75106            if ( event.content ) {
    76                 event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, function( match, emoji ) {
    77                     return emoji;
    78                 } );
     107                event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, '$1' );
    79108            }
    80109        } );
Note: See TracChangeset for help on using the changeset viewer.