tbenandClaude Opus 5.5
3e78d51b56
Lists no longer add twui's 25px list margin on top of full width, markdown blocks and list items are capped at the column, long words and inline code wrap anywhere, and ref chips with long labels truncate instead of pushing the line past the edge. Co-Authored-By: Claude Opus 5.5 <[email protected]>
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
import type { Components } from "react-markdown";
|
|
import P from "@moduletrace/twui/layout/P";
|
|
import Span from "@moduletrace/twui/layout/Span";
|
|
import Stack from "@moduletrace/twui/layout/Stack";
|
|
import MarkdownList from "../(partials)/markdown-list";
|
|
import UserMarkdownLink from "../(partials)/user-markdown-link";
|
|
import { MessageMarkdownComponents } from "./message-markdown-components";
|
|
|
|
const Heading: Components["h1"] = ({ children }) => (
|
|
<P noMargin className="text-sm leading-5 font-bold text-on-ink">
|
|
{children}
|
|
</P>
|
|
);
|
|
|
|
/**
|
|
* The user's own message markdown, on the ink bubble: the chat's
|
|
* components (`MessageMarkdownComponents`) in the bubble's colours, and
|
|
* headings no bigger than the text. Code blocks and ref chips keep their
|
|
* own surface.
|
|
*/
|
|
export const UserMarkdownComponents: Components = {
|
|
...MessageMarkdownComponents,
|
|
p: ({ children }) => (
|
|
<P noMargin className="text-sm leading-5 text-on-ink">
|
|
{children}
|
|
</P>
|
|
),
|
|
h1: Heading,
|
|
h2: Heading,
|
|
h3: Heading,
|
|
h4: Heading,
|
|
h5: Heading,
|
|
h6: Heading,
|
|
a: UserMarkdownLink,
|
|
ul: ({ children }) => <MarkdownList className="text-on-ink">{children}</MarkdownList>,
|
|
ol: ({ children, start }) => (
|
|
<MarkdownList ordered start={start} className="text-on-ink">
|
|
{children}
|
|
</MarkdownList>
|
|
),
|
|
code: ({ children }) => (
|
|
<Span className="font-mono text-[13px] px-1 py-px rounded-default-xs bg-on-ink/15 text-on-ink wrap-anywhere">
|
|
{children}
|
|
</Span>
|
|
),
|
|
blockquote: ({ children }) => (
|
|
<Stack className="gap-2! items-stretch pl-3 border-0 border-l-2 border-solid border-on-ink/40 opacity-80">
|
|
{children}
|
|
</Stack>
|
|
),
|
|
};
|