'/%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
RichTextEditor
Un editor de texto enriquecido (WYSIWYG) con una barra que se colapsa a las herramientas más usadas: estilos y tamaños de texto, marcas, listas y listas de tareas, tablas editables, imágenes, buscar y reemplazar, y atajos de Markdown. El contenido pegado y el valor se limpian a un conjunto seguro de etiquetas.
import { sanitizeRichText } from '@alea/ui';import { RichTextEditor } from '@alea/pro';
Ejemplos
RichTextEditor
Todas las herramientas, en una barra que empieza por las más usadas: Más herramientas muestra tamaño de texto, mayúsculas, color y resaltado, sangría, alineación y dirección, imágenes (subidas o por dirección, con texto alternativo), tablas editables, emoji, caracteres especiales, buscar y reemplazar, la vista HTML y pantalla completa. El HTML que recibes está limpio.
Menos herramientas
tools elige qué herramientas se muestran, en orden. RICH_TEXT_BASIC es un conjunto listo para comentarios y chat (negrita, cursiva, tachado, código, enlace, lista, emoji); RICH_TEXT_STANDARD sirve para publicaciones.
Solo lectura y HTML seguro
isReadOnly muestra el contenido sin la barra. sanitizeRichText limpia cualquier HTML con la misma lista de permitidos: el script, el manejador en línea y el enlace javascript: de abajo nunca pasan.
Listas de tareas, Markdown y la barra de la selección
Escribe "[] " para una lista de tareas, "# " para un título, "- " o "1. " para listas, "> " para una cita; marca una tarea haciendo clic en su casilla o con ⌘Enter (Ctrl+Enter). selectionToolbar añade una pequeña barra sobre el texto seleccionado.
Tokens
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-accent-strong…--alea-accent-subtle…--alea-bg…--alea-border…--alea-border-control…--alea-border-strong…--alea-chip-bg…--alea-chip-text…--alea-field-bg…--alea-focus…--alea-focus-halo…--alea-status-danger…--alea-surface-hover…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-3…--alea-space-4…--alea-space-5…
Radius
--alea-radius-field…--alea-radius-md…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-family-mono…--alea-font-size-md…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Shadow
--alea-shadow-pop…
Motion
--alea-motion-duration-base…--alea-motion-duration-fast…--alea-motion-duration-instant…--alea-motion-ease-emphasized…--alea-motion-ease-out…
Layer
--alea-z-modal…
Props
RichTextEditor props
Un editor de texto enriquecido (WYSIWYG): estilos y tamaños de texto, marcas, mayúsculas, color y resaltado, listas, listas de tareas y sangría, citas y código, enlaces, alineación y dirección, tablas editables, imágenes por dirección o subidas con texto alternativo, emoji y caracteres especiales, buscar y reemplazar, atajos de Markdown, vista HTML, pantalla completa, deshacer y conteo de palabras. La barra es una sola parada de Tab y se colapsa a las herramientas más usadas; el contenido pegado y el valor se limpian a un conjunto seguro de etiquetas, así nada pegado puede ejecutar código.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
aria-label | string | - | Nombre para lectores de pantalla cuando no hay etiqueta visible. |
className | string | - | Clases extra. |
collapsibleToolbar | boolean | true | Muestra primero las herramientas más usadas, con un botón Más herramientas para el resto (solo si ocultaría más de tres). Por defecto true; false muestra todas. |
defaultToolbarExpanded | boolean | false | Empieza con todas las herramientas a la vista. Por defecto false. |
defaultValue | string | '' | El contenido al inicio (no controlado). |
description | ReactNode | - | Texto de ayuda bajo el editor. |
isDisabled | boolean | - | Deshabilita la edición. |
isReadOnly | boolean | - | Muestra el contenido sin la barra y sin edición. |
label | ReactNode | - | La etiqueta visible. |
markdownShortcuts | boolean | true | Markdown mientras escribes: "# " título, "- " lista, "1. " numerada, "[] " lista de tareas, "> " cita, "---" línea, tres comillas invertidas código. Por defecto true. |
maxHeight | number | 400 | Altura del área de escritura antes de tener scroll, en px. Por defecto 400. |
maxImageSize | number | 2 | El archivo de imagen más grande que se puede subir, en MB (se guarda en el HTML como datos). Por defecto 2. |
maxLength | number | - | Muestra un contador de caracteres contra este límite (un límite suave: avisa, no corta). |
minHeight | number | 180 | Altura mínima del área de escritura, en px. Por defecto 180. |
onChange | ((html: string) => void) | - | Se llama con el HTML limpio en cada cambio. |
placeholder | string | - | Se muestra mientras el editor está vacío. |
selectionToolbar | boolean | false | Una pequeña barra sobre el texto seleccionado (negrita, cursiva, subrayado, enlace, resaltado, código), para el puntero. Por defecto false. |
showCount | boolean | true | Muestra el contador de palabras y caracteres. Por defecto true. |
tools | RichTextTool[] | ALL | Qué herramientas se muestran, en orden. Por defecto todas. Conjuntos listos: RICH_TEXT_BASIC (comentarios), RICH_TEXT_STANDARD (publicaciones) y el de por defecto (todo). |
value | string | - | El contenido como HTML (controlado). Se limpia a las etiquetas permitidas. |
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.
- Estados
- Focus insideHover (CSS)Pressed (CSS)DisabledFocus (CSS)Read onlyHoverExpanded
- 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-rte-find.alea-rte-find-current.alea-rte-tool.alea-rte-pop.alea-rte-caret.alea-rte-popover.alea-rte-swatches.alea-rte-swatch-grid.alea-rte-swatch.alea-rte-select.alea-rte-chars.alea-rte-char- Atributos data
data-variant=ghostdata-emptydata-overdata-fulldata-tabledata-ondata-checklist
Accesibilidad
- El área de escritura es un cuadro de texto de varias líneas con etiqueta; su texto de ayuda y el contador de caracteres están enlazados a ella.
- La barra es una sola parada de Tab: las flechas se mueven entre herramientas, Inicio y Fin saltan. Cada herramienta dice si está activa (aria-pressed) y nombra su atajo.
- La barra conserva la selección: presionar una herramienta da formato a lo seleccionado y devuelve el cursor.
- El HTML pegado y el valor pasan por una lista de permitidos (párrafos, títulos, listas, citas, código, enlaces con direcciones seguras, alineación), así nunca entran scripts, estilos ni enlaces javascript:.
- Escape sale del área de escritura, así quien usa el teclado nunca queda atrapado.
- Más herramientas es un botón que muestra u oculta (aria-expanded); la barra colapsada conserva las herramientas más usadas, y las de tabla aparecen mientras el cursor está en una tabla.
- Buscar y reemplazar es una región de búsqueda: se anuncia el número de coincidencias, se resaltan sin cambiar el texto, y se anuncian los reemplazos.
- Marcar una tarea se anuncia. En el contenido mostrado fuera del editor, la casilla es visual: di hecho o pendiente en el texto cuando importe.
- La barra de la selección es un atajo para el puntero: cada herramienta que tiene también está en la barra principal y en el teclado.
Teclado
| Tecla | Acción |
|---|---|
| ⌘B / Ctrl+B | Negrita |
| ⌘I / Ctrl+I | Cursiva |
| ⌘U / Ctrl+U | Subrayado |
| ⌘K / Ctrl+K | Agregar un enlace |
| ⌘F / Ctrl+F | Buscar y reemplazar |
| Shift+⌘V / Ctrl+Shift+V | Pegar sin formato |
| ⌘Enter / Ctrl+Enter | Marca o desmarca una tarea |
| # , - , 1. , [] , > y luego Espacio | Título, lista, lista numerada, lista de tareas, cita |
| --- o tres comillas invertidas, y luego Enter | Línea divisoria o bloque de código |
| ⌘Z / Ctrl+Z | Deshacer |
| Shift+⌘Z / Ctrl+Y | Rehacer |
| Flechas (en la barra) | Se mueven entre herramientas |
| Escape | Sale del editor, o cierra la barra de enlace o de búsqueda |
Qué hacer y qué evitar
Hacer
- Elige solo las herramientas que tu contenido necesita con tools: una caja de comentarios necesita negrita, cursiva, enlace y lista.
- Guarda el HTML limpio de onChange, y límpialo otra vez en el servidor antes de guardarlo.
- Usa maxLength para avisar de textos largos; nunca corta lo que se escribió.
Evitar
- No muestres HTML guardado con dangerouslySetInnerHTML sin limpiarlo: usa sanitizeRichText o muéstralo en un editor de solo lectura.
- No lo uses para campos de texto simple: TextArea es más liviano y claro.
- No lo uses cuando la gente escribe Markdown: MarkdownEditor conserva su sintaxis.
En Figma
RichTextEditor con los grupos de la barra como propiedades booleanas, estados Default, Focus, Disabled y Read only.