diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 054ef23b32..6a1e9d7783 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -679,6 +679,20 @@ td.help { 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; +} + /*------------------------------------------------------------------------------ 1.0 - Text Styles ------------------------------------------------------------------------------*/ diff --git a/src/wp-includes/default-filters.php b/src/wp-includes/default-filters.php index 4c996bd003..581e54cc1f 100644 --- a/src/wp-includes/default-filters.php +++ b/src/wp-includes/default-filters.php @@ -254,7 +254,6 @@ add_action( 'sanitize_comment_cookies', 'sanitize_comment_cookies' add_action( 'admin_print_scripts', 'print_head_scripts', 20 ); 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 ); add_action( 'plugins_loaded', 'wp_maybe_load_embeds', 0 ); diff --git a/src/wp-includes/formatting.php b/src/wp-includes/formatting.php index c55b8aba7b..6c23bbb19a 100644 --- a/src/wp-includes/formatting.php +++ b/src/wp-includes/formatting.php @@ -4046,7 +4046,7 @@ img.emoji { box-shadow: none !important; height: 1em !important; width: 1em !important; - margin: 0 .05em 0 .1em !important; + margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; diff --git a/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js b/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js index fa172d08d6..ed50a9c035 100644 --- a/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js +++ b/src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js @@ -1,52 +1,76 @@ -( 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 ); + } + editor.on( 'keydown keyup', function( event ) { typing = event.type === 'keydown'; } ); - 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 ) { if ( event.content ) { event.content = event.content.replace( /]+data-wp-emoji="([^"]+)"[^>]*>/g, function( match, emoji ) { @@ -61,4 +85,4 @@ } } ); } ); -} )( window.tinymce, window.wp ); +} )( window.tinymce, window.wp, window.twemoji ); diff --git a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css index d4488d1435..78d44c950c 100644 --- a/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css +++ b/src/wp-includes/js/tinymce/skins/wordpress/wp-content.css @@ -58,12 +58,14 @@ th { } /* 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; box-shadow: none !important; diff --git a/src/wp-includes/js/wp-emoji.js b/src/wp-includes/js/wp-emoji.js index 4fce566fad..c3b275c8bd 100644 --- a/src/wp-includes/js/wp-emoji.js +++ b/src/wp-includes/js/wp-emoji.js @@ -4,31 +4,31 @@ var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver, /** - * 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 * * @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 * * @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 * * @var Boolean */ - parseFlags = false; + replaceEmoji = false; /** * Runs when the document load event is fired, so we can do our first parse of the page. @@ -39,8 +39,7 @@ if ( MutationObserver ) { new MutationObserver( function( mutationRecords ) { var i = mutationRecords.length, - ii, - node; + ii, node; while ( i-- ) { ii = mutationRecords[ i ].addedNodes.length; @@ -57,9 +56,7 @@ } } } - } ) - - .observe( document.body, { + } ).observe( document.body, { childList: true, subtree: true } ); @@ -74,7 +71,7 @@ * * @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. */ function browserSupportsEmoji( type ) { @@ -117,13 +114,14 @@ * @since 4.2.0 * * @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, { base: settings.baseUrl, @@ -143,7 +141,7 @@ return false; } - 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 ) ) { return false; @@ -158,10 +156,10 @@ * Initialize our emoji support, and set up listeners. */ 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 ); } else if ( window.attachEvent ) { @@ -171,6 +169,7 @@ return { browserSupportsEmoji: browserSupportsEmoji, + replaceEmoji: replaceEmoji, parse: parse }; }