Fast path for emojifying strings
Emojione's regex for detecting emoji is *enourmous* and we were running it on every display name, room name, message etc every time those components mounted. Add a much simpler regex to rule out the majority of strings that contain no emoji and fast-path them. Makes room switching about 10% faster (in my tests with all the profiling turned on).pull/21833/head
parent
1f84c68180
commit
ec3ff529e7
|
@ -31,13 +31,28 @@ emojione.imagePathPNG = 'emojione/png/';
|
||||||
// Use SVGs for emojis
|
// Use SVGs for emojis
|
||||||
emojione.imageType = 'svg';
|
emojione.imageType = 'svg';
|
||||||
|
|
||||||
|
const SIMPLE_EMOJI_PATTERN = /([\ud800-\udbff])([\udc00-\udfff])/;
|
||||||
const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp+"+", "gi");
|
const EMOJI_REGEX = new RegExp(emojione.unicodeRegexp+"+", "gi");
|
||||||
const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
|
const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Return true if the given string contains emoji
|
||||||
|
* Uses a much, much simpler regex than emojione's so will give false
|
||||||
|
* positives, but useful for fast-path testing strings to see if they
|
||||||
|
* need emojification.
|
||||||
|
* unicodeToImage uses this function.
|
||||||
|
*/
|
||||||
|
export function containsEmoji(str) {
|
||||||
|
return SIMPLE_EMOJI_PATTERN.test(str);
|
||||||
|
}
|
||||||
|
|
||||||
/* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js
|
/* modified from https://github.com/Ranks/emojione/blob/master/lib/js/emojione.js
|
||||||
* because we want to include emoji shortnames in title text
|
* because we want to include emoji shortnames in title text
|
||||||
*/
|
*/
|
||||||
export function unicodeToImage(str) {
|
export function unicodeToImage(str) {
|
||||||
|
// fast path
|
||||||
|
if (!containsEmoji(str)) return str;
|
||||||
|
|
||||||
let replaceWith, unicode, alt, short, fname;
|
let replaceWith, unicode, alt, short, fname;
|
||||||
const mappedUnicode = emojione.mapUnicodeToShort();
|
const mappedUnicode = emojione.mapUnicodeToShort();
|
||||||
|
|
||||||
|
|
|
@ -15,12 +15,19 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {emojifyText} from '../../../HtmlUtils';
|
import {emojifyText, containsEmoji} from '../../../HtmlUtils';
|
||||||
|
|
||||||
export default function EmojiText(props) {
|
export default function EmojiText(props) {
|
||||||
const {element, children, ...restProps} = props;
|
const {element, children, ...restProps} = props;
|
||||||
|
|
||||||
|
// fast path: simple regex to detect strings that don't contain
|
||||||
|
// emoji and just return them
|
||||||
|
if (containsEmoji(children)) {
|
||||||
restProps.dangerouslySetInnerHTML = emojifyText(children);
|
restProps.dangerouslySetInnerHTML = emojifyText(children);
|
||||||
return React.createElement(element, restProps);
|
return React.createElement(element, restProps);
|
||||||
|
} else {
|
||||||
|
return React.createElement(element, restProps, children);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
EmojiText.propTypes = {
|
EmojiText.propTypes = {
|
||||||
|
|
Loading…
Reference in New Issue