fix(desktop): composer↔timeline parity round 3 — text color, tables, code-block fixups

- Editor wrapper gains text-foreground/90 to match markdown.tsx outer
  default-variant wrapper. Default paragraph text is now the same shade
  in composer and timeline.
- Add table/td/th rules + table adjacency (mt-3.5) mirroring timeline
  tokens. StarterKit has no Table extension so they only fire via raw
  HTML paste — defensive parity. overflow-x-auto requires a block-mode
  container which we can't add without a NodeView; intentionally omitted.
- Drop the rounded-none/bg-transparent/p-0 extras on pre code that
  weren't in CODE_BLOCK_CLASS — parent <pre> reset is enough.
- Extend the p+ul/p+ol companion to cover div+ul/div+ol, matching the
  timeline's [&>div+ul]:mt-1.5 [&>div+ol]:mt-1.5 rule. No-op in the
  composer today (no block-media divs) but token-for-token.
- code-block-lines marker class from CODE_BLOCK_CLASS is intentionally
  omitted: it's a custom CSS class (not a Tailwind utility, so @apply
  won't compile) and its rules only target [data-line] children
  produced by Shiki tokenization, which the composer never has. Adding
  the literal class to the <code> requires a TipTap codeBlock node
  override — flagged for a follow-up.
This commit is contained in:
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w
2026-06-08 17:18:02 -07:00
parent 589acfcb14
commit 40d0916f73
+32 -5
View File
@@ -230,7 +230,7 @@
* composer height stays static until additional items are added.
*/
.rich-text-composer .tiptap {
@apply text-sm leading-7 outline-none;
@apply text-sm leading-7 text-foreground/90 outline-none;
min-height: 1.75rem; /* one line at leading-7 (28px) */
}
@@ -271,9 +271,11 @@
@apply mt-4;
}
/* Lists immediately after a paragraph hug a little tighter. */
/* Lists immediately after a paragraph or block-media div hug a little tighter. */
.rich-text-composer .tiptap > p + ul,
.rich-text-composer .tiptap > p + ol {
.rich-text-composer .tiptap > p + ol,
.rich-text-composer .tiptap > div + ul,
.rich-text-composer .tiptap > div + ol {
@apply mt-1.5;
}
@@ -330,8 +332,13 @@
}
.rich-text-composer .tiptap pre code {
/* Mirrors CODE_BLOCK_CLASS in markdown.tsx so a pasted/markdown-rendered
* code block looks identical in the composer and in the timeline. */
@apply block min-w-full whitespace-pre rounded-none bg-transparent p-0 font-mono text-[13px] leading-6 text-foreground;
* code block looks identical in the composer and in the timeline. The
* `code-block-lines` marker class from CODE_BLOCK_CLASS is intentionally
* omitted — its rules (lines ~478-498 of this file) only target
* `[data-line]` children produced by Shiki tokenization, which the
* composer never has. The class is also a custom CSS class, not a
* Tailwind utility, so `@apply code-block-lines` won't compile. */
@apply block min-w-full whitespace-pre font-mono text-[13px] leading-6 text-foreground;
}
/* Blockquote. */
@@ -380,6 +387,26 @@
@apply border-border/80;
}
/* Tables. Timeline wraps the <table> in a `data-table-block` div with the
* overflow/border/rounded chrome; TipTap's StarterKit has no table extension,
* so a real table would only appear via raw HTML paste. We mirror the
* timeline tokens defensively — chrome applied directly to the <table>
* (overflow-x-auto requires a block-display container we can't add here
* without a NodeView, so it's intentionally omitted). */
.rich-text-composer .tiptap table {
@apply w-full border-collapse rounded-2xl border border-border/70 text-left text-sm;
}
.rich-text-composer .tiptap td {
@apply border-t border-border/70 px-3 py-2 align-top;
}
.rich-text-composer .tiptap th {
@apply bg-muted/60 px-3 py-2 font-semibold text-foreground;
}
.rich-text-composer .tiptap > * + table,
.rich-text-composer .tiptap > table + * {
@apply mt-3.5;
}
.rich-text-composer .tiptap .mention-highlight {
display: inline-block;
border-radius: 4px;