Faster emojify() algorithm, avoid regex replace (#4019)

* Faster emojify() algorithm, avoid regex replace

* add semicolon

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 (<p>, <br>, etc.)
+  // 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;
+    }
   }
-
-  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" />`;
-});
+  return str;
+};
 
 export default function emojify(text) {
   return toImage(text);

spec/javascript/components/emojify.test.js

+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');
+  });
+
+});