feat: collapse mentions (#1034)

components/content/ContentMentionGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <p flex="~ gap-1" items-center text-sm class="zen-none">
+    <span i-ri-arrow-right-line ml--1 text-secondary-light /><slot />
+  </p>
+</template>

components/status/StatusBody.vue

@@ -19,6 +19,7 @@ const vnode = $computed(() => {
     emojis: emojisObject.value,
     mentions: 'mentions' in status ? status.mentions : undefined,
     markdown: true,
+    collapseMentionLink: !!('inReplyToId' in status && status.inReplyToId),
   })
   return vnode
 })

composables/content-parse.ts

@@ -13,6 +13,7 @@ export interface ContentParseOptions {
   replaceUnicodeEmoji?: boolean
   astTransforms?: Transform[]
   convertMentionLink?: boolean
+  collapseMentionLink?: boolean
 }
 
 const sanitizerBasicClasses = filterClasses(/^(h-\S*|p-\S*|u-\S*|dt-\S*|e-\S*|mention|hashtag|ellipsis|invisible)$/u)
@@ -48,6 +49,7 @@ export function parseMastodonHTML(
     markdown = true,
     replaceUnicodeEmoji = true,
     convertMentionLink = false,
+    collapseMentionLink = false,
     mentions,
   } = options
 
@@ -89,6 +91,9 @@ export function parseMastodonHTML(
 
   transforms.push(transformParagraphs)
 
+  if (collapseMentionLink)
+    transforms.push(transformCollapseMentions())
+
   return transformSync(parse(html), transforms)
 }
 
