Todos los componentes (204)

Barra del editor de texto

Campos · RichTextToolbar

Qué es y cuándo usarlo

La barra de un editor de texto enriquecido, sin el editor: el editor lo trae la aplicación (Tiptap, Lexical o el que sea) y la barra solo habla con él por state (lo que hay puesto donde está el cursor) y onCommand (lo que se pide). Así la biblioteca sigue sin dependencias y la barra vale igual con cualquier editor. Las recetas para Tiptap y Lexical están en la guía del editor y en las dos historias de abajo, con el editor de verdad funcionando.

Cuándo usarlo

El texto largo de un panel de gestión: la descripción de un producto, una noticia, una plantilla de correo.
marks y blocks para dejar solo lo que el contenido admite (sin títulos en una descripción corta, por ejemplo).
onLinkChange y onImageInsert para que salgan el enlace y la imagen, con sus paneles.
shortcuts con los atajos de TU editor: la barra los anuncia y los enseña, no los escucha.

Cuándo no

Texto sin formato, aunque sea largo: TextArea.
Código: CodeField.
Una barra de acciones sobre una tabla o una lista: Toolbar a secas.

Teclado: toda la barra es una sola parada del tabulador; dentro, flecha derecha e izquierda van de botón en botón, cruzando los grupos y saltándose lo apagado. Intro y Espacio piden el formato y el foco se queda en la barra, que es lo que pide la APG. Al volver con el tabulador, el foco vuelve al último botón. En los paneles de enlace e imagen, Intro en un campo aplica y Escape cierra.

Accesibilidad: label es obligatoria (puede haber varios editores en la página). Cada formato es un ToggleButton con aria-pressed y su atajo en aria-keyshortcuts; los grupos llevan nombre («Formato», «Bloques», «Insertar», «Historial»). Pulsar con el ratón no le quita el foco al editor, así que el cursor y la selección siguen donde estaban. La dirección de un enlace o de una imagen se comprueba antes de salir de la barra: un javascript: nunca llega al editor. La imagen pide texto alternativo salvo que se marque como decorativa, y entonces sale alt="" a propósito. Pon aria-controls con el id del área editable.

Aspecto fino: la barra es una Toolbar (variant, overflow); --amset-richtext-gap es el hueco entre botones. Para el editor, .amset-richtext__frame (la caja con borde y anillo de foco) y .amset-richtext__content (la tipografía de lo escrito), con --amset-richtext-min-height.

Cómo se ve

Puesto: negrita, título 2

<RichTextToolbar
  label="Formato de la descripción"
  state={{ active: editor.activos, unavailable: editor.sinUsar }}
  onCommand={(orden) => editor.aplicar(orden)}
  variant="outline"
  size="sm"
  history
  clearFormatting
/>

Props

Se importa con import { RichTextToolbar } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	De que editor es: «Formato de la descripción». Obligatorio, puede haber varios en la pagina.
`onCommand`obligatoria	`(command: RichTextCommand) => void`	Se pide un formato (se pone o se quita) o una accion. La aplica el editor.
`state`obligatoria	`RichTextState`	Lo que hay puesto donde esta el cursor, leido del editor en cada cambio.
`blocks`	`readonly RichTextBlock[]`	Que bloques salen. Por defecto todos. `[]` los quita.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`clearFormatting`	`boolean`	«Quitar el formato». Por defecto si.
`disabled`	`boolean`	Toda la barra fuera de juego: el editor esta en solo lectura.
`history`	`boolean`	Deshacer y rehacer. Por defecto si.
`marks`	`readonly RichTextMark[]`	Que marcas salen, en el orden de siempre. Por defecto todas. `[]` las quita.
`onImageInsert`	`(image: RichTextImage) => void`	Con esto sale el boton de imagen: recibe la direccion, ya comprobada, y el texto alternativo.
`onLinkChange`	`(link: RichTextLink \| null) => void`	Con esto sale el boton de enlace: recibe el enlace nuevo, ya comprobado, o `null` para quitarlo.
`overflow`	`"split" \| "scroll"`	`split` (por defecto) baja a otra linea lo que no cabe; `scroll` se recorre de lado.
`shortcuts`	`Readonly<Partial<Record<RichTextCommand, string>>>`	Los atajos del editor, con `Mod` para Control o Comando. Se anuncian y salen en la ayuda; no se escuchan aqui.
`size`	`"sm" \| "md"`	—
`variant`	`"outline" \| "raised" \| "flat"`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: