'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
FormulariosAlea Pro
MarkdownEditor
Escribe Markdown con barra de herramientas y atajos, previsualízalo y muéstralo de forma segura en cualquier lugar.
import { MarkdownEditor, Markdown } from '@alea/pro';
Ejemplos
Escribe y previsualiza
Barra de herramientas, atajos ⌘B ⌘I ⌘K, una cuenta regresiva y una vista previa segura.
Mostrar Markdown
El Markdown genera elementos de React, así que el HTML y los enlaces javascript: se ignoran.
Safe by design
A normal link works, a script link) does not.
<img src=x onerror=alert(1)> stays text.
npm i @alea/uiTokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-border…--alea-border-control…--alea-field-bg…--alea-focus-halo…--alea-status-warning…--alea-surface-hover…--alea-text…--alea-text-faint…--alea-text-muted…
Radius
--alea-radius-field…--alea-radius-sm…
Type
--alea-font-family-mono…--alea-font-size-md…--alea-font-size-sm…
Props
MarkdownEditor props
Escribe Markdown con una barra de formato y atajos, y previsualízalo.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
labelobligatoria | ReactNode | - | La etiqueta visible. |
className | string | - | Clases extra para el elemento raíz. |
defaultValue | string | '' | El Markdown al inicio. |
description | ReactNode | - | Texto de ayuda mostrado bajo el campo. |
maxLength | number | - | Muestra un contador de caracteres; con maxLength cuenta hacia atrás. |
onChange | ((v: string) => void) | - | Se llama con el Markdown en cada cambio. |
placeholder | string | - | Se muestra mientras no hay valor. |
rows | number | 8 | Filas del área de texto. Por defecto 8. |
value | string | - | El Markdown (controlado). |
Markdown props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
sourceobligatoria | string | - | El texto Markdown. |
className | string | - | Clases extra. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
MarkdownEditor
- Estados
- Focus insideHover (CSS)Focus (CSS)
- Motion
- presstintnudge
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-mdeditor.alea-mdeditor-tabs.alea-mdeditor-bar.alea-mdeditor-tools.alea-mdeditor-tool.alea-mdeditor-panel.alea-textarea.alea-mdeditor-area.alea-mdeditor-preview.alea-mdeditor-empty.alea-mdeditor-count- Atributos data
data-low
Markdown
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-markdown
Accesibilidad
- Un área de texto con etiqueta; los botones de la barra nombran sus atajos.
- El Markdown se muestra como elementos de React, nunca como un string HTML, así que el HTML pegado o los enlaces javascript: no hacen nada.
Teclado
| Tecla | Acción |
|---|---|
| ⌘B / Ctrl+B | Negrita |
| ⌘I / Ctrl+I | Cursiva |
| ⌘K / Ctrl+K | Enlace |
Qué hacer y qué evitar
Hacer
- Muestra el límite de caracteres cuando lo hay.
- Ofrece la vista previa antes de enviar.
Evitar
- No muestres Markdown de personas con dangerouslySetInnerHTML: usa <Markdown>.
- No escondas los atajos de la barra: están en los nombres de los botones.