Better handling of mentions

This commit is contained in:
Lim Chee Aun 2023-04-20 13:40:42 +08:00
parent b1b7fa1a2e
commit b2827e690d
2 changed files with 20 additions and 12 deletions

View file

@ -380,9 +380,9 @@
filter: none;
image-rendering: auto;
}
.status .content a:not(.mention):not(:has(span)) {
/* .status .content a:not(.mention):not(:has(span)) {
color: inherit;
}
} */
.status.compact-thread .spoiler-badge {
font-size: smaller;

View file

@ -10,23 +10,31 @@ function enhanceContent(content, opts = {}) {
// Add target="_blank" to all links with no target="_blank"
// E.g. `note` in `account`
const links = Array.from(dom.querySelectorAll('a:not([target="_blank"])'));
links.forEach((link) => {
const noTargetBlankLinks = Array.from(
dom.querySelectorAll('a:not([target="_blank"])'),
);
noTargetBlankLinks.forEach((link) => {
link.setAttribute('target', '_blank');
});
// Spanify un-spanned mentions
const mentionLinks = Array.from(dom.querySelectorAll('a[href].mention'));
mentionLinks.forEach((link) => {
if (link.querySelector('*')) {
return;
}
const text = link.innerText;
const notMentionLinks = Array.from(
dom.querySelectorAll('a[href]:not(.mention)'),
);
notMentionLinks.forEach((link) => {
const text = link.innerText.trim();
const hasChildren = link.querySelector('*');
// If text looks like @username@domain, then it's a mention
if (/^@[^@]+@[^@]+$/g.test(text)) {
if (/^@[^@]+(@[^@]+)?$/g.test(text)) {
// Only show @username
const username = text.split('@')[1];
link.innerHTML = `@<span>${username}</span>`;
if (!hasChildren) link.innerHTML = `@<span>${username}</span>`;
link.classList.add('mention');
}
// If text looks like #hashtag, then it's a hashtag
if (/^#[^#]+$/g.test(text)) {
if (!hasChildren) link.innerHTML = `#<span>${text}</span>`;
link.classList.add('mention', 'hashtag');
}
});