sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Emoji:

Browse Source 
- 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@31786 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2015-03-15 23:15:28 +00:00
parent b69fe9bd6a
commit 005ff9a8c8
6 changed files with 91 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/wp-admin/css/common.css
View File

@ -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
------------------------------------------------------------------------------*/

1
src/wp-includes/default-filters.php
View File

@ -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 );

2
src/wp-includes/formatting.php
View File

@ -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;

72
src/wp-includes/js/tinymce/plugins/wpemoji/plugin.js
View File

@ -1,50 +1,74 @@
( 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;
var bookmark,
selection = editor.selection,
node = selection.getNode();
if ( twemoji.test( node.textContent || node.innerText ) ) {
if ( isMacWebKit ) {
bookmark = selection.getBookmark();
}
wp.emoji.parse( node, { className: 'wp-emoji new-emoji' } );
images = editor.dom.select( 'img.new-emoji', 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 );
}
replaceEmoji( node );
if ( isMacWebKit ) {
selection.moveToBookmark( bookmark );
}
}
});
editor.on( 'setcontent', function( event ) {
var selection = editor.selection,
node = selection.getNode();
if ( twemoji.test( node.textContent || node.innerText ) ) {
replaceEmoji( node );
// 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 ) {
@ -61,4 +85,4 @@
}
} );
} );
} )( window.tinymce, window.wp );
} )( window.tinymce, window.wp, window.twemoji );

8
src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
View File

@ -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;

37
src/wp-includes/js/wp-emoji.js
View File

@ -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,9 +156,9 @@
* 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 );
@ -171,6 +169,7 @@
return {
browserSupportsEmoji: browserSupportsEmoji,
replaceEmoji: replaceEmoji,
parse: parse
};
}