diff --git a/CHANGELOG.md b/CHANGELOG.md index 7791d64..6ce2c48 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/public/javascripts/bingo-web.js b/public/javascripts/bingo-web.js index 7581771..7a961d5 100644 --- a/public/javascripts/bingo-web.js +++ b/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; + }; } /** diff --git a/routes/bingo.js b/routes/bingo.js index 043a8f9..192a39b 100644 --- a/routes/bingo.js +++ b/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