Further polish hashtag stuffing logic

README.md

@@ -78,9 +78,11 @@ Everything is designed and engineered following my taste and vision. This is a p
 
 ![Hashtag stuffing collapsing](readme-assets/hashtag-stuffing-collapsing.jpg)
 
-- Any paragraphs, except the first one, with more than 3 hashtags will be collapsed.
+- First paragraph of post content with more than 3 hashtags will be collapsed to max 3 lines.
+- Subsequent paragraphs after first paragraph with more than 3 hashtags will be collapsed to 1 line.
+- Adjacent paragraphs with more than 1 hashtag after collapsed paragraphs will be collapsed to 1 line.
 - If there are text around or between the hashtags, they will not be collapsed.
-- Collapsed hashtags will be a single line with `...` at the end.
+- Collapsed hashtags will be appended with `...` at the end.
 - They are also slightly faded out to reduce visual noise.
 - Opening the post view will reveal the hashtags uncollapsed.
 

src/utils/enhance-content.js

@@ -174,35 +174,49 @@ function enhanceContent(content, opts = {}) {
   // ================
   // Get the <p> that contains a lot of hashtags, add a class to it
   if (enhancedContent.indexOf('#') !== -1) {
-    const hashtagStuffedParagraph = Array.from(dom.querySelectorAll('p')).find(
+    let prevIndex = null;
-      (p) => {
+    const hashtagStuffedParagraphs = Array.from(
-        let hashtagCount = 0;
+      dom.querySelectorAll('p'),
-        for (let i = 0; i < p.childNodes.length; i++) {
+    ).filter((p, index) => {
-          const node = p.childNodes[i];
+      let hashtagCount = 0;
+      for (let i = 0; i < p.childNodes.length; 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;
-            }
-          } else if (node.tagName === 'A') {
-            const linkText = node.textContent.trim();
-            if (!linkText || !linkText.startsWith('#')) {
-              return false;
-            } else {
-              hashtagCount++;
-            }
-          } else {
             return false;
           }
+        } else if (node.tagName === 'BR') {
+          // Ignore <br />
+        } else if (node.tagName === 'A') {
+          const linkText = node.textContent.trim();
+          if (!linkText || !linkText.startsWith('#')) {
+            return false;
+          } else {
+            hashtagCount++;
+          }
+        } else {
+          return false;
         }
-        // Only consider "stuffing" if there are more than 3 hashtags
+      }
-        return hashtagCount > 3;
+      // Only consider "stuffing" if:
-      },
+      // - there are more than 3 hashtags
-    );
+      // - there are more than 1 hashtag in adjacent paragraphs
-    if (hashtagStuffedParagraph) {
+      if (hashtagCount > 3) {
-      hashtagStuffedParagraph.classList.add('hashtag-stuffing');
+        prevIndex = index;
-      hashtagStuffedParagraph.title = hashtagStuffedParagraph.innerText;
+        return true;
+      }
+      if (hashtagCount > 1 && prevIndex && index === prevIndex + 1) {
+        prevIndex = index;
+        return true;
+      }
+    });
+    if (hashtagStuffedParagraphs?.length) {
+      hashtagStuffedParagraphs.forEach((p) => {
+        p.classList.add('hashtag-stuffing');
+        p.title = p.innerText;
+      });
     }
   }