TextEditor

Editor de texto enriquecido sencillo: negrita, cursiva, subrayado, listas, enlaces y alineación.

Cuándo usarlo

Props. label, defaultValue (HTML), onChange(html), placeholder, maxLength (muestra los caracteres restantes) o hint, minHeight, disabled.

Visual. Barra de botones de 32px con text-editor-icon-fg (activos text-editor-icon-fg_active sobre bg-primary_hover); área radius-xl, borde border-primary, foco border-brand.

Límites. Usa el modo de edición nativo del navegador: vale para notas y descripciones. Para documentos largos o Markdown, mejor un editor dedicado. Limpia el HTML antes de guardarlo.

Recuento. maxLength muestra "421 caracteres restantes", contando los saltos entre párrafos y elementos de lista, pero no corta el texto.

Accesibilidad. El área es un contentEditable con role="textbox"; la etiqueta la nombra con aria-labelledby porque un área editable no admite <label for>. Los botones de formato llevan aria-pressed.

Ejemplos

Notas

Revisar el seguro del coche antes del 15.

Comparar dos ofertas
Llamar al banco

424 caracteres restantes

Props

Prop	Tipo	Por defecto	Descripción
`label`	`ReactNode`	—	Etiqueta visible encima de la barra.
`defaultValue`	`string`	—	HTML inicial.
`onChange`	`((html: string) => void)`	—	Recibe el HTML en cada cambio. Límpialo antes de guardarlo.
`placeholder`	`string`	`Escribe aquí…`
`maxLength`	`number`	—	Muestra los caracteres que quedan en lugar de `hint`. No corta el texto.
`hint`	`ReactNode`	—	Pista bajo el área, si no hay `maxLength`.
`minHeight`	`number`	`160`	Alto mínimo del área en px.
`disabled`	`boolean`	—
`labels`	`Partial<TextEditorLabels>`	—	Textos sustituibles.
`id`	`string`	—
`className`	`string`	—

Código

import { TextEditor } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<TextEditor label="Notas" maxLength={500} onChange={guardar} />
		</>
	);
}

---
import { TextEditor } from "@jotis-me/react";
---

<TextEditor client:load label="Notas" maxLength={500} onChange={guardar} />

onChange es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.