highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-08-02 18:13:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): stop drawing link chrome over mention chips

Browse Source 
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>
This commit is contained in:
Naiyuan Qing
2026-07-31 15:00:35 +08:00
parent 70f8200427
commit 29be640eff
2 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/views/editor/link-hover-card.tsx
View File

@@ -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(() => {

11
packages/views/editor/styles/prose.css
View File

@@ -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;
}