Improved chat parsing

- added automatic url to link parsing
- added automatic image url to image parsing
pull/24/head
Trivernis 6 years ago
parent 65dfa26bf4
commit c02f7c145d

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

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

@ -678,7 +678,7 @@ class MessageWrapper {
constructor(row) { constructor(row) {
this.id = row.id; this.id = row.id;
this.content = row.content; 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.author = new PlayerWrapper(row.player_id);
this.lobby = new LobbyWrapper(row.lobby_id); this.lobby = new LobbyWrapper(row.lobby_id);
this.type = row.type; this.type = row.type;
@ -1369,6 +1369,30 @@ function checkBingo(fg) {
return diagonalBingo || verticalCheck || horizontalCheck; 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 * Gets player data for a lobby
* @param lobbyWrapper * @param lobbyWrapper

Loading…
Cancel
Save