- 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.
Address Marge's review on PR #913:
- pre code: add `block min-w-full whitespace-pre font-mono text-foreground`
so pasted/markdown-rendered code blocks mirror CODE_BLOCK_CLASS in
markdown.tsx token-for-token. Previously the composer's pre code only
reset the inline-code styling; it inherited block layout by default,
which is fine in practice but isn't true parity.
- anchor: add `transition-colors hover:text-primary/80` so hover
treatment matches the rendered timeline.
Heading sizes, pre shadow (shadow-xs), and pre max-h ([400px]) were
flagged in review but already match markdown.tsx exactly (h1=text-xl
leading-8, h2=text-lg leading-7, h3=text-base leading-6 at line 791-806;
pre uses shadow-xs and max-h-[400px] at line 436). No change needed
there.
Verified: pnpm typecheck, pnpm lint, pnpm build all green.
Composer styling now mirrors the rendered Markdown timeline (default
variant in shared/ui/markdown.tsx) so what the user sees while typing
matches what they see after sending — every block element (p, ul, ol,
li, blockquote, pre, hr, h1/h2/h3, inline code, links).
Key changes
- Inter-block spacing driven by an owl rule (` & > * + * `) using the
same Tailwind tokens as the timeline (mt-3, mt-3.5 for headings /
blockquote / code-block, mt-4 for hr, mt-1.5 for p+ul/ol). Removes the
empty-list height jitter: a freshly toggled ul/ol with no items adds
no margin of its own, so the editor only grows when items appear.
- Editor wrapper bumped from leading-6 to leading-7 and min-height from
1.5rem to 1.75rem to match the rendered side.
- Per-element styles converted to Tailwind utilities via @apply:
list-disc/decimal pl-6 space-y-1 marker:text-muted-foreground on
ul/ol; my-1 [&_p]:inline on li; bordered/italic blockquote with
child-margin owl rules; rounded code-block with border/bg/shadow;
inline code with rounded bg-muted; primary underlined links.
- Headings (h1/h2/h3) gain proper sizing — only reachable via paste
since heading input rules are still disabled in StarterKit, but
pasted markdown round-trips correctly now.
Behavior change
- Shift+Enter now splits into a real new paragraph (splitBlock) instead
of inserting a hard break (<br>). Plain Enter still submits. This
matches user intuition (Slack/iMessage style) and keeps WYSIWYG —
previously the soft-break composer rendering looked tighter than the
paragraph spacing the message would receive on send. The hardBreak
node is still enabled in StarterKit so pasted markdown containing
explicit hard breaks round-trips.
Verified: pnpm typecheck, pnpm lint, pnpm build all green.
npub1223z34hd7vtwc6qj4s7flsxkj644nlre2nthu7lrrmkumhu3xddsrx9r6w