feat: inline some mentions to reduce spacing (#1307)

composables/content-parse.ts

@@ -469,6 +469,7 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus?
       return node
     const mentions: (Node | undefined)[] = []
     const children = node.children as Node[]
+    let trimContentStart: (() => void) | undefined
     for (const child of children) {
       // mention
       if (isMention(child)) {
@@ -480,8 +481,11 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus?
       }
       // other content, stop collapsing
       else {
-        if (child.type === TEXT_NODE)
+        if (child.type === TEXT_NODE) {
+          trimContentStart = () => {
             child.value = child.value.trimStart()
+          }
+        }
         // remove <br> after mention
         if (child.name === 'br')
           mentions.push(undefined)
@@ -495,6 +499,7 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus?
     let mentionsCount = 0
     let contextualMentionsCount = 0
     let removeNextSpacing = false
+
     const contextualMentions = mentions.filter((mention) => {
       if (!mention)
         return false
@@ -508,24 +513,30 @@ function transformCollapseMentions(status?: mastodon.v1.Status, inReplyToStatus?
         mentionsCount++
         if (inReplyToStatus) {
           const mentionHandle = getMentionHandle(mention)
-          if (inReplyToStatus.account.acct === mentionHandle || inReplyToStatus.mentions.some(m => m.acct === mentionHandle))
+          if (inReplyToStatus.account.acct === mentionHandle || inReplyToStatus.mentions.some(m => m.acct === mentionHandle)) {
+            removeNextSpacing = true
             return false
           }
+        }
         contextualMentionsCount++
       }
       return true
-    })
+    }) as Node[]
 
     // We have a special case for single mentions that are part of a reply.
     // We already have the replying to badge in this case or the status is connected to the previous one.
     // This is needed because the status doesn't included the in Reply to handle, only the account id.
     // But this covers the majority of cases.
     const showMentions = !(contextualMentionsCount === 0 || (mentionsCount === 1 && status?.inReplyToAccountId))
+    const grouped = contextualMentionsCount > 2
+    if (grouped)
+      trimContentStart?.()
 
     const contextualChildren = children.slice(mentions.length)
+    const mentionNodes = showMentions ? (grouped ? [h('mention-group', null, ...contextualMentions)] : contextualMentions) : []
     return {
       ...node,
-      children: showMentions ? [h('mention-group', null, ...contextualMentions), ...contextualChildren] : contextualChildren,
+      children: [...mentionNodes, ...contextualChildren],
     }
   }
 }

tests/content-rich.test.ts

@@ -91,8 +91,7 @@ describe('content-rich', () => {
     })
     expect(formatted).toMatchInlineSnapshot(`
       "<p>
-        <mention-group
+        <span class=\\"h-card\\"
-          ><span class=\\"h-card\\"
           ><a
             class=\\"u-url mention\\"
             rel=\\"nofollow noopener noreferrer\\"
@@ -104,8 +103,9 @@ describe('content-rich', () => {
             class=\\"u-url mention\\"
             rel=\\"nofollow noopener noreferrer\\"
             to=\\"/m.webtoo.ls/@elk\\"
-            ></a></span></mention-group
+          ></a
-        >content
+        ></span>
+        content
         <span class=\\"h-card\\"
           ><a
             class=\\"u-url mention\\"
@@ -151,19 +151,53 @@ describe('content-rich', () => {
     `)
   })
 
-  it('shows some collapsed mentions', async () => {
+  it('shows some collapsed mentions inline', async () => {
     const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> content</p>', {
       collapseMentionLink: true,
       inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
     })
     expect(formatted).toMatchInlineSnapshot(`
       "<p>
-        <mention-group>
         <span class=\\"h-card\\"
           ><a
             class=\\"u-url mention\\"
             rel=\\"nofollow noopener noreferrer\\"
             to=\\"/m.webtoo.ls/@antfu\\"
+          ></a
+        ></span>
+        content
+      </p>
+      "
+    `)
+  })
+
+  it('shows some collapsed mentions grouped', async () => {
+    const { formatted } = await render('<p><span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@antfu" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>antfu</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@patak" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>patak</span></a></span> <span class="h-card"><a href="https://m.webtoo.ls/@sxzz" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sxzz</span></a></span>content</p>', {
+      collapseMentionLink: true,
+      inReplyToStatus: { account: { acct: 'elk@webtoo.ls' }, mentions: [] as mastodon.v1.StatusMention[] } as mastodon.v1.Status,
+    })
+    expect(formatted).toMatchInlineSnapshot(`
+      "<p>
+        <mention-group
+          ><span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@antfu\\"
+            ></a
+          ></span>
+          <span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@patak\\"
+            ></a
+          ></span>
+          <span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@sxzz\\"
             ></a></span></mention-group
         >content
       </p>