From 1ff5102e347bb0d7df41f4eadcae40d2395773ef Mon Sep 17 00:00:00 2001
From: Laura Hausmann <laura@hausmann.dev>
Date: Thu, 12 Oct 2023 00:03:33 +0200
Subject: [PATCH] [backend] Format mentions in outgoing AP messages properly

---
 packages/backend/src/mfm/to-html.ts                   | 11 +++++++++--
 .../backend/src/server/api/mastodon/helpers/mfm.ts    | 11 +++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/backend/src/mfm/to-html.ts b/packages/backend/src/mfm/to-html.ts
index 1693f2cef..cca7474dc 100644
--- a/packages/backend/src/mfm/to-html.ts
+++ b/packages/backend/src/mfm/to-html.ts
@@ -112,6 +112,9 @@ export function toHtml(
 		},
 
 		mention(node) {
+			const el = doc.createElement("span");
+			el.setAttribute("class", "h-card");
+			el.setAttribute("translate", "no");
 			const a = doc.createElement("a");
 			const { username, host, acct } = node.props;
 			const remoteUserInfo = mentionedRemoteUsers.find(
@@ -124,8 +127,12 @@ export function toHtml(
 					: remoteUserInfo.uri
 				: `${config.url}/${acct}`;
 			a.className = "u-url mention";
-			a.textContent = acct;
-			return a;
+			const span = doc.createElement("span");
+			span.textContent = username;
+			a.textContent = '@';
+			a.appendChild(span);
+			el.appendChild(a);
+			return el;
 		},
 
 		quote(node) {
diff --git a/packages/backend/src/server/api/mastodon/helpers/mfm.ts b/packages/backend/src/server/api/mastodon/helpers/mfm.ts
index c5ecc3bc2..a232736f0 100644
--- a/packages/backend/src/server/api/mastodon/helpers/mfm.ts
+++ b/packages/backend/src/server/api/mastodon/helpers/mfm.ts
@@ -129,6 +129,9 @@ export class MfmHelpers {
             },
 
             mention(node) {
+                const el = doc.createElement("span");
+                el.setAttribute("class", "h-card");
+                el.setAttribute("translate", "no");
                 const a = doc.createElement("a");
                 const { username, host} = node.props;
                 const remoteUserInfo = mentionedRemoteUsers.find(
@@ -143,8 +146,12 @@ export class MfmHelpers {
                         : remoteUserInfo.uri
                     : `${config.url}/${acct}`;
                 a.className = "u-url mention";
-                a.textContent = localpart;
-                return a;
+                const span = doc.createElement("span");
+                span.textContent = username;
+                a.textContent = '@';
+                a.appendChild(span);
+                el.appendChild(a);
+                return el;
             },
 
             quote(node) {