marketing-shibata50/multica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(editor): align IssueMentionCard styling and behavior with Tiptap

Browse source 
- Remove align-middle from IssueMentionCard (alignment is container's job)
- Add inline align-middle wrapper span in ReadonlyContent for vertical alignment
- Add img component with max-width constraint to prevent overflow
- Issue mention clicks open in new tab (matches Tiptap behavior)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Naiyuan Qing 2026-04-08 13:46:58 +08:00
parent 92e76dea81
commit 5e770b2e2f
2 changed files with 31 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
apps/web/features/editor/readonly-content.tsx
View file

@ -63,7 +63,19 @@ const components: Partial<Components> = {
: Array.isArray(children)
? children.join("")
: undefined;
return <IssueMentionCard issueId={match[2]} fallbackLabel={label} />;
// Wrap in inline span for vertical alignment (mimics Tiptap's NodeViewWrapper)
return (
<span
className="inline align-middle"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
window.open(`/issues/${match[2]}`, "_blank", "noopener,noreferrer");
}}
>
<IssueMentionCard issueId={match[2]} fallbackLabel={label} />
</span>
);
}
// Member / agent / all mentions
return <span className="mention">{children}</span>;
@ -83,6 +95,16 @@ const components: Partial<Components> = {
);
},
// Images — constrain width (matches Tiptap Image extension inline style)
img: ({ src, alt, ...props }) => (
<img
src={src}
alt={alt ?? ""}
style={{ maxWidth: "100%", height: "auto" }}
{...props}
/>
),
// Tables — wrap in tableWrapper div for border/radius/scroll (matches Tiptap)
table: ({ children }) => (
<div className="tableWrapper">

14
apps/web/features/issues/components/issue-mention-card.tsx
View file

@ -21,9 +21,11 @@ export function IssueMentionCard({ issueId, fallbackLabel }: IssueMentionCardPro
return (
<Link
href={`/issues/${issueId}`}
className="text-primary font-medium cursor-pointer hover:underline"
className="issue-mention inline-flex items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-xs hover:bg-accent transition-colors cursor-pointer max-w-72"
>
{fallbackLabel ?? issueId.slice(0, 8)}
<span className="font-medium text-muted-foreground">
{fallbackLabel ?? issueId.slice(0, 8)}
</span>
</Link>
);
}
@ -31,11 +33,11 @@ export function IssueMentionCard({ issueId, fallbackLabel }: IssueMentionCardPro
return (
<Link
href={`/issues/${issueId}`}
className="inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-sm hover:bg-accent transition-colors cursor-pointer no-underline"
className="issue-mention inline-flex items-center gap-1.5 rounded-md border mx-0.5 px-2 py-0.5 text-xs hover:bg-accent transition-colors cursor-pointer max-w-72"
>
<StatusIcon status={issue.status} className="h-3.5 w-3.5" />
<span className="font-medium text-muted-foreground">{issue.identifier}</span>
<span className="text-foreground">{issue.title}</span>
<StatusIcon status={issue.status} className="h-3.5 w-3.5 shrink-0" />
<span className="font-medium text-muted-foreground shrink-0">{issue.identifier}</span>
<span className="text-foreground truncate">{issue.title}</span>
</Link>
);
}