fix(tiptap): mention transform, close #521

Author: antfu

composables/content-parse.ts

@@ -10,6 +10,7 @@ export interface ContentParseOptions {
   markdown?: boolean
   replaceUnicodeEmoji?: boolean
   astTransforms?: Transform[]
+  convertMentionLink?: boolean
 }
 
 const sanitizerBasicClasses = filterClasses(/^(h-\S*|p-\S*|u-\S*|dt-\S*|e-\S*|mention|hashtag|ellipsis|invisible)$/u)
@@ -53,6 +54,7 @@ export function parseMastodonHTML(
   const {
     markdown = true,
     replaceUnicodeEmoji = true,
+    convertMentionLink = false,
   } = options
 
   if (markdown) {
@@ -77,6 +79,9 @@ export function parseMastodonHTML(
   if (markdown)
     transforms.push(transformMarkdown)
 
+  if (convertMentionLink)
+    transforms.push(transformMentionLink)
+
   transforms.push(replaceCustomEmoji(options.emojis || {}))
 
   transforms.push(transformParagraphs)
@@ -92,6 +97,7 @@ export function convertMastodonHTML(html: string, customEmojis: Record<string, m
     emojis: customEmojis,
     markdown: true,
     replaceUnicodeEmoji: false,
+    convertMentionLink: true,
   })
   return render(tree)
 }
@@ -360,3 +366,19 @@ function transformParagraphs(node: Node): Node | Node[] {
     return [node, h('p')]
   return node
 }
+
+function transformMentionLink(node: Node): string | Node | (string | Node)[] | null {
+  if (node.name === 'a' && node.attributes.class?.includes('mention')) {
+    const href = node.attributes.href
+    if (href) {
+      const matchUser = href.match(UserLinkRE)
+      if (matchUser) {
+        const [, server, username] = matchUser
+        const handle = `${username}@${server.replace(/(.+\.)(.+\..+)/, '$2')}`
+        // convert to TipTap mention node
+        return h('span', { 'data-type': 'mention', 'data-id': handle }, handle)
+      }
+    }
+  }
+  return node
+}