Enhance the account note and make sure links open in new window

This commit is contained in:
Lim Chee Aun 2022-12-10 19:16:11 +08:00
parent 12a64e4507
commit b26f1204c7
2 changed files with 21 additions and 7 deletions

View file

@ -2,6 +2,7 @@ import './account.css';
import { useEffect, useState } from 'preact/hooks';
import enhanceContent from '../utils/enhance-content';
import shortenNumber from '../utils/shorten-number';
import store from '../utils/store';
@ -122,7 +123,12 @@ export default ({ account }) => {
<Avatar url={avatar} size="xxl" />
<NameText account={info} showAcct external />
</header>
<div class="note" dangerouslySetInnerHTML={{ __html: note }} />
<div
class="note"
dangerouslySetInnerHTML={{
__html: enhanceContent(note, { emojis }),
}}
/>
<p class="stats">
<span>
<b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts

View file

@ -1,16 +1,24 @@
import emojifyText from './emojify-text';
export default (content, { emojis }) => {
// 1. Emojis
export default (content, opts = {}) => {
const { emojis } = opts;
let enhancedContent = content;
const dom = document.createElement('div');
dom.innerHTML = enhancedContent;
// 1. Emojis
if (emojis) {
enhancedContent = emojifyText(enhancedContent, emojis);
}
// 2. Code blocks
const dom = document.createElement('div');
dom.innerHTML = enhancedContent;
// 2. 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) => {
link.setAttribute('target', '_blank');
});
// 3. Code blocks
// Check for <p> with markdown-like content "```"
const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
/^```[^]+```$/g.test(p.innerText.trim()),
@ -28,7 +36,7 @@ export default (content, { emojis }) => {
pre.appendChild(code);
block.replaceWith(pre);
});
enhancedContent = dom.innerHTML;
enhancedContent = dom.innerHTML;
return enhancedContent;
};