esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rich text: unify ticket mention chip style while editing (Tiptap span)

Browse source
This commit is contained in:
codex-bot 2025-10-24 14:18:37 -03:00
parent 12a6d231fa
commit 3b013f205a
1 changed files with 25 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/app/globals.css
View file

@ -165,42 +165,47 @@
}
.rich-text p { @apply my-2; }
.rich-text a { @apply text-neutral-900 underline; }
.rich-text a[data-ticket-mention="true"],
.rich-text .ProseMirror a[data-ticket-mention="true"],
.rich-text a.ticket-mention,
.rich-text .ProseMirror a.ticket-mention {
.rich-text [data-ticket-mention="true"],
.rich-text .ProseMirror [data-ticket-mention="true"],
.rich-text .ticket-mention,
.rich-text .ProseMirror .ticket-mention {
@apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800 no-underline transition hover:bg-slate-200;
}
.rich-text a[data-ticket-mention="true"] .ticket-mention-dot,
.rich-text a.ticket-mention .ticket-mention-dot {
/* While editing, TipTap renders the mention as a span with data-type="ticketMention".
Mirror the same chip style so the layout stays consistent during edits. */
.rich-text .ProseMirror [data-type="ticketMention"] {
@apply inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-2.5 py-1 text-xs font-semibold text-neutral-800;
}
.rich-text [data-ticket-mention="true"] .ticket-mention-dot,
.rich-text .ticket-mention .ticket-mention-dot {
@apply inline-flex size-2 rounded-full bg-slate-400;
}
.rich-text a[data-ticket-mention="true"] .ticket-mention-ref,
.rich-text a.ticket-mention .ticket-mention-ref {
.rich-text [data-ticket-mention="true"] .ticket-mention-ref,
.rich-text .ticket-mention .ticket-mention-ref {
@apply text-neutral-900;
}
.rich-text a[data-ticket-mention="true"] .ticket-mention-sep,
.rich-text a.ticket-mention .ticket-mention-sep {
.rich-text [data-ticket-mention="true"] .ticket-mention-sep,
.rich-text .ticket-mention .ticket-mention-sep {
@apply text-neutral-400;
}
.rich-text a[data-ticket-mention="true"] .ticket-mention-subject,
.rich-text a.ticket-mention .ticket-mention-subject {
.rich-text [data-ticket-mention="true"] .ticket-mention-subject,
.rich-text .ticket-mention .ticket-mention-subject {
@apply max-w-[220px] truncate text-neutral-700;
}
.rich-text a[data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot,
.rich-text a.ticket-mention[data-ticket-status="PENDING"] .ticket-mention-dot {
.rich-text [data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot,
.rich-text .ticket-mention[data-ticket-status="PENDING"] .ticket-mention-dot {
@apply bg-amber-400;
}
.rich-text a[data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot,
.rich-text a.ticket-mention[data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot {
.rich-text [data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot,
.rich-text .ticket-mention[data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot {
@apply bg-sky-500;
}
.rich-text a[data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot,
.rich-text a.ticket-mention[data-ticket-status="PAUSED"] .ticket-mention-dot {
.rich-text [data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot,
.rich-text .ticket-mention[data-ticket-status="PAUSED"] .ticket-mention-dot {
@apply bg-violet-500;
}
.rich-text a[data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot,
.rich-text a.ticket-mention[data-ticket-status="RESOLVED"] .ticket-mention-dot {
.rich-text [data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot,
.rich-text .ticket-mention[data-ticket-status="RESOLVED"] .ticket-mention-dot {
@apply bg-emerald-500;
}
.rich-text ul { @apply my-2 list-disc ps-5; }