simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Micro optimizations

Browse source
This commit is contained in:
Lim Chee Aun 2023-12-29 11:27:01 +08:00
parent a97478097b
commit f21a65da9a
1 changed files with 61 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/utils/enhance-content.js
View file

@ -10,22 +10,20 @@ function _enhanceContent(content, opts = {}) {
const dom = document.createElement('div'); const dom = document.createElement('div');
dom.innerHTML = enhancedContent; dom.innerHTML = enhancedContent;
const hasLink = /<a/i.test(enhancedContent); const hasLink = /<a/i.test(enhancedContent);
const hasCodeBlock = enhancedContent.indexOf('```') !== -1; const hasCodeBlock = enhancedContent.includes('```');
if (hasLink) { if (hasLink) {
// Add target="_blank" to all links with no target="_blank" // Add target="_blank" to all links with no target="_blank"
// E.g. `note` in `account` // E.g. `note` in `account`
const noTargetBlankLinks = Array.from( const noTargetBlankLinks = dom.querySelectorAll('a:not([target="_blank"])');
dom.querySelectorAll('a:not([target="_blank"])'),
);
noTargetBlankLinks.forEach((link) => { noTargetBlankLinks.forEach((link) => {
link.setAttribute('target', '_blank'); link.setAttribute('target', '_blank');
}); });
// Remove all classes except `u-url`, `mention`, `hashtag` // Remove all classes except `u-url`, `mention`, `hashtag`
const links = Array.from(dom.querySelectorAll('a[class]')); const links = dom.querySelectorAll('a[class]');
links.forEach((link) => { links.forEach((link) => {
Array.from(link.classList).forEach((c) => { link.classList.forEach((c) => {
if (!whitelistLinkClasses.includes(c)) { if (!whitelistLinkClasses.includes(c)) {
link.classList.remove(c); link.classList.remove(c);
} }
@ -35,7 +33,7 @@ function _enhanceContent(content, opts = {}) {
// Add 'has-url-text' to all links that contains a url // Add 'has-url-text' to all links that contains a url
if (hasLink) { if (hasLink) {
const links = Array.from(dom.querySelectorAll('a[href]')); const links = dom.querySelectorAll('a[href]');
links.forEach((link) => { links.forEach((link) => {
if (/^https?:\/\//i.test(link.textContent.trim())) { if (/^https?:\/\//i.test(link.textContent.trim())) {
link.classList.add('has-url-text'); link.classList.add('has-url-text');
@ -45,7 +43,7 @@ function _enhanceContent(content, opts = {}) {
// Spanify un-spanned mentions // Spanify un-spanned mentions
if (hasLink) { if (hasLink) {
const links = Array.from(dom.querySelectorAll('a[href]')); const links = dom.querySelectorAll('a[href]');
const usernames = []; const usernames = [];
links.forEach((link) => { links.forEach((link) => {
const text = link.innerText.trim(); const text = link.innerText.trim();
@ -56,8 +54,8 @@ function _enhanceContent(content, opts = {}) {
const [_, username, domain] = text.split('@'); const [_, username, domain] = text.split('@');
if (!hasChildren) { if (!hasChildren) {
if ( if (
!usernames.find(([u]) => u === username) || !usernames.some(([u]) => u === username) ||
usernames.find(([u, d]) => u === username && d === domain) usernames.some(([u, d]) => u === username && d === domain)
) { ) {
link.innerHTML = `@<span>${username}</span>`; link.innerHTML = `@<span>${username}</span>`;
usernames.push([username, domain]); usernames.push([username, domain]);
@ -79,7 +77,7 @@ function _enhanceContent(content, opts = {}) {
// ====== // ======
// Convert :shortcode: to <img /> // Convert :shortcode: to <img />
let textNodes; let textNodes;
if (enhancedContent.indexOf(':') !== -1) { if (enhancedContent.includes(':')) {
textNodes = extractTextNodes(dom); textNodes = extractTextNodes(dom);
textNodes.forEach((node) => { textNodes.forEach((node) => {
let html = node.nodeValue let html = node.nodeValue
@ -90,8 +88,8 @@ function _enhanceContent(content, opts = {}) {
html = emojifyText(html, emojis); html = emojifyText(html, emojis);
} }
fauxDiv.innerHTML = html; fauxDiv.innerHTML = html;
const nodes = Array.from(fauxDiv.childNodes); // const nodes = [...fauxDiv.childNodes];
node.replaceWith(...nodes); node.replaceWith(...fauxDiv.childNodes);
}); });
} }
@ -99,7 +97,7 @@ function _enhanceContent(content, opts = {}) {
// =========== // ===========
// Convert ```code``` to <pre><code>code</code></pre> // Convert ```code``` to <pre><code>code</code></pre>
if (hasCodeBlock) { if (hasCodeBlock) {
const blocks = Array.from(dom.querySelectorAll('p')).filter((p) => const blocks = [...dom.querySelectorAll('p')].filter((p) =>
/^```[^]+```$/g.test(p.innerText.trim()), /^```[^]+```$/g.test(p.innerText.trim()),
); );
blocks.forEach((block) => { blocks.forEach((block) => {
@ -113,7 +111,7 @@ function _enhanceContent(content, opts = {}) {
// Convert multi-paragraph code blocks to <pre><code>code</code></pre> // Convert multi-paragraph code blocks to <pre><code>code</code></pre>
if (hasCodeBlock) { if (hasCodeBlock) {
const paragraphs = Array.from(dom.querySelectorAll('p')); const paragraphs = [...dom.querySelectorAll('p')];
// Filter out paragraphs with ``` in beginning only // Filter out paragraphs with ``` in beginning only
const codeBlocks = paragraphs.filter((p) => /^```/g.test(p.innerText)); const codeBlocks = paragraphs.filter((p) => /^```/g.test(p.innerText));
// For each codeBlocks, get all paragraphs until the last paragraph with ``` at the end only // For each codeBlocks, get all paragraphs until the last paragraph with ``` at the end only
@ -153,7 +151,7 @@ function _enhanceContent(content, opts = {}) {
// INLINE CODE // INLINE CODE
// =========== // ===========
// Convert `code` to <code>code</code> // Convert `code` to <code>code</code>
if (enhancedContent.indexOf('`') !== -1) { if (enhancedContent.includes('`')) {
textNodes = extractTextNodes(dom); textNodes = extractTextNodes(dom);
textNodes.forEach((node) => { textNodes.forEach((node) => {
let html = node.nodeValue let html = node.nodeValue
@ -164,8 +162,8 @@ function _enhanceContent(content, opts = {}) {
html = html.replaceAll(/(`[^]+?`)/g, '<code>$1</code>'); html = html.replaceAll(/(`[^]+?`)/g, '<code>$1</code>');
} }
fauxDiv.innerHTML = html; fauxDiv.innerHTML = html;
const nodes = Array.from(fauxDiv.childNodes); // const nodes = [...fauxDiv.childNodes];
node.replaceWith(...nodes); node.replaceWith(...fauxDiv.childNodes);
}); });
} }
@ -188,53 +186,53 @@ function _enhanceContent(content, opts = {}) {
); );
} }
fauxDiv.innerHTML = html; fauxDiv.innerHTML = html;
const nodes = Array.from(fauxDiv.childNodes); // const nodes = [...fauxDiv.childNodes];
node.replaceWith(...nodes); node.replaceWith(...fauxDiv.childNodes);
}); });
} }
// HASHTAG STUFFING // HASHTAG STUFFING
// ================ // ================
// Get the <p> that contains a lot of hashtags, add a class to it // Get the <p> that contains a lot of hashtags, add a class to it
if (enhancedContent.indexOf('#') !== -1) { if (enhancedContent.includes('#')) {
let prevIndex = null; let prevIndex = null;
const hashtagStuffedParagraphs = Array.from( const hashtagStuffedParagraphs = [...dom.querySelectorAll('p')].filter(
dom.querySelectorAll('p'), (p, index) => {
).filter((p, index) => { let hashtagCount = 0;
let hashtagCount = 0; for (let i = 0; i < p.childNodes.length; i++) {
for (let i = 0; i < p.childNodes.length; i++) { const node = p.childNodes[i];
const node = p.childNodes[i];
if (node.nodeType === Node.TEXT_NODE) { if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent.trim(); const text = node.textContent.trim();
if (text !== '') { if (text !== '') {
return false; return false;
} }
} else if (node.tagName === 'BR') { } else if (node.tagName === 'BR') {
// Ignore <br /> // Ignore <br />
} else if (node.tagName === 'A') { } else if (node.tagName === 'A') {
const linkText = node.textContent.trim(); const linkText = node.textContent.trim();
if (!linkText || !linkText.startsWith('#')) { if (!linkText || !linkText.startsWith('#')) {
return false; return false;
} else {
hashtagCount++;
}
} else { } else {
hashtagCount++; return false;
} }
} else {
return false;
} }
} // Only consider "stuffing" if:
// Only consider "stuffing" if: // - there are more than 3 hashtags
// - there are more than 3 hashtags // - there are more than 1 hashtag in adjacent paragraphs
// - there are more than 1 hashtag in adjacent paragraphs if (hashtagCount > 3) {
if (hashtagCount > 3) { prevIndex = index;
prevIndex = index; return true;
return true; }
} if (hashtagCount > 1 && prevIndex && index === prevIndex + 1) {
if (hashtagCount > 1 && prevIndex && index === prevIndex + 1) { prevIndex = index;
prevIndex = index; return true;
return true; }
} },
}); );
if (hashtagStuffedParagraphs?.length) { if (hashtagStuffedParagraphs?.length) {
hashtagStuffedParagraphs.forEach((p) => { hashtagStuffedParagraphs.forEach((p) => {
p.classList.add('hashtag-stuffing'); p.classList.add('hashtag-stuffing');
@ -291,18 +289,20 @@ const defaultRejectFilterMap = Object.fromEntries(
); );
function extractTextNodes(dom, opts = {}) { function extractTextNodes(dom, opts = {}) {
const textNodes = []; const textNodes = [];
const rejectFilterMap = Object.assign(
{},
defaultRejectFilterMap,
opts.rejectFilter?.reduce((acc, cur) => {
acc[cur] = true;
return acc;
}, {}),
);
const walk = document.createTreeWalker( const walk = document.createTreeWalker(
dom, dom,
NodeFilter.SHOW_TEXT, NodeFilter.SHOW_TEXT,
{ {
acceptNode(node) { acceptNode(node) {
if (defaultRejectFilterMap[node.parentNode.nodeName]) { if (rejectFilterMap[node.parentNode.nodeName]) {
return NodeFilter.FILTER_REJECT;
}
if (
opts.rejectFilter &&
opts.rejectFilter.includes(node.parentNode.nodeName)
) {
return NodeFilter.FILTER_REJECT; return NodeFilter.FILTER_REJECT;
} }
return NodeFilter.FILTER_ACCEPT; return NodeFilter.FILTER_ACCEPT;