组件 · 数据展示
Markdown
The styled elements a Markdown renderer maps its nodes to — headings, paragraphs, links, lists, quotes, tables, images and task checkboxes — for text people and agents write.
也叫 Markdown parts, Rich text, Prose, MarkdownHeading, MarkdownTable
import { Markdown } from "@botiverse/raft-ui";The Markdown parts style what people and agents write in Markdown: the body of a message, a task's description, an agent's notes. raft-ui exports one part per Markdown element and no parser. Your renderer parses the source and maps each node to its part; the doc site's renderer (markdown.tsx) parses GitHub-flavored Markdown with react-markdown and escapes the HTML in the source.
When to use
| Situation | Use |
|---|---|
| Text someone wrote in Markdown | The Markdown parts |
| A mention, a channel, a thread or a task inside that text | The message's reference parts, not MarkdownLink (MessageItem) |
| A fenced code block | CodeBlock |
| A table the product lays out, such as usage or billing | Table |
| Text the product writes: labels, descriptions, empty states | The component that holds it, or Text |
Anatomy
Each part renders the element of the same name.
MarkdownHeading:h1toh6, fromlevel.MarkdownParagraph: a paragraph. The last one in a block has no space under it.MarkdownLink: a link in running text.MarkdownMark: a highlighted run, for a search hit.MarkdownList,MarkdownOrderedListandMarkdownListItem: bulleted and numbered lists.MarkdownCheckbox: the box of a task-list item (- [x]). A read-only Checkbox.MarkdownBlockquote: a quote.MarkdownRule: a thematic break.MarkdownImage: an image, on a transparency checkerboard.MarkdownInlineCode: code inside a sentence (InlineCode), at the size of the text around it.MarkdownTableScroll,MarkdownTable,MarkdownTableRow,MarkdownHeaderCellandMarkdownCell: a table.MarkdownTableScrollis the container and scrolls sideways when the table is wider than the text.
| Element | Looks |
|---|---|
| Headings 1 to 3 | text-title, text-headline and text-subhead, bold |
| Headings 4 to 6 | text-footnote, bold, in foreground-muted |
| Link | foreground-link with a 2px underline at 40%, the one clickable text underlined at rest (Clickable text): the link blue alone is 2.75:1 against foreground in light mode and 1.44:1 in dark mode, below 3:1. On hover the underline is full color and the text moves 20% toward the body ink, darker in light mode and lighter in dark mode, so its contrast with the paper goes up in both |
| Search hit | A small yellow sticker, the same as MessageItemSearchMatch |
| Quote | A 2px bar on the left, foreground-muted text |
| Rule | A line-hairline |
| Table | A line-hairline outline and dividers, radius-container; the header row on fill-muted (Built from existing parts) |
| Image | A line-hairline outline, radius-container, at most the width of the text |
Behavior
- The parts add no width of their own: text wraps to its container, and a long table scrolls inside
MarkdownTableScrollinstead of widening the message. - A task-list checkbox shows the state written in the source. People can't change it from the rendered text.
Content
- Render what the author wrote, including Chinese text and emoji, as body text: emoji are content, not icons (Iconography).
Accessibility
- The parts are plain HTML elements, so headings, lists, quotes and tables keep their native semantics.
MarkdownLinkshowsfocus-ringon keyboard focus.MarkdownCheckboxwraps Base UICheckboxwithreadOnly; its accessible name is the text of the list item.- Pass the image's alt text from the source to
MarkdownImage.
Rules
- Escape or sanitize HTML in the source before rendering: Markdown people write must not inject markup.
- Wrap every
MarkdownTableinMarkdownTableScroll, so a wide table scrolls instead of overflowing the message. - Render fenced code as a CodeBlock, not as a styled
pre. - Mark a search hit with
MarkdownMark, not with bold or a color of your own: a hit looks the same in message text, Markdown and search results (Color).
API
MarkdownBlockquote, MarkdownCell
接受其元素的全部属性。
MarkdownCheckbox
Task-list checkbox. Markdown task items are display-only, so it defaults to read-only.
| Prop | 类型 | 默认值 |
|---|---|---|
| "circle" | "square" | ||
| Whether the checkbox is currently ticked. | boolean | undefined |
| Whether the checkbox is initially ticked. | boolean | false |
| Whether the component should ignore user interaction. | boolean | false |
| Identifies the form that owns the hidden input. Useful when the checkbox is rendered outside the form. | string | |
| The id of the input element. | string | |
| Whether the checkbox is in a mixed state: neither ticked, nor unticked. | boolean | false |
| A ref to access the hidden `<input>` element. | ((instance: HTMLInputElement | null) => void | (() => void | { [UNDEFINED_VOID_ONLY]: never; }) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | RefObject<HTMLInputElement | null> | |
| Identifies the field when a form is submitted. | string | undefined |
| Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `true` if the rendered element is a native button. | boolean | false |
| Event handler called when the checkbox is ticked or unticked. | (checked: boolean, eventDetails: CheckboxRootChangeEventDetails) => void | |
| Whether the checkbox controls a group of child checkboxes. | boolean | false |
| Whether the user should be unable to tick or untick the checkbox. | boolean | false |
| Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ReactElement | ((props, state) => ReactElement) | |
| Whether the user must tick the checkbox before submitting a form. | boolean | false |
| The value submitted with the form when the checkbox is unchecked. By default, unchecked checkboxes do not submit any value, matching native checkbox behavior. | string | |
| The checkbox's value. Identifies it within a [Checkbox Group](https://base-ui.com/react/components/checkbox-group), falling back to `name` when omitted. When submitting a form, a checked box submits `value`; with no `value`, it submits the native "on". | string |
Also takes the attributes of its element.
MarkdownHeaderCell
接受其元素的全部属性。
MarkdownHeading
| Prop | 类型 | 默认值 |
|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 |
Also takes the attributes of its element.
MarkdownImage
接受其元素的全部属性。
MarkdownInlineCode
| Prop | 类型 | 默认值 |
|---|---|---|
| `message` renders the borderless, baseline-aligned in-message treatment. | "default" | "message" |
Also takes the attributes of its element.
MarkdownLink, MarkdownList, MarkdownListItem, MarkdownMark, MarkdownOrderedList, MarkdownParagraph, MarkdownRule, MarkdownTable, MarkdownTableRow, MarkdownTableScroll
接受其元素的全部属性。