MdxField

Shows a markdown string as formatted text in a read-only editor.

Installation

pnpm dlx shadcn@latest add @chelone/mdx-editor

Loading preview…

<MdxField> renders a markdown string as formatted text: headings, lists, links, images and tables. Use it where the value is long-form content, such as a show view.

It is an add-on installed from the registry, with the editor as an optional peer dependency. The MdxInput page covers installing it, the style import, and how the React and Vue editors differ.

In a show view

import { RecordField, Show } from "@chelone/react";
import { MdxField } from "@/components/mdx-editor/mdx-field";
 
export const PostShow = () => (
  <Show>
    <RecordField source="body">
      <MdxField source="body" empty="No content" />
    </RecordField>
  </Show>
);

A missing value shows empty. A string is translated, and in React a node renders as-is. In Vue, the #empty slot replaces the editor.

For a list cell, use TextField. It prints plain text and loads no editor, so a datagrid of many rows stays light.

Props

Prop	Type	Default	Description
cellClassName	string	—	A class name to apply to the cell element when used inside `<DataTable>`.
className	string	—	A class name to apply to the root element.
empty	ReactNode	—	The node to display when the field value is empty. Defaults to nothing. A string is translated; a ReactNode renders as-is.
headerClassName	string	—	A class name to apply to the header cell element when used inside `<DataTable>`.
label	ReactNode	—	Label to use as column header when using `<DataTable>` or `<SimpleShowLayout>`. Defaults to the capitalized field name. Set to `false` to disable the label.
plugins	RealmPlugin[]	—	The editor plugins. Defaults to `defaultFieldPlugins`. The field adds an inert `<img>` visitor to whatever list it gets, so `imagePlugin()` cannot run the `onerror` of raw `<img>` HTML.
record	RecordType	—	The record to render. Defaults to the ambient `RecordContext` value.
resource	string	—	The resource name. Defaults to the ambient `ResourceContext` value.
sortable	boolean	—	Disable the header click handler when used inside `<DataTable>`.
sortBy	string	—	The field to sort by when this column head is clicked, if sortable.
sortByOrder	SortOrder	—	The order used for sorting when this column head is clicked, if sortable.
source	SourceProp<RecordType>	—	Name of the property to display (dot/bracket path).
suppressHtmlProcessing	boolean	—	Keeps raw HTML in the markdown as text. Defaults to `true`, since a field shows records other people wrote. Pass `false` to render stored HTML live: an `<iframe src="javascript:...">` then runs script as the field mounts, and a `javascript:` link runs on click.
textAlign	TextAlign	—	The text alignment for the cell content, when used inside `<DataTable>`.

Vue takes class, crepe-config, default-value and empty besides source and record, and has none of the other props above. To edit the value, use MdxInput.