2015-03-15 19:16:29 -04:00
|
|
|
( function( tinymce, wp, twemoji ) {
|
2015-03-14 19:49:30 -04:00
|
|
|
tinymce.PluginManager.add( 'wpemoji', function( editor ) {
|
2015-03-29 22:50:27 -04:00
|
|
|
var typing,
|
2015-03-29 22:39:28 -04:00
|
|
|
env = tinymce.Env,
|
|
|
|
ua = window.navigator.userAgent,
|
|
|
|
isWin = ua.indexOf( 'Windows' ) > -1,
|
|
|
|
isWin8 = ( function() {
|
|
|
|
var match = ua.match( /Windows NT 6\.(\d)/ );
|
|
|
|
|
|
|
|
if ( match && match[1] > 1 ) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
}());
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-15 19:16:29 -04:00
|
|
|
if ( ! wp || ! wp.emoji || ! wp.emoji.replaceEmoji ) {
|
2015-03-11 18:49:28 -04:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2015-03-15 19:16:29 -04:00
|
|
|
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 );
|
|
|
|
}
|
|
|
|
|
2015-03-29 22:39:28 -04:00
|
|
|
if ( isWin8 ) {
|
|
|
|
// Windows 8+ emoji can be "typed" with the onscreen keyboard.
|
|
|
|
// That triggers the normal keyboard events, but not the 'input' event.
|
|
|
|
// Thankfully it sets keyCode 231 when the onscreen keyboard inserts any emoji.
|
|
|
|
editor.on( 'keyup', function( event ) {
|
|
|
|
var node;
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-29 22:39:28 -04:00
|
|
|
if ( event.keyCode === 231 ) {
|
|
|
|
node = editor.selection.getNode();
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-29 22:39:28 -04:00
|
|
|
if ( twemoji.test( node.textContent || node.innerText ) ) {
|
|
|
|
replaceEmoji( node );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
} else if ( ! isWin ) {
|
|
|
|
// In MacOS inserting emoji doesn't trigger the stanradr keyboard events.
|
|
|
|
// Thankfully it triggers the 'input' event.
|
|
|
|
// This works in Android and iOS as well.
|
|
|
|
editor.on( 'keydown keyup', function( event ) {
|
|
|
|
typing = ( event.type === 'keydown' );
|
|
|
|
} );
|
2015-03-12 19:00:27 -04:00
|
|
|
|
2015-03-29 22:50:27 -04:00
|
|
|
editor.on( 'input', function() {
|
2015-03-29 22:39:28 -04:00
|
|
|
if ( typing ) {
|
|
|
|
return;
|
2015-03-15 19:16:29 -04:00
|
|
|
}
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-29 22:39:28 -04:00
|
|
|
var bookmark,
|
|
|
|
selection = editor.selection,
|
|
|
|
node = selection.getNode();
|
|
|
|
|
|
|
|
if ( twemoji.test( node.textContent || node.innerText ) ) {
|
|
|
|
if ( env.webkit ) {
|
|
|
|
bookmark = selection.getBookmark();
|
|
|
|
}
|
|
|
|
|
|
|
|
replaceEmoji( node );
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-29 22:39:28 -04:00
|
|
|
if ( env.webkit ) {
|
|
|
|
selection.moveToBookmark( bookmark );
|
|
|
|
}
|
2015-03-15 19:16:29 -04:00
|
|
|
}
|
2015-03-29 22:39:28 -04:00
|
|
|
});
|
|
|
|
}
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-15 19:16:29 -04:00
|
|
|
editor.on( 'setcontent', function( event ) {
|
|
|
|
var selection = editor.selection,
|
|
|
|
node = selection.getNode();
|
2015-03-11 18:49:28 -04:00
|
|
|
|
2015-03-15 19:16:29 -04:00
|
|
|
if ( twemoji.test( node.textContent || node.innerText ) ) {
|
|
|
|
replaceEmoji( node );
|
2015-03-12 19:00:27 -04:00
|
|
|
|
2015-03-15 19:29:26 -04:00
|
|
|
// In IE all content in the editor is left selected after wp.emoji.parse()...
|
2015-03-15 19:16:29 -04:00
|
|
|
// Collapse the selection to the beginning.
|
2015-03-29 22:39:28 -04:00
|
|
|
if ( env.ie && env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
|
2015-03-15 19:16:29 -04:00
|
|
|
selection.collapse( true );
|
|
|
|
}
|
2015-03-12 19:00:27 -04:00
|
|
|
}
|
2015-03-11 18:49:28 -04:00
|
|
|
} );
|
|
|
|
|
2015-03-15 19:29:26 -04:00
|
|
|
// Convert Twemoji compatible pasted emoji replacement images into our format.
|
2015-03-15 19:16:29 -04:00
|
|
|
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 );
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-03-11 18:49:28 -04:00
|
|
|
editor.on( 'postprocess', function( event ) {
|
|
|
|
if ( event.content ) {
|
2015-03-29 22:39:28 -04:00
|
|
|
event.content = event.content.replace( /<img[^>]+data-wp-emoji="([^"]+)"[^>]*>/g, '$1' );
|
2015-03-11 18:49:28 -04:00
|
|
|
}
|
|
|
|
} );
|
|
|
|
|
|
|
|
editor.on( 'resolvename', function( event ) {
|
|
|
|
if ( event.target.nodeName === 'IMG' && editor.dom.getAttrib( event.target, 'data-wp-emoji' ) ) {
|
|
|
|
event.preventDefault();
|
|
|
|
}
|
|
|
|
} );
|
|
|
|
} );
|
2015-03-15 19:16:29 -04:00
|
|
|
} )( window.tinymce, window.wp, window.twemoji );
|