feat: enhance comment mentions with reply styling in Comment and ViewMarkdown components

parlandin · parlandin · commit 1a60a77893d0 · 2025-03-03T20:01:36.000-03:00
diff --git a/src/components/Comment/index.tsx b/src/components/Comment/index.tsx
@@ -42,7 +42,14 @@ const Comment: React.FC<IComment> = ({
         `<span className="mention">@${currentUser}</span>`
       );
 
-      return newContent;
+      const reply = newContent.replace(/@(\w+)/g, (match, username) => {
+        if (username === currentUser) return match;
+        return `<span className="reply">@${username}</span>`;
+      });
+
+      return reply;
+
+      /*  return newContent; */
     },
     [currentUser]
   );
diff --git a/src/components/CommentsList/list.ts b/src/components/CommentsList/list.ts
@@ -54,7 +54,7 @@ export const list: ICommentData[] = [
       },
       {
         id: 6,
-        comment: "~~Strikethrough~~ for deprecated features",
+        comment: "@Maria ~~Strikethrough~~ for deprecated features",
         user: {
           name: "Mike",
           avatar: "https://avatar.iran.liara.run/public/55",
diff --git a/src/components/ViewMarkdown/styles.ts b/src/components/ViewMarkdown/styles.ts
@@ -37,6 +37,11 @@ export const Span = styled.span`
     padding: 2px;
     height: fit-content;
   }
+
+  &.reply {
+    text-decoration: underline;
+    color: ${({ theme }) => theme.colors.primary};
+  }
 `;
 
 export const Link = styled.a`

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ export const list: ICommentData[] = [`
`54`	`54`	`},`
`55`	`55`	`{`
`56`	`56`	`id: 6,`
`57`		`- comment: "~~Strikethrough~~ for deprecated features",`
	`57`	`+ comment: "@Maria ~~Strikethrough~~ for deprecated features",`
`58`	`58`	`user: {`
`59`	`59`	`name: "Mike",`
`60`	`60`	`avatar: "https://avatar.iran.liara.run/public/55",`