@@ -174,16 +179,16 @@ export function treeToText(input: Node): string {
 // Strings get converted to text nodes.
 // The input node's children have been transformed before the node itself
 // gets transformed.
-type Transform = (node: Node) => (Node | string)[] | Node | string | null
+type Transform = (node: Node, root: Node) => (Node | string)[] | Node | string | null
 
 // Helpers for transforming (filtering, modifying, ...) a parsed HTML tree
 // by running the given chain of transform functions one-by-one.
 function transformSync(doc: Node, transforms: Transform[]) {
-  function visit(node: Node, transform: Transform, isRoot = false) {
+  function visit(node: Node, transform: Transform, root: Node) {
     if (Array.isArray(node.children)) {
       const children = [] as (Node | string)[]
       for (let i = 0; i < node.children.length; i++) {
-        const result = visit(node.children[i], transform)
+        const result = visit(node.children[i], transform, root)
         if (Array.isArray(result))
           children.push(...result)
 
@@ -198,11 +203,11 @@ function transformSync(doc: Node, transforms: Transform[]) {
         return value
       })
     }
-    return isRoot ? node : transform(node)
+    return transform(node, root)
   }
 
   for (const transform of transforms)
-    doc = visit(doc, transform, true) as Node
+    doc = visit(doc, transform, doc) as Node
 
   return doc
 }
@@ -376,6 +381,48 @@ function transformParagraphs(node: Node): Node | Node[] {
   return node
 }
 
+function transformCollapseMentions() {
+  let processed = false
+  function isMention(node: Node) {
+    const child = node.children?.length === 1 ? node.children[0] : null
+    return Boolean(child?.name === 'a' && child.attributes.class?.includes('mention'))
+  }
+
+  return (node: Node, root: Node): Node | Node[] => {
+    if (processed || node.parent !== root)
+      return node
+    const metions: (Node | undefined)[] = []
+    const children = node.children as Node[]
+    for (const child of children) {
+      // metion
+      if (isMention(child)) {
+        metions.push(child)
+      }
+      // spaces in between
+      else if (child.type === TEXT_NODE && !child.value.trim()) {
+        metions.push(child)
+      }
+      // other content, stop collapsing
+      else {
+        if (child.type === TEXT_NODE)
+          child.value = child.value.trimStart()
+        // remove <br> after mention
+        if (child.name === 'br')
+          metions.push(undefined)
+        break
+      }
+    }
+    processed = true
+    if (metions.length === 0)
+      return node
+
+    return {
+      ...node,
+      children: [h('mention-group', null, ...metions.filter(Boolean)), ...children.slice(metions.length)],
+    }
+  }
+}
+
 function transformMentionLink(node: Node): string | Node | (string | Node)[] | null {
   if (node.name === 'a' && node.attributes.class?.includes('mention')) {
     const href = node.attributes.href

composables/content-render.ts

@@ -7,6 +7,7 @@ import { decode } from 'tiny-decode'
 import type { ContentParseOptions } from './content-parse'
 import { parseMastodonHTML } from './content-parse'
 import ContentCode from '~/components/content/ContentCode.vue'
+import ContentMentionGroup from '~/components/content/ContentMentionGroup.vue'
 import AccountHoverWrapper from '~/components/account/AccountHoverWrapper.vue'
 
 /**
@@ -17,13 +18,16 @@ export function contentToVNode(
   options?: ContentParseOptions,
 ): VNode {
   const tree = parseMastodonHTML(content, options)
-  return h(Fragment, (tree.children as Node[]).map(n => treeToVNode(n)))
+  return h(Fragment, (tree.children as Node[] || []).map(n => treeToVNode(n)))
 }
 
 export function nodeToVNode(node: Node): VNode | string | null {
   if (node.type === TEXT_NODE)
     return node.value
 
+  if (node.name === 'mention-group')
+    return h(ContentMentionGroup, node.attributes, () => node.children.map(treeToVNode))
+
   if ('children' in node) {
     if (node.name === 'a' && (node.attributes.href?.startsWith('/') || node.attributes.href?.startsWith('.'))) {
       node.attributes.to = node.attributes.href

styles/global.css

@@ -77,6 +77,10 @@ body {
   --at-apply: 'op0 hover:op100 transition duration-600';
 }
 
+.zen .zen-none {
+  display: none;
+}
+
 .custom-emoji {
   display: inline-block;
   overflow: hidden;

tests/content-rich.test.ts

@@ -2,11 +2,11 @@
  * @vitest-environment jsdom
  */
 /* eslint-disable vue/one-component-per-file */
-import type { mastodon } from 'masto'
 import { describe, expect, it, vi } from 'vitest'
 import { renderToString } from 'vue/server-renderer'
 import { format } from 'prettier'
 import { contentToVNode } from '~/composables/content-render'
+import type { ContentParseOptions } from '~~/composables/content-parse'
 
 describe('content-rich', () => {
   it('empty', async () => {
@@ -26,7 +26,9 @@ describe('content-rich', () => {
   })
 
   it('group mention', async () => {
-    const { formatted } = await render('<p><span class="h-card"><a href="https://lemmy.ml/c/pilipinas" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>pilipinas</span></a></span></p>', undefined, [{ id: '', username: 'pilipinas', url: 'https://lemmy.ml/c/pilipinas', acct: 'pilipinas@lemmy.ml' }])
+    const { formatted } = await render('<p><span class="h-card"><a href="https://lemmy.ml/c/pilipinas" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>pilipinas</span></a></span></p>', {
+      mentions: [{ id: '', username: 'pilipinas', url: 'https://lemmy.ml/c/pilipinas', acct: 'pilipinas@lemmy.ml' }],
+    })
     expect(formatted).toMatchSnapshot('html')
   })
 
@@ -42,11 +44,13 @@ describe('content-rich', () => {
 
   it('custom emoji', async () => {
     const { formatted } = await render('Daniel Roe :nuxt:', {
-      nuxt: {
-        shortcode: 'nuxt',
-        url: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png',
-        staticUrl: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png',
-        visibleInPicker: true,
+      emojis: {
+        nuxt: {
+          shortcode: 'nuxt',
+          url: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/original/c96ba3cb0e0e1eac.png',
+          staticUrl: 'https://media.mas.to/masto-public/cache/custom_emojis/images/000/288/667/static/c96ba3cb0e0e1eac.png',
+          visibleInPicker: true,
+        },
       },
     })
     expect(formatted).toMatchSnapshot()
@@ -72,10 +76,65 @@ describe('content-rich', () => {
     const { formatted } = await render('<p>```<br /><br />```<br /></p>')
     expect(formatted).toMatchSnapshot()
   })
+
+  it('collapse metions', 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/@elk" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>elk</span></a></span> content <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://mastodon.roe.dev/@daniel" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>daniel</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> <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> content</p>', {
+      collapseMentionLink: true,
+    })
+    expect(formatted).toMatchInlineSnapshot(`
+      "<p>
+        <mention-group
+          ><span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@elk\\"
+            ></a
+          ></span>
+          <span class=\\"h-card\\"
+            ><a
+              class=\\"u-url mention\\"
+              rel=\\"nofollow noopener noreferrer\\"
+              to=\\"/m.webtoo.ls/@elk\\"
+            ></a></span></mention-group
+        >content
+        <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=\\"/mastodon.roe.dev/@daniel\\"
+          ></a
+        ></span>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@sxzz\\"
+          ></a
+        ></span>
+        <span class=\\"h-card\\"
+          ><a
+            class=\\"u-url mention\\"
+            rel=\\"nofollow noopener noreferrer\\"
+            to=\\"/m.webtoo.ls/@patak\\"
+          ></a
+        ></span>
+        content
+      </p>
+      "
+    `)
+  })
 })
 
-async function render(content: string, emojis?: Record<string, mastodon.v1.CustomEmoji>, mentions?: mastodon.v1.StatusMention[]) {
-  const vnode = contentToVNode(content, { emojis, mentions })
+async function render(content: string, options?: ContentParseOptions) {
+  const vnode = contentToVNode(content, options)
   const html = (await renderToString(vnode))
     .replace(/<!--[\[\]]-->/g, '')
   let formatted = ''
@@ -129,6 +188,16 @@ vi.mock('~/components/content/ContentCode.vue', () => {
   }
 })
 
+vi.mock('~/components/content/ContentMentionGroup.vue', () => {
+  return {
+    default: defineComponent({
+      setup(props, { slots }) {
+        return () => h('mention-group', null, { default: () => slots?.default?.() })
+      },
+    }),
+  }
+})
+
 vi.mock('~/components/account/AccountHoverWrapper.vue', () => {
   return {
     default: defineComponent({