add colour n emojis back

package.json

@@ -18,6 +18,7 @@
     "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
     "cross-env": "^7.0.3",
+    "emoji-toolkit": "^6.6.0",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.0-alpha.2",

src/api/utils/RoomChatFormatter.ts

@@ -0,0 +1,78 @@
+import * as joypixels from 'emoji-toolkit';
+
+const allowedColours: Map<string, string> = new Map();
+allowedColours.set('r', 'red');
+allowedColours.set('b', 'blue');
+allowedColours.set('g', 'green');
+allowedColours.set('y', 'yellow');
+allowedColours.set('w', 'white');
+allowedColours.set('o', 'orange');
+allowedColours.set('c', 'cyan');
+allowedColours.set('br', 'brown');
+allowedColours.set('pr', 'purple');
+allowedColours.set('pk', 'pink');
+
+allowedColours.set('red', 'red');
+allowedColours.set('blue', 'blue');
+allowedColours.set('green', 'green');
+allowedColours.set('yellow', 'yellow');
+allowedColours.set('white', 'white');
+allowedColours.set('orange', 'orange');
+allowedColours.set('cyan', 'cyan');
+allowedColours.set('brown', 'brown');
+allowedColours.set('purple', 'purple');
+allowedColours.set('pink', 'pink');
+
+function encodeHTML(str: string)
+{
+    return str.replace(/([\u00A0-\u9999<>&])(.|$)/g, function(full, char, next) 
+{
+      if(char !== '&' || next !== '#')
+{
+        if(/[\u00A0-\u9999<>&]/.test(next))
+          next = '&#' + next.charCodeAt(0) + ';';
+
+        return '&#' + char.charCodeAt(0) + ';' + next;
+      }
+
+      return full;
+    });
+}
+
+
+export function RoomChatFormatter(content: string): string
+{
+    let result = '';
+
+    content = encodeHTML(content)
+    content = (joypixels.shortnameToUnicode(content) as string)
+
+    if(content.startsWith('@') && content.indexOf('@', 1) > -1)
+    {
+        let match = null;
+
+        while((match = /@[a-zA-Z]+@/g.exec(content)) !== null)
+        {
+            const colorTag = match[0].toString();
+            const colorName = colorTag.substr(1, colorTag.length - 2);
+            const text = content.replace(colorTag, '');
+
+            if(!allowedColours.has(colorName))
+            {
+                result = text;
+            }
+            else
+            {
+                const color = allowedColours.get(colorName);
+                result = '<span style="color: ' + color + '">' + text + '</span>';
+            }
+            break;
+        }
+    }
+    else
+    {
+        result = content;
+    }
+
+    return result;
+}

src/api/utils/index.ts

@@ -6,4 +6,5 @@ export * from './LocalizeShortNumber';
 export * from './LocalizeText';
 export * from './PlaySound';
 export * from './Randomizer';
+export * from './RoomChatFormatter';
 export * from './SoundNames';

src/components/room/widgets/chat/ChatWidgetMessageView.tsx

@@ -1,4 +1,5 @@
 import { FC, MouseEvent, useEffect, useRef, useState } from 'react';
+import { RoomChatFormatter } from '../../../../api';
 import { ChatBubbleMessage } from './common/ChatBubbleMessage';
 
 interface ChatWidgetMessageViewProps
@@ -48,6 +49,8 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
             chat.visible = true;
         }
 
+        chat.text = RoomChatFormatter(chat.text);
+
         return () =>
         {
             chat.elementRef = null;
@@ -65,7 +68,7 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = props =>
                 </div>
                 <div className="chat-content">
                     <b className="username mr-1" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
-                    <span className="message">{ chat.text }</span>
+                    <span className="message" dangerouslySetInnerHTML={{ __html: chat.text }} />
                 </div>
                 <div className="pointer"></div>
             </div>

yarn.lock

@@ -4709,6 +4709,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+emoji-toolkit@^6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-6.6.0.tgz#e7287c43a96f940ec4c5428cd7100a40e57518f1"
+  integrity sha512-pEu0kow2p1N8zCKnn/L6H0F3rWUBB3P3hVjr/O5yl1fK7N9jU4vO4G7EFapC5Y3XwZLUCY0FZbOPyTkH+4V2eQ==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"