w0bm/f0bm
4
0
Fork 1
Code Pull Requests Activity

emojis now display with the correct height

Browse Source
This commit is contained in:
Kibi Kelburton
2026-01-27 00:14:34 +01:00
parent 966b04dbaf
commit f03b938fd0
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/s/js/user_comments.js
View File

@@ -87,7 +87,7 @@ class UserCommentSystem {
renderEmoji(match, name) { renderEmoji(match, name) {
if (this.customEmojis && this.customEmojis[name]) { if (this.customEmojis && this.customEmojis[name]) {
return `<img src="${this.customEmojis[name]}" style="height:24px;vertical-align:middle;" alt="${name}">`; return `<img src="${this.customEmojis[name]}" style="height:60px;vertical-align:middle;" alt="${name}">`;
} }
return match; return match;
} }
@@ -106,11 +106,18 @@ class UserCommentSystem {
// Also handle raw > just in case // Also handle raw > just in case
safe = safe.replace(/^>(?=[^ ])/gm, '> '); safe = safe.replace(/^>(?=[^ ])/gm, '> ');
// Fix Images: Server sends <img src="..." ...> -> convert to markdown ![]() // Fix Images: Server sends <img src="..." ...> -> convert to markdown ![]() or :emoji:
// This avoids them being escaped by our HTML escaping later // This avoids them being escaped by our HTML escaping later
safe = safe.replace(/<img\s+[^>]*src="([^"]+)"[^>]*>/g, (match, src) => { safe = safe.replace(/<img\s+[^>]*src="([^"]+)"[^>]*>/g, (match, src) => {
let altMatch = match.match(/alt="([^"]*)"/); let altMatch = match.match(/alt="([^"]*)"/);
let alt = altMatch ? altMatch[1] : ''; let alt = altMatch ? altMatch[1] : '';
// Check if it's a known emoji (convert back to :code: for consistent rendering)
// We check if the name exists in our map. Validating src is good but name check is usually enough here.
if (alt && this.customEmojis && this.customEmojis[alt]) {
return `:${alt}:`;
}
return `![${alt}](${src})`; return `![${alt}](${src})`;
}); });
@@ -149,23 +156,20 @@ class UserCommentSystem {
// We add a header indicating which item this comment belongs to // We add a header indicating which item this comment belongs to
return ` return `
<div class="user-comment-wrapper" style="margin-bottom: 20px; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 4px;"> <div class="comment" id="c${c.id}">
<div style="margin-bottom: 10px; font-size: 0.9em; color: #aaa; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px;"> <div class="comment-avatar">
Comment on <a href="/${c.item_id}#c${c.id}" style="color: #fff; font-weight: bold;">Item #${c.item_id}</a> <a href="/${c.item_id}">
<img src="/t/${c.item_id}.webp" alt="Item Thumbnail">
</a>
</div> </div>
<div class="comment-body">
<div class="comment" id="c${c.id}" style="border:none; padding:0; background:transparent;"> <div class="comment-meta">
<div class="comment-avatar"> <span class="comment-author">${this.username}</span>
<a href="/${c.item_id}"><img src="/t/${c.item_id}.webp" alt="Item Thumbnail" style="width:50px; height:50px; object-fit:cover; border-radius:4px;"></a> <span class="comment-time">${date}</span>
</div> <a href="/${c.item_id}#c${c.id}" class="comment-permalink">#${c.id}</a>
<div class="comment-body"> <span class="comment-item-ref">on <a href="/${c.item_id}">Item #${c.item_id}</a></span>
<div class="comment-meta">
<span class="comment-author">${this.username}</span>
<span class="comment-time">${date}</span>
<a href="/${c.item_id}#c${c.id}" class="comment-permalink">#${c.id}</a>
</div>
<div class="comment-content">${content}</div>
</div> </div>
<div class="comment-content">${content}</div>
</div> </div>
</div> </div>
`; `;