summaryrefslogtreecommitdiffstats
path: root/wp-includes/js/tinymce/plugins/wpemoji/plugin.js
blob: 84de774d70bc4c30cb6bacd3e4d7b5e44b0108c2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
( function( tinymce ) {
	tinymce.PluginManager.add( 'wpemoji', function( editor ) {
		var typing,
			wp = window.wp,
			settings = window._wpemojiSettings,
			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;
			}());

		if ( ! wp || ! wp.emoji || settings.supports.everything ) {
			return;
		}

		function setImgAttr( image ) {
			image.className = 'emoji';
			image.setAttribute( 'data-mce-resize', 'false' );
			image.setAttribute( 'data-mce-placeholder', '1' );
			image.setAttribute( 'data-wp-emoji', '1' );
		}

		function replaceEmoji( node ) {
			var imgAttr = {
				'data-mce-resize': 'false',
				'data-mce-placeholder': '1',
				'data-wp-emoji': '1'
			};

			wp.emoji.parse( node, { imgAttr: imgAttr } );
		}

		// Test if the node text contains emoji char(s) and replace.
		function parseNode( node ) {
			var selection, bookmark;

			if ( node && window.twemoji && window.twemoji.test( node.textContent || node.innerText ) ) {
				if ( env.webkit ) {
					selection = editor.selection;
					bookmark = selection.getBookmark();
				}

				replaceEmoji( node );

				if ( env.webkit ) {
					selection.moveToBookmark( bookmark );
				}
			}
		}

		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 ) {
				if ( event.keyCode === 231 ) {
					parseNode( editor.selection.getNode() );
				}
			} );
		} 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' );
			} );

			editor.on( 'input', function() {
				if ( typing ) {
					return;
				}

				parseNode( editor.selection.getNode() );
			});
		}

		editor.on( 'setcontent', function( event ) {
			var selection = editor.selection,
				node = selection.getNode();

			if ( window.twemoji && window.twemoji.test( node.textContent || node.innerText ) ) {
				replaceEmoji( node );

				// In IE all content in the editor is left selected after wp.emoji.parse()...
				// Collapse the selection to the beginning.
				if ( env.ie && env.ie < 9 && event.load && node && node.nodeName === 'BODY' ) {
					selection.collapse( true );
				}
			}
		} );

		// Convert Twemoji compatible pasted emoji replacement images into our format.
		editor.on( 'PastePostProcess', function( event ) {
			if ( window.twemoji ) {
				tinymce.each( editor.dom.$( 'img.emoji', event.node ), function( image ) {
					if ( image.alt && window.twemoji.test( image.alt ) ) {
						setImgAttr( image );
					}
				});
			}
		});

		editor.on( 'postprocess', function( event ) {
			if ( event.content ) {
				event.content = event.content.replace( /<img[^>]+data-wp-emoji="[^>]+>/g, function( img ) {
					var alt = img.match( /alt="([^"]+)"/ );

					if ( alt && alt[1] ) {
						return alt[1];
					}

					return img;
				});
			}
		} );

		editor.on( 'resolvename', function( event ) {
			if ( event.target.nodeName === 'IMG' && editor.dom.getAttrib( event.target, 'data-wp-emoji' ) ) {
				event.preventDefault();
			}
		} );
	} );
} )( window.tinymce );