WysiwygPRO

Wysiwyg forma parte del apartado «Formularios» del kit. Campos de entrada, selección, fechas y texto enriquecido, con validación y estados.

Instalación#

bash

pnpm add @tsukira/ui

tsx

import { Wysiwyg } from "@tsukira/ui"; export function Ejemplo() {  return <Wysiwyg />;}

Los ejemplos detallados de Wysiwyg están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.

WysiwygPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>

Prop	Tipo	Default	Descripción
`value`	`string`	—	HTML controlado.
`onChange`	`((html: string) => void)`	—	Cambio del HTML.
`defaultValue`	`string`	—	Valor inicial uncontrolled.
`placeholder`	`string`	—	Placeholder cuando está vacío.
`toolbar`	`(ToolbarKey \| { icon: ReactNode; tooltip: string; onClick: (editor: CustomEditor) => void`	—	Botones de la toolbar; si no se pasa, set por defecto.
`isActive`	`(editor: CustomEditor) => boolean })[]`	—	—
`showToolbar`	`boolean`	true)	Mostrar toolbar (default true).
`minHeight`	`number`	—	Alto mínimo (px).
`readOnly`	`boolean`	—	Desactivar edición.
`onImageUpload`	`((file: File) => Promise<string>)`	—	Subida de imágenes.
`onUploadError`	`((error: unknown) => void)`	—	Callback opcional cuando falla la subida.
`uploadErrorMessage`	`string`	—	Mensaje de error de subida.

WysiwygPreviewPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`html`*	`string`	—	—