MarkdownField

MarkdownField renderiza un <textarea> para entrada de Markdown dentro de un FieldContainer estilizado. Un botón "Preview" debajo del textarea abre el MarkdownPreviewModal en pantalla completa, renderizando el Markdown como HTML para que el autor revise el resultado sin salir del formulario.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | Texto Markdown actual. | | onChange | (value: string) => void | Sí | — | Llamado con la cadena Markdown actualizada en cada tecla presionada. | | label | string | No | — | Etiqueta mostrada en el encabezado del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo. | | placeholder | string | No | — | Texto placeholder para el textarea. | | rows | number | No | 3 | Número inicial de filas de texto visibles. | | resizable | boolean | No | true | Si el usuario puede arrastrar el asa de redimensionamiento. | | id | string | No | — | Atributo id en el <textarea>. | | containerStyle | React.CSSProperties | No | — | Estilos del FieldContainer exterior. | | headerStyle | React.CSSProperties | No | — | Estilos del área de encabezado del campo. | | bodyStyle | React.CSSProperties | No | — | Estilos del área de cuerpo del campo. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del contenedor exterior. | | ...props | any | No | — | Atributos adicionales reenviados al <textarea>. |

Uso

Básico

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

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

  return (
    <MarkdownField
      label="Cuerpo del artículo"
      value={content}
      onChange={setContent}
      placeholder="Escribí tu artículo en Markdown..."
      rows={10}
    />
  );
}

No redimensionable con descripción

<MarkdownField
  label="Descripción del producto"
  value={description}
  onChange={setDescription}
  rows={6}
  resizable={false}
  description="Admite sintaxis estándar de Markdown."
/>