mirror of
https://github.com/lunaisnotaboy/mastodon.git
synced 2024-11-17 20:32:56 +00:00
Faster emojify() algorithm, avoid regex replace (#4019)
* Faster emojify() algorithm, avoid regex replace * add semicolon
This commit is contained in:
parent
6dd5eac7fc
commit
a978b88997
|
@ -19,16 +19,41 @@ const unicodeToImage = str => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const shortnameToImage = str => str.replace(emojione.regShortNames, shortname => {
|
const shortnameToImage = str => {
|
||||||
if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emojione.emojioneList)) {
|
// This walks through the string from end to start, ignoring any tags (<p>, <br>, etc.)
|
||||||
return shortname;
|
// and replacing valid shortnames like :smile: and :wink: that _aren't_ within
|
||||||
|
// tags with an <img> version.
|
||||||
|
// The goal is to be the same as an emojione.regShortNames replacement, but faster.
|
||||||
|
// The reason we go backwards is because then we can replace substrings as we go.
|
||||||
|
let i = str.length;
|
||||||
|
let insideTag = false;
|
||||||
|
let insideShortname = false;
|
||||||
|
let shortnameEndIndex = -1;
|
||||||
|
while (i--) {
|
||||||
|
const char = str.charAt(i);
|
||||||
|
if (insideShortname && char === ':') {
|
||||||
|
const shortname = str.substring(i, shortnameEndIndex + 1);
|
||||||
|
if (shortname in emojione.emojioneList) {
|
||||||
|
const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1];
|
||||||
|
const alt = emojione.convert(unicode.toUpperCase());
|
||||||
|
const replacement = `<img draggable="false" class="emojione" alt="${alt}" title="${shortname}" src="/emoji/${unicode}.svg" />`;
|
||||||
|
str = str.substring(0, i) + replacement + str.substring(shortnameEndIndex + 1);
|
||||||
|
} else {
|
||||||
|
i++; // stray colon, try again
|
||||||
|
}
|
||||||
|
insideShortname = false;
|
||||||
|
} else if (insideTag && char === '<') {
|
||||||
|
insideTag = false;
|
||||||
|
} else if (char === '>') {
|
||||||
|
insideTag = true;
|
||||||
|
insideShortname = false;
|
||||||
|
} else if (!insideTag && char === ':') {
|
||||||
|
insideShortname = true;
|
||||||
|
shortnameEndIndex = i;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
return str;
|
||||||
const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1];
|
};
|
||||||
const alt = emojione.convert(unicode.toUpperCase());
|
|
||||||
|
|
||||||
return `<img draggable="false" class="emojione" alt="${alt}" title="${shortname}" src="/emoji/${unicode}.svg" />`;
|
|
||||||
});
|
|
||||||
|
|
||||||
export default function emojify(text) {
|
export default function emojify(text) {
|
||||||
return toImage(text);
|
return toImage(text);
|
||||||
|
|
49
spec/javascript/components/emojify.test.js
Normal file
49
spec/javascript/components/emojify.test.js
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import { expect } from 'chai';
|
||||||
|
import emojify from '../../../app/javascript/mastodon/emoji';
|
||||||
|
|
||||||
|
describe('emojify', () => {
|
||||||
|
it('does a basic emojify', () => {
|
||||||
|
expect(emojify(':smile:')).to.equal(
|
||||||
|
'<img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" />');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does a double emojify', () => {
|
||||||
|
expect(emojify(':smile: and :wink:')).to.equal(
|
||||||
|
'<img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" /> and <img draggable="false" class="emojione" alt="😉" title=":wink:" src="/emoji/1f609.svg" />');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('works with random colons', () => {
|
||||||
|
expect(emojify(':smile: : :wink:')).to.equal(
|
||||||
|
'<img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" /> : <img draggable="false" class="emojione" alt="😉" title=":wink:" src="/emoji/1f609.svg" />');
|
||||||
|
expect(emojify(':smile::::wink:')).to.equal(
|
||||||
|
'<img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" />::<img draggable="false" class="emojione" alt="😉" title=":wink:" src="/emoji/1f609.svg" />');
|
||||||
|
expect(emojify(':smile:::::wink:')).to.equal(
|
||||||
|
'<img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" />:::<img draggable="false" class="emojione" alt="😉" title=":wink:" src="/emoji/1f609.svg" />');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('works with tags', () => {
|
||||||
|
expect(emojify('<p>:smile:</p>')).to.equal(
|
||||||
|
'<p><img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" /></p>');
|
||||||
|
expect(emojify('<p>:smile:</p> and <p>:wink:</p>')).to.equal(
|
||||||
|
'<p><img draggable="false" class="emojione" alt="😄" title=":smile:" src="/emoji/1f604.svg" /></p> and <p><img draggable="false" class="emojione" alt="😉" title=":wink:" src="/emoji/1f609.svg" /></p>');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('ignores unknown shortcodes', () => {
|
||||||
|
expect(emojify(':foobarbazfake:')).to.equal(':foobarbazfake:');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('ignores shortcodes inside of tags', () => {
|
||||||
|
expect(emojify('<p data-foo=":smile:"></p>')).to.equal('<p data-foo=":smile:"></p>');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('works with unclosed tags', () => {
|
||||||
|
expect(emojify('hello>')).to.equal('hello>');
|
||||||
|
expect(emojify('<hello')).to.equal('<hello');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('works with unclosed shortcodes', () => {
|
||||||
|
expect(emojify('smile:')).to.equal('smile:');
|
||||||
|
expect(emojify(':smile')).to.equal(':smile');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
Loading…
Reference in a new issue