Use ;; wrapper for emotes and change how they are injected

client/src/builtin/EmoteComponent.vue

@@ -1,6 +1,6 @@
 <template>
     <span class="bd-emotewrapper" v-tooltip="name">
-        <img class="bd-emote" :src="src" :alt="name"/>
+        <img class="bd-emote" :src="src" :alt="`;${name};`"/>
     </span>
 </template>
 

client/src/builtin/EmoteModule.js

@@ -21,34 +21,34 @@ export default class {
     static processMarkup(markup) {
         if (!emotesEnabled) return markup; // TODO Get it from setttings
         const newMarkup = [];
-        for (const [ti, t] of markup.entries()) {
-            if ('string' !== typeof t) {
-                newMarkup.push(t);
+        for (const child of markup) {
+            if ('string' !== typeof child) {
+                newMarkup.push(child);
                 continue;
             }
-
-            const words = t.split(/([^\s]+)([\s]|$)/g);
+            if (!this.testWord(child)) {
+                newMarkup.push(child);
+                continue;
+            }
+            const words = child.split(/([^\s]+)([\s]|$)/g);
             if (!words) continue;
             let text = null;
-            for (const [wi, word] of words.entries()) {
-                let isEmote = false;
-                if (this.testWord(word)) {
-                    isEmote = true;
-                }
+            for (const [wordIndex, word] of words.entries()) {
+                const isEmote = this.isEmote(word);
                 if (isEmote) {
                     if (text !== null) {
                         newMarkup.push(text);
                         text = null;
                     }
-                    newMarkup.push(this.React.createElement('span', { className: 'bd-emote-outer' }, word));
+                    newMarkup.push(this.React.createElement('span', { className: 'bd-emote-outer', 'data-bdemote-name': isEmote.name, 'data-bdemote-src': isEmote.src }));
                     continue;
                 }
                 if (text === null) {
-                    text = `${word}`;
+                    text = word;
                 } else {
-                    text += `${word}`;
+                    text += word;
                 }
-                if (wi === words.length - 1) {
+                if (wordIndex === words.length - 1) {
                     newMarkup.push(text);
                 }
             }
@@ -57,7 +57,7 @@ export default class {
     }
 
     static testWord(word) {
-        if (!/:[\w]+:/gmi.test(word)) return false;
+        if (!/;[\w]+;/gmi.test(word)) return false;
         return true;
     }
 
@@ -84,17 +84,17 @@ export default class {
         }
     }
 
-    static injectEmote(e) {
+    static injectEmote(root) {
         if (!emotesEnabled) return;
-        const isEmote = this.isEmote(e.textContent);
-        if (!isEmote) return;
+        const { bdemoteName, bdemoteSrc } = root.dataset;
+        if (!bdemoteName || !bdemoteSrc) return;
         VueInjector.inject(
-            e,
+            root,
             DOM.createElement('span'),
             { EmoteComponent },
-            `<EmoteComponent src="${isEmote.src}" name="${isEmote.name}"/>`
+            `<EmoteComponent src="${bdemoteSrc}" name="${bdemoteName}"/>`
         );
-        e.classList.add('bd-is-emote');
+        root.classList.add('bd-is-emote');
     }
 
     static injectEmotes(element) {
@@ -104,7 +104,7 @@ export default class {
 
     static isEmote(word) {
         if (!emotes) return null;
-        const name = word.replace(/:/g, '');
+        const name = word.replace(/;/g, '');
         const emote = emotes.find(emote => emote.id === name);
         if (!emote) return null;
         let { id, value } = emote;