diff --git a/app/javascript/mastodon/emoji.js b/app/javascript/mastodon/emoji.js index 01d01fb720..d0df71ea37 100644 --- a/app/javascript/mastodon/emoji.js +++ b/app/javascript/mastodon/emoji.js @@ -19,16 +19,41 @@ const unicodeToImage = str => { }); }; -const shortnameToImage = str => str.replace(emojione.regShortNames, shortname => { - if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emojione.emojioneList)) { - return shortname; +const shortnameToImage = str => { + // This walks through the string from end to start, ignoring any tags (

,
, etc.) + // and replacing valid shortnames like :smile: and :wink: that _aren't_ within + // tags with an 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 = `${alt}`; + 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; + } } - - const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1]; - const alt = emojione.convert(unicode.toUpperCase()); - - return `${alt}`; -}); + return str; +}; export default function emojify(text) { return toImage(text); diff --git a/spec/javascript/components/emojify.test.js b/spec/javascript/components/emojify.test.js new file mode 100644 index 0000000000..7a496623e5 --- /dev/null +++ b/spec/javascript/components/emojify.test.js @@ -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( + '😄'); + }); + + it('does a double emojify', () => { + expect(emojify(':smile: and :wink:')).to.equal( + '😄 and 😉'); + }); + + it('works with random colons', () => { + expect(emojify(':smile: : :wink:')).to.equal( + '😄 : 😉'); + expect(emojify(':smile::::wink:')).to.equal( + '😄::😉'); + expect(emojify(':smile:::::wink:')).to.equal( + '😄:::😉'); + }); + + it('works with tags', () => { + expect(emojify('

:smile:

')).to.equal( + '

😄

'); + expect(emojify('

:smile:

and

:wink:

')).to.equal( + '

😄

and

😉

'); + }); + + it('ignores unknown shortcodes', () => { + expect(emojify(':foobarbazfake:')).to.equal(':foobarbazfake:'); + }); + + it('ignores shortcodes inside of tags', () => { + expect(emojify('

')).to.equal('

'); + }); + + it('works with unclosed tags', () => { + expect(emojify('hello>')).to.equal('hello>'); + expect(emojify(' { + expect(emojify('smile:')).to.equal('smile:'); + expect(emojify(':smile')).to.equal(':smile'); + }); + +});