MarkdownField

MarkdownField renders a <textarea> for Markdown input inside a styled FieldContainer. A "Preview" button below the textarea opens MarkdownPreviewModal in full-screen mode, rendering the Markdown as HTML so the author can review the output without leaving the form. Extra native textarea attributes can be passed via the rest-props spread.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Current Markdown text. | | onChange | (value: string) => void | Yes | — | Called with the updated Markdown string on every keystroke. | | label | string | No | — | Label rendered in the field header. | | description | string | No | — | Helper text rendered below the field. | | placeholder | string | No | — | Placeholder text for the textarea. | | rows | number | No | 3 | Initial number of visible text rows. | | resizable | boolean | No | true | Whether the user can drag the resize handle. | | id | string | No | — | id attribute on the <textarea>. | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the field body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. | | ...props | any | No | — | Additional attributes forwarded to the <textarea>. |

Usage

Basic

import React, { useState } from 'react';
import MarkdownField from '@/components/fields/MarkdownField';

export default function Example() {
  const [content, setContent] = useState('');

  return (
    <MarkdownField
      label="Article body"
      value={content}
      onChange={setContent}
      placeholder="Write your article in Markdown..."
      rows={10}
    />
  );
}

Non-resizable with description

<MarkdownField
  label="Product description"
  value={description}
  onChange={setDescription}
  rows={6}
  resizable={false}
  description="Supports standard Markdown syntax."
/>