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 p { @apply my-2; }
.rich-text a { @apply text-neutral-900 underline; } .rich-text a { @apply text-neutral-900 underline; }
.rich-text a[data-ticket-mention="true"], .rich-text [data-ticket-mention="true"],
.rich-text .ProseMirror a[data-ticket-mention="true"], .rich-text .ProseMirror [data-ticket-mention="true"],
.rich-text a.ticket-mention, .rich-text .ticket-mention,
.rich-text .ProseMirror a.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; @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, /* While editing, TipTap renders the mention as a span with data-type="ticketMention".
.rich-text a.ticket-mention .ticket-mention-dot { 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; @apply inline-flex size-2 rounded-full bg-slate-400;
} }
.rich-text a[data-ticket-mention="true"] .ticket-mention-ref, .rich-text [data-ticket-mention="true"] .ticket-mention-ref,
.rich-text a.ticket-mention .ticket-mention-ref { .rich-text .ticket-mention .ticket-mention-ref {
@apply text-neutral-900; @apply text-neutral-900;
} }
.rich-text a[data-ticket-mention="true"] .ticket-mention-sep, .rich-text [data-ticket-mention="true"] .ticket-mention-sep,
.rich-text a.ticket-mention .ticket-mention-sep { .rich-text .ticket-mention .ticket-mention-sep {
@apply text-neutral-400; @apply text-neutral-400;
} }
.rich-text a[data-ticket-mention="true"] .ticket-mention-subject, .rich-text [data-ticket-mention="true"] .ticket-mention-subject,
.rich-text a.ticket-mention .ticket-mention-subject { .rich-text .ticket-mention .ticket-mention-subject {
@apply max-w-[220px] truncate text-neutral-700; @apply max-w-[220px] truncate text-neutral-700;
} }
.rich-text a[data-ticket-mention="true"][data-ticket-status="PENDING"] .ticket-mention-dot, .rich-text [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 .ticket-mention[data-ticket-status="PENDING"] .ticket-mention-dot {
@apply bg-amber-400; @apply bg-amber-400;
} }
.rich-text a[data-ticket-mention="true"][data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot, .rich-text [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 .ticket-mention[data-ticket-status="AWAITING_ATTENDANCE"] .ticket-mention-dot {
@apply bg-sky-500; @apply bg-sky-500;
} }
.rich-text a[data-ticket-mention="true"][data-ticket-status="PAUSED"] .ticket-mention-dot, .rich-text [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 .ticket-mention[data-ticket-status="PAUSED"] .ticket-mention-dot {
@apply bg-violet-500; @apply bg-violet-500;
} }
.rich-text a[data-ticket-mention="true"][data-ticket-status="RESOLVED"] .ticket-mention-dot, .rich-text [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 .ticket-mention[data-ticket-status="RESOLVED"] .ticket-mention-dot {
@apply bg-emerald-500; @apply bg-emerald-500;
} }
.rich-text ul { @apply my-2 list-disc ps-5; } .rich-text ul { @apply my-2 list-disc ps-5; }