From 29be640eff23bf10f340ed0f1f71ba5e5fb41e30 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 31 Jul 2026 15:00:35 +0800
Subject: [PATCH] fix(editor): stop drawing link chrome over mention chips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A mention chip already carries its own affordance — border, icon, hover
background — so the generic `.rich-text-editor a` color and underline draw a
second, competing one straight through the card. `.issue-mention` reset it;
`.project-mention` never did, so project chips shipped with a brand-coloured
underline through them. The rule belongs to the chip shape rather than to one
entity, so both selectors now share it and a future chip is one line.

The hover card had the same gap: it skipped `.issue-mention` only, so hovering
a project chip opened a URL card offering to copy `/{slug}/projects/{uuid}` —
an in-app path, not the shareable link that wording implies.

Both are pre-existing, but a bare project URL now renders as a chip, so what
used to surface on hand-written mentions alone shows up on ordinary pasted
links.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 packages/views/editor/link-hover-card.tsx | 13 ++++++++++---
 packages/views/editor/styles/prose.css    | 11 ++++++++---
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/views/editor/link-hover-card.tsx b/packages/views/editor/link-hover-card.tsx
index 007bb21428..4bb9db1f5b 100644
--- a/packages/views/editor/link-hover-card.tsx
+++ b/packages/views/editor/link-hover-card.tsx
@@ -69,9 +69,16 @@ function useLinkHover(containerRef: React.RefObject<HTMLElement | null>, disable
       if (!link) return;
       const href = link.getAttribute("href");
       if (!href || isMentionHref(href)) return;
-      // Issue mention cards render as <a class="issue-mention"> — they
-      // display their own rich info, a URL hover card is redundant.
-      if (link.classList.contains("issue-mention")) return;
+      // Mention chips render as <a class="issue-mention"> / <a
+      // class="project-mention"> — they display their own rich info, so a URL
+      // hover card is redundant, and the URL it would offer to copy is an
+      // in-app path rather than the shareable link the user expects.
+      if (
+        link.classList.contains("issue-mention") ||
+        link.classList.contains("project-mention")
+      ) {
+        return;
+      }
 
       clearTimeout(hideTimer.current);
       showTimer.current = window.setTimeout(() => {
diff --git a/packages/views/editor/styles/prose.css b/packages/views/editor/styles/prose.css
index 60bd0bcf81..dfd1f855f0 100644
--- a/packages/views/editor/styles/prose.css
+++ b/packages/views/editor/styles/prose.css
@@ -377,13 +377,18 @@
   text-decoration-color: var(--brand);
 }
 
-/* Issue mention cards — inline cards that sit within text flow */
-.rich-text-editor a.issue-mention {
+/* Mention chips — inline cards that sit within text flow. The chip already
+   carries its own affordance (border, icon, hover background), so the generic
+   link color and underline above would be a second, competing one drawn
+   through the card. Every chip-shaped mention belongs here. */
+.rich-text-editor a.issue-mention,
+.rich-text-editor a.project-mention {
   color: inherit;
   text-decoration: none;
 }
 
-.rich-text-editor a.issue-mention:hover {
+.rich-text-editor a.issue-mention:hover,
+.rich-text-editor a.project-mention:hover {
   text-decoration: none;
 }