1/**
  2 * @output wp-includes/js/wp-emoji-loader.js
  3 */
  4
  5/* eslint-env es6 */
  6
  7// Note: This is loaded as a script module, so there is no need for an IIFE to prevent pollution of the global scope.
  8
  9/**
 10 * Emoji Settings as exported in PHP via _print_emoji_detection_script().
 11 * @typedef WPEmojiSettings
 12 * @type {object}
 13 * @property {?object} source
 14 * @property {?string} source.concatemoji
 15 * @property {?string} source.twemoji
 16 * @property {?string} source.wpemoji
 17 */
 18
 19const settings = /** @type {WPEmojiSettings} */ (
 20	JSON.parse( document.getElementById( 'wp-emoji-settings' ).textContent )
 21);
 22
 23// For compatibility with other scripts that read from this global, in particular wp-includes/js/wp-emoji.js (source file: js/_enqueues/wp/emoji.js).
 24window._wpemojiSettings = settings;
 25
 26/**
 27 * Support tests.
 28 * @typedef SupportTests
 29 * @type {object}
 30 * @property {?boolean} flag
 31 * @property {?boolean} emoji
 32 */
 33
 34const sessionStorageKey = 'wpEmojiSettingsSupports';
 35const tests = [ 'flag', 'emoji' ];
 36
 37/**
 38 * Checks whether the browser supports offloading to a Worker.
 39 *
 40 * @since 6.3.0
 41 *
 42 * @private
 43 *
 44 * @returns {boolean}
 45 */
 46function supportsWorkerOffloading() {
 47	return (
 48		typeof Worker !== 'undefined' &&
 49		typeof OffscreenCanvas !== 'undefined' &&
 50		typeof URL !== 'undefined' &&
 51		URL.createObjectURL &&
 52		typeof Blob !== 'undefined'
 53	);
 54}
 55
 56/**
 57 * @typedef SessionSupportTests
 58 * @type {object}
 59 * @property {number} timestamp
 60 * @property {SupportTests} supportTests
 61 */
 62
 63/**
 64 * Get support tests from session.
 65 *
 66 * @since 6.3.0
 67 *
 68 * @private
 69 *
 70 * @returns {?SupportTests} Support tests, or null if not set or older than 1 week.
 71 */
 72function getSessionSupportTests() {
 73	try {
 74		/** @type {SessionSupportTests} */
 75		const item = JSON.parse(
 76			sessionStorage.getItem( sessionStorageKey )
 77		);
 78		if (
 79			typeof item === 'object' &&
 80			typeof item.timestamp === 'number' &&
 81			new Date().valueOf() < item.timestamp + 604800 && // Note: Number is a week in seconds.
 82			typeof item.supportTests === 'object'
 83		) {
 84			return item.supportTests;
 85		}
 86	} catch ( e ) {}
 87	return null;
 88}
 89
 90/**
 91 * Persist the supports in session storage.
 92 *
 93 * @since 6.3.0
 94 *
 95 * @private
 96 *
 97 * @param {SupportTests} supportTests Support tests.
 98 */
 99function setSessionSupportTests( supportTests ) {
100	try {
101		/** @type {SessionSupportTests} */
102		const item = {
103			supportTests: supportTests,
104			timestamp: new Date().valueOf()
105		};
106
107		sessionStorage.setItem(
108			sessionStorageKey,
109			JSON.stringify( item )
110		);
111	} catch ( e ) {}
112}
113
114/**
115 * Checks if two sets of Emoji characters render the same visually.
116 *
117 * This is used to determine if the browser is rendering an emoji with multiple data points
118 * correctly. set1 is the emoji in the correct form, using a zero-width joiner. set2 is the emoji
119 * in the incorrect form, using a zero-width space. If the two sets render the same, then the browser
120 * does not support the emoji correctly.
121 *
122 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
123 * scope. Everything must be passed by parameters.
124 *
125 * @since 4.9.0
126 *
127 * @private
128 *
129 * @param {CanvasRenderingContext2D} context 2D Context.
130 * @param {string} set1 Set of Emoji to test.
131 * @param {string} set2 Set of Emoji to test.
132 *
133 * @return {boolean} True if the two sets render the same.
134 */
135function emojiSetsRenderIdentically( context, set1, set2 ) {
136	// Cleanup from previous test.
137	context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
138	context.fillText( set1, 0, 0 );
139	const rendered1 = new Uint32Array(
140		context.getImageData(
141			0,
142			0,
143			context.canvas.width,
144			context.canvas.height
145		).data
146	);
147
148	// Cleanup from previous test.
149	context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
150	context.fillText( set2, 0, 0 );
151	const rendered2 = new Uint32Array(
152		context.getImageData(
153			0,
154			0,
155			context.canvas.width,
156			context.canvas.height
157		).data
158	);
159
160	return rendered1.every( ( rendered2Data, index ) => {
161		return rendered2Data === rendered2[ index ];
162	} );
163}
164
165/**
166 * Checks if the center point of a single emoji is empty.
167 *
168 * This is used to determine if the browser is rendering an emoji with a single data point
169 * correctly. The center point of an incorrectly rendered emoji will be empty. A correctly
170 * rendered emoji will have a non-zero value at the center point.
171 *
172 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
173 * scope. Everything must be passed by parameters.
174 *
175 * @since 6.8.2
176 *
177 * @private
178 *
179 * @param {CanvasRenderingContext2D} context 2D Context.
180 * @param {string} emoji Emoji to test.
181 *
182 * @return {boolean} True if the center point is empty.
183 */
184function emojiRendersEmptyCenterPoint( context, emoji ) {
185	// Cleanup from previous test.
186	context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
187	context.fillText( emoji, 0, 0 );
188
189	// Test if the center point (16, 16) is empty (0,0,0,0).
190	const centerPoint = context.getImageData(16, 16, 1, 1);
191	for ( let i = 0; i < centerPoint.data.length; i++ ) {
192		if ( centerPoint.data[ i ] !== 0 ) {
193			// Stop checking the moment it's known not to be empty.
194			return false;
195		}
196	}
197
198	return true;
199}
200
201/**
202 * Determines if the browser properly renders Emoji that Twemoji can supplement.
203 *
204 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
205 * scope. Everything must be passed by parameters.
206 *
207 * @since 4.2.0
208 *
209 * @private
210 *
211 * @param {CanvasRenderingContext2D} context 2D Context.
212 * @param {string} type Whether to test for support of "flag" or "emoji".
213 * @param {Function} emojiSetsRenderIdentically Reference to emojiSetsRenderIdentically function, needed due to minification.
214 * @param {Function} emojiRendersEmptyCenterPoint Reference to emojiRendersEmptyCenterPoint function, needed due to minification.
215 *
216 * @return {boolean} True if the browser can render emoji, false if it cannot.
217 */
218function browserSupportsEmoji( context, type, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint ) {
219	let isIdentical;
220
221	switch ( type ) {
222		case 'flag':
223			/*
224			 * Test for Transgender flag compatibility. Added in Unicode 13.
225			 *
226			 * To test for support, we try to render it, and compare the rendering to how it would look if
227			 * the browser doesn't render it correctly (white flag emoji + transgender symbol).
228			 */
229			isIdentical = emojiSetsRenderIdentically(
230				context,
231				'\uD83C\uDFF3\uFE0F\u200D\u26A7\uFE0F', // as a zero-width joiner sequence
232				'\uD83C\uDFF3\uFE0F\u200B\u26A7\uFE0F' // separated by a zero-width space
233			);
234
235			if ( isIdentical ) {
236				return false;
237			}
238
239			/*
240			 * Test for Sark flag compatibility. This is the least supported of the letter locale flags,
241			 * so gives us an easy test for full support.
242			 *
243			 * To test for support, we try to render it, and compare the rendering to how it would look if
244			 * the browser doesn't render it correctly ([C] + [Q]).
245			 */
246			isIdentical = emojiSetsRenderIdentically(
247				context,
248				'\uD83C\uDDE8\uD83C\uDDF6', // as the sequence of two code points
249				'\uD83C\uDDE8\u200B\uD83C\uDDF6' // as the two code points separated by a zero-width space
250			);
251
252			if ( isIdentical ) {
253				return false;
254			}
255
256			/*
257			 * Test for English flag compatibility. England is a country in the United Kingdom, it
258			 * does not have a two letter locale code but rather a five letter sub-division code.
259			 *
260			 * To test for support, we try to render it, and compare the rendering to how it would look if
261			 * the browser doesn't render it correctly (black flag emoji + [G] + [B] + [E] + [N] + [G]).
262			 */
263			isIdentical = emojiSetsRenderIdentically(
264				context,
265				// as the flag sequence
266				'\uD83C\uDFF4\uDB40\uDC67\uDB40\uDC62\uDB40\uDC65\uDB40\uDC6E\uDB40\uDC67\uDB40\uDC7F',
267				// with each code point separated by a zero-width space
268				'\uD83C\uDFF4\u200B\uDB40\uDC67\u200B\uDB40\uDC62\u200B\uDB40\uDC65\u200B\uDB40\uDC6E\u200B\uDB40\uDC67\u200B\uDB40\uDC7F'
269			);
270
271			return ! isIdentical;
272		case 'emoji':
273			/*
274			 * Is there a large, hairy, humanoid mythical creature living in the browser?
275			 *
276			 * To test for Emoji 17.0 support, try to render a new emoji: Hairy Creature.
277			 *
278			 * The hairy creature emoji is a single code point emoji. Testing for browser
279			 * support required testing the center point of the emoji to see if it is empty.
280			 *
281			 * 0xD83E 0x1FAC8 (\uD83E\u1FAC8) == 🫈 Hairy creature.
282			 *
283			 * When updating this test, please ensure that the emoji is either a single code point
284			 * or switch to using the emojiSetsRenderIdentically function and testing with a zero-width
285			 * joiner vs a zero-width space.
286			 */
287			const notSupported = emojiRendersEmptyCenterPoint( context, '\uD83E\u1FAC8' );
288			return ! notSupported;
289	}
290
291	return false;
292}
293
294/**
295 * Checks emoji support tests.
296 *
297 * This function may be serialized to run in a Worker. Therefore, it cannot refer to variables from the containing
298 * scope. Everything must be passed by parameters.
299 *
300 * @since 6.3.0
301 *
302 * @private
303 *
304 * @param {string[]} tests Tests.
305 * @param {Function} browserSupportsEmoji Reference to browserSupportsEmoji function, needed due to minification.
306 * @param {Function} emojiSetsRenderIdentically Reference to emojiSetsRenderIdentically function, needed due to minification.
307 * @param {Function} emojiRendersEmptyCenterPoint Reference to emojiRendersEmptyCenterPoint function, needed due to minification.
308 *
309 * @return {SupportTests} Support tests.
310 */
311function testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint ) {
312	let canvas;
313	if (
314		typeof WorkerGlobalScope !== 'undefined' &&
315		self instanceof WorkerGlobalScope
316	) {
317		canvas = new OffscreenCanvas( 300, 150 ); // Dimensions are default for HTMLCanvasElement.
318	} else {
319		canvas = document.createElement( 'canvas' );
320	}
321
322	const context = canvas.getContext( '2d', { willReadFrequently: true } );
323
324	/*
325	 * Chrome on OS X added native emoji rendering in M41. Unfortunately,
326	 * it doesn't work when the font is bolder than 500 weight. So, we
327	 * check for bold rendering support to avoid invisible emoji in Chrome.
328	 */
329	context.textBaseline = 'top';
330	context.font = '600 32px Arial';
331
332	const supports = {};
333	tests.forEach( ( test ) => {
334		supports[ test ] = browserSupportsEmoji( context, test, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint );
335	} );
336	return supports;
337}
338
339/**
340 * Adds a script to the head of the document.
341 *
342 * @ignore
343 *
344 * @since 4.2.0
345 *
346 * @param {string} src The url where the script is located.
347 *
348 * @return {void}
349 */
350function addScript( src ) {
351	const script = document.createElement( 'script' );
352	script.src = src;
353	script.defer = true;
354	document.head.appendChild( script );
355}
356
357settings.supports = {
358	everything: true,
359	everythingExceptFlag: true
360};
361
362// Obtain the emoji support from the browser, asynchronously when possible.
363new Promise( ( resolve ) => {
364	let supportTests = getSessionSupportTests();
365	if ( supportTests ) {
366		resolve( supportTests );
367		return;
368	}
369
370	if ( supportsWorkerOffloading() ) {
371		try {
372			// Note that the functions are being passed as arguments due to minification.
373			const workerScript =
374				'postMessage(' +
375				testEmojiSupports.toString() +
376				'(' +
377				[
378					JSON.stringify( tests ),
379					browserSupportsEmoji.toString(),
380					emojiSetsRenderIdentically.toString(),
381					emojiRendersEmptyCenterPoint.toString()
382				].join( ',' ) +
383				'));';
384			const blob = new Blob( [ workerScript ], {
385				type: 'text/javascript'
386			} );
387			const worker = new Worker( URL.createObjectURL( blob ), { name: 'wpTestEmojiSupports' } );
388			worker.onmessage = ( event ) => {
389				supportTests = event.data;
390				setSessionSupportTests( supportTests );
391				worker.terminate();
392				resolve( supportTests );
393			};
394			return;
395		} catch ( e ) {}
396	}
397
398	supportTests = testEmojiSupports( tests, browserSupportsEmoji, emojiSetsRenderIdentically, emojiRendersEmptyCenterPoint );
399	setSessionSupportTests( supportTests );
400	resolve( supportTests );
401} )
402	// Once the browser emoji support has been obtained from the session, finalize the settings.
403	.then( ( supportTests ) => {
404		/*
405		 * Tests the browser support for flag emojis and other emojis, and adjusts the
406		 * support settings accordingly.
407		 */
408		for ( const test in supportTests ) {
409			settings.supports[ test ] = supportTests[ test ];
410
411			settings.supports.everything =
412				settings.supports.everything && settings.supports[ test ];
413
414			if ( 'flag' !== test ) {
415				settings.supports.everythingExceptFlag =
416					settings.supports.everythingExceptFlag &&
417					settings.supports[ test ];
418			}
419		}
420
421		settings.supports.everythingExceptFlag =
422			settings.supports.everythingExceptFlag &&
423			! settings.supports.flag;
424
425		// When the browser can not render everything we need to load a polyfill.
426		if ( ! settings.supports.everything ) {
427			const src = settings.source || {};
428
429			if ( src.concatemoji ) {
430				addScript( src.concatemoji );
431			} else if ( src.wpemoji && src.twemoji ) {
432				addScript( src.twemoji );
433				addScript( src.wpemoji );
434			}
435		}
436	} );
437