Improved chat parsing

- added automatic url to link parsing
- added automatic image url to image parsing

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - socket.io for real time communication
 - compression and minify
+- auto replacing image links with images in the chat
+- auto replacing urls to urls with link in the chat
 
 ## Changed
 
@@ -24,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Socket reconnect doesn't load old messages (#20)
 - error message on create ui load
+- chat doesn't scroll down when an image is send
 
 ## [0.1.1] - 2019-05-21
 

public/javascripts/bingo-web.js

@@ -610,6 +610,10 @@ function addChatMessage(messageObject, player) {
     let chatContent = document.querySelector('#chat-content');
     chatContent.appendChild(msgSpan);
     chatContent.scrollTop = chatContent.scrollHeight;       // auto-scroll to bottom
+
+    msgSpan.querySelector('img').onload = () => {
+        chatContent.scrollTop = chatContent.scrollHeight;
+    };
 }
 
 /**

routes/bingo.js

@@ -678,7 +678,7 @@ class MessageWrapper {
     constructor(row) {
         this.id = row.id;
         this.content = row.content;
-        this.htmlContent = md.renderInline(this.content);
+        this.htmlContent = md.renderInline(preMarkdownParse(this.content));
         this.author = new PlayerWrapper(row.player_id);
         this.lobby = new LobbyWrapper(row.lobby_id);
         this.type = row.type;
@@ -1369,6 +1369,30 @@ function checkBingo(fg) {
     return diagonalBingo || verticalCheck || horizontalCheck;
 }
 
+/**
+ * Parses the message and replaces all links with markdown-links and images with markdown-images.
+ * @param message {String} - the raw message
+ */
+function preMarkdownParse(message) {
+    let linkMatch = /https?:\/\/((([\w-]+\.)+[\w-]+)(\S*))/g;
+    let imageMatch = /.*\.(\w+)/g;
+    let imageExtensions = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg'];
+    let links = message.match(linkMatch);
+
+    if (links)
+        for (let link of links) {
+            let linkGroups = linkMatch.exec(link);
+            let imgGroups = imageMatch.exec(link);
+
+            if (imgGroups && imgGroups[1] && imageExtensions.includes(imgGroups[1]))
+                message = message.replace(link, `![${linkGroups[1]}](${link})`);
+            else
+                message = message.replace(link, `[${linkGroups[1]}](${link})`);
+        }
+
+    return message;
+}
+
 /**
  * Gets player data for a lobby
  * @param lobbyWrapper