Todos los componentes (244)

Editor de texto enriquecido

Campos · RichTextEditor

Qué es y cuándo usarlo

Un editor de texto enriquecido propio, sin ninguna dependencia: se importa de @amset/ui/rich-text y solo se carga donde se usa. Escribe con la barra o con el teclado (los atajos de Markdown funcionan: # , - , 1. , > , **negrita**), pega desde Word o Google Docs sin arrastrar su basura, y guarda JSON (lo exacto) o HTML, a elegir con format.

Cuándo usarlo

El texto largo de un panel de gestión: la descripción de un producto, una noticia, una plantilla de correo.
Contenido que luego se enseña con RichTextView, también en el servidor y sin dangerouslySetInnerHTML.

Cuándo no

Texto sin formato: TextArea. Código: CodeField.

Insertar y configurar: el botón Insertar de la barra abre todo lo que se puede meter (texto, estructura, bloques propios y los componentes de AMSET UI por familias), con un buscador; lo mismo sale escribiendo «/». Un componente recién insertado sale con sus propiedades abiertas, y se vuelven a abrir con doble clic sobre él, con el botón derecho o con el botón de la barra.

Botón derecho: lo que hay debajo (un componente: propiedades, duplicar, subir, bajar, eliminar; una imagen; un enlace: editarlo, abrirlo, quitarlo; una tabla: filas, columnas y celdas) y la edición de siempre (cortar, copiar, pegar, formato). Con el teclado, la tecla de menú o Mayús+F10.

Imágenes: desde el panel de imagen se elige una del equipo o se pega su dirección; pegar o soltar una captura también funciona. Con onImageUpload se sube a donde diga la aplicación; sin él, se incrusta en el documento. El texto alternativo se pide siempre (o marcarla decorativa).

Enlaces: el panel pide el texto del enlace (lo que se lee), la dirección y una descripción opcional, y avisa si el texto no dice adónde lleva («aquí», una dirección).

Pantalla completa: la del navegador; si no la deja (un iframe sin permiso), la capa superior, que ocupa la ventana aunque el editor viva dentro de algo con transform.

Valor: format="json" (por defecto) entrega y recibe el documento; format="html" entrega y recibe un texto HTML ya saneado. Controlado con value o libre con defaultValue. maxLength es opcional: sin valor, no hay límite.

Teclado: Alt+F10 lleva a la barra de herramientas y Escape vuelve al texto. Tab baja un nivel en una lista o salta de celda en una tabla; Mod+Z y Mod+Mayús+Z deshacen y rehacen; Mod+F busca y reemplaza.

Accesibilidad: label es obligatoria. El área editable es un textbox multilínea con su nombre, su ayuda y su error enlazados; el contador anuncia cuántos caracteres quedan solo cuando son pocos. Lo que se pega y lo que se exporta pasa por un esquema que descarta todo lo que no conoce: ni <script>, ni manejadores, ni javascript:.

Aspecto fino: --amset-richtext-min-height y --amset-richtext-max-height (también con rows y maxHeight); la tipografía de lo escrito es .amset-richtext__content.

Cómo se ve

Descripción del producto

Editor de texto enriquecido. Alt+F10 lleva a la barra de herramientas.

16 palabras · 97 caracteres

import { RichTextEditor } from "@amset/ui/rich-text";

<RichTextEditor
  label="Descripción del producto"
  format="html"
  defaultValue={html}
  onChange={setHtml}
  rows={6}
  counter
/>

Props

Se importa con import { RichTextEditor } from '@amset/ui/rich-text'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	Obligatoria: es el nombre del campo para quien no lo ve.
`hiddenLabel`	`boolean`	—
`hint`	`string`	—
`error`	`string`	—
`placeholder`	`string`	—
`rows`	`number`	Lineas que se ven de salida. Al escribir mas, crece.
`maxHeight`	`string \| number`	La altura a partir de la cual el area se desplaza en vez de crecer. Sin valor, crece sin limite.
`toolbar`	`boolean`	La barra de herramientas. Por defecto, si.
`shortcuts`	`RichTextShortcuts`	Los atajos que se anuncian en la barra.
`counter`	`boolean`	Enseña cuanto texto lleva (palabras y caracteres) bajo el editor.
`maxLength`	`number`	Limite de caracteres, solo si lo quieres: sin valor no hay limite. Se enseña «123 / 500».
`blocks`	`RichTextBlocks`	Los bloques propios que se pueden insertar y pintar dentro del texto (una tarjeta, una grafica...), por su `kind`. Cada uno sale en el menu «/» y se pinta con su `render`.
`aiCommands`	`readonly RichTextAiCommand[]`	Los comandos del asistente ("Resumir", "Traducir"...): salen en el menu «/» y en la barra flotante.
`onAiCommand`	`(request: RichTextAiRequest) => void`	Se elige un comando del asistente. Lo que pase despues (llamar a un modelo, proponer cambios) es cosa de quien integra el editor.
`bubbleToolbar`	`boolean`	La barra que sale sobre un texto seleccionado. Por defecto, si.
`blockHandles`	`boolean`	El asa para arrastrar bloques de sitio, a la izquierda de cada uno. Por defecto, si.
`accessibilityCheck`	`boolean`	Avisa mientras se escribe de lo que falta para que sea accesible (imagenes sin descripcion, tablas sin cabecera...). Por defecto, si.
`mentions`	`RichTextMentions`	Con esto, escribir «@» y un nombre abre una lista de lo que devuelva `search`; elegir una pone la mencion en el texto.
`onImageUpload`	`(file: File) => Promise<string>`	Sube un fichero (una imagen pegada, soltada o elegida del equipo en el panel de imagen) y devuelve su direccion. Sin esto la imagen se incrusta en el documento en base64: funciona sin servidor, pero pesa.
`spellchecker`	`RichTextSpellchecker`	El corrector ortografico: con uno, los fallos se subrayan, el boton derecho (o la tecla de menu) sobre uno ofrece sugerencias, ignorar y, si el corrector lo sabe, añadir al diccionario. Ver `createWordSpellchecker` y `createLanguageToolSpellchecker`. Sin esto se queda el del navegador.
`lang`	`string`	El idioma del texto (`es`, `en-GB`): lo usa el corrector y el atributo `lang` del area editable.
`review`	`RichTextReview`	Comentarios y sugerencias: con esto la barra trae «Comentar», «Sugerir cambios» y la lista de revision. Los hilos los guardas tu (`threads`/`onThreadsChange`); las sugerencias van dentro del documento.
`versions`	`RichTextVersions`	El historial de versiones: la barra trae un boton que abre la lista, deja ver lo que cambio desde cada version y restaurarla (se puede deshacer). Las versiones las guardas tu: `versions`, `load` y, para guardar desde el panel, `onSave`.
`autoFocus`	`boolean`	—
`name`	`string`	Con `name`, el editor lleva un campo oculto con el HTML para que un formulario normal (sin JavaScript) lo envie.
`onFocus`	`() => void`	El foco entra en el area editable o sale de ella: lo que necesita un formulario para saber si se ha tocado.
`onBlur`	`() => void`	—
`className`	`string`	—
`style`	`CSSProperties`	—
`id`	`string`	—
`aria-describedby`	`string`	—
`editorRef`	`Ref<RichTextEditorHandle>`	El manejador para enfocar el editor o leer su documento desde fuera.
`format`	`'json'`	—
`value`	`RichDocument`	—
`defaultValue`	`RichDocument`	—
`onChange`	`(value: RichDocument) => void`	—

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: