@tauro/editor

Editor de texto enriquecido para React, construido sobre Tiptap. Diseño moderno con soporte para temas claro/oscuro, selector de fuentes con integración de Google Fonts, y componente de previsualización incluido.

Instalacion

npm install @tauro/editor

Todas las dependencias de Tiptap se instalan automaticamente. Solo necesitas tener react y react-dom (>=18) en tu proyecto.

Uso basico

import { useState } from 'react'
import { RichEditor, Preview } from '@tauro/editor'
import '@tauro/editor/style.css'

function App() {
  const [content, setContent] = useState('<p>Hola mundo</p>')

  return (
    <>
      <RichEditor value={content} onChange={setContent} />
      <Preview value={content} />
    </>
  )
}

Componentes

<RichEditor />

Componente principal del editor. Se comporta como un input controlado.

<RichEditor
  value={content}
  onChange={setContent}
  placeholder="Escribe aqui..."
  editable={true}
  theme="dark"
  className="mi-editor"
/>

Props

| Prop | Tipo | Default | Descripcion | |------|------|---------|-------------| | value | string | — | Contenido HTML actual del editor (requerido) | | onChange | (html: string) => void | — | Callback cuando el contenido cambia (requerido) | | placeholder | string | undefined | Texto placeholder cuando el editor esta vacio | | editable | boolean | true | Controla si el editor es editable o solo lectura | | theme | 'dark' \| 'light' | 'dark' | Tema visual del editor | | className | string | undefined | Clase CSS adicional para el contenedor raiz |

<Preview />

Componente para previsualizar el HTML generado por el editor con estilos consistentes.

<Preview
  value={content}
  theme="dark"
  className="mi-preview"
/>

Props

| Prop | Tipo | Default | Descripcion | |------|------|---------|-------------| | value | string | — | Contenido HTML a renderizar (requerido) | | theme | 'dark' \| 'light' | 'dark' | Tema visual del preview | | className | string | undefined | Clase CSS adicional para el contenedor |

Funcionalidades del editor

Toolbar

La barra de herramientas incluye:

• Deshacer / Rehacer — historial de cambios
• Selector de fuente — fuentes del sistema + Google Fonts con busqueda
• Selector de tamano — 10px a 64px
• Formato de texto — Negrita, Cursiva, Subrayado, Tachado
• Alineacion — Izquierda, Centro, Derecha, Justificado
• Listas — Con vinetas y numeradas
• Limpiar formato — Elimina todos los estilos inline y marcas

Fuentes disponibles

Fuentes del sistema: Arial, Verdana, Georgia, Times New Roman, Courier New

Google Fonts (carga dinamica): Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Merriweather, Playfair Display, Source Sans 3, PT Serif, Libre Baskerville, IBM Plex Sans, IBM Plex Serif, Noto Sans

Las Google Fonts se cargan bajo demanda cuando el usuario las selecciona. No se agrega peso extra hasta que se usan.

Tamanos de fuente

10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 48, 64 (en px)

Temas

El editor soporta dos temas: dark (por defecto) y light.

// Tema oscuro
<RichEditor value={content} onChange={setContent} theme="dark" />

// Tema claro
<RichEditor value={content} onChange={setContent} theme="light" />

Ambos temas usan CSS custom properties, lo que permite sobreescribirlas desde fuera si necesitas personalizacion adicional.

Sincronizacion controlada

El editor funciona como un componente controlado (similar a <input value={...} onChange={...} />):

• value cambia desde el padre (ej: datos cargados async) → el editor actualiza su contenido sin disparar onChange, evitando loops infinitos.
• El usuario edita → se dispara onChange con el HTML actualizado.

// Cargar contenido async
useEffect(() => {
  fetch('/api/document')
    .then(res => res.json())
    .then(doc => setContent(doc.html))
}, [])

// El editor se actualiza automaticamente cuando content cambia
<RichEditor value={content} onChange={setContent} />

Modo solo lectura

Usa editable={false} para deshabilitar la edicion:

<RichEditor value={content} onChange={() => {}} editable={false} />

Estilos

El paquete incluye un archivo CSS que debes importar:

import '@tauro/editor/style.css'

Los estilos usan CSS Modules internamente, asi que no hay conflictos con tus propios estilos. Para personalizacion avanzada, puedes sobreescribir las CSS custom properties en tu hoja de estilos.

TypeScript

El paquete esta completamente tipado. Exporta los siguientes tipos:

import type { RichEditorProps, PreviewProps, EditorTheme } from '@tauro/editor'

Extensiones de Tiptap incluidas

| Extension | Funcionalidad | |-----------|---------------| | StarterKit | Bold, Italic, Strike, Headings (H1-H3), Lists, Blockquote, Code, HR | | Placeholder | Texto placeholder configurable | | Underline | Subrayado | | TextAlign | Alineacion de texto (left, center, right, justify) | | TextStyle | Base para estilos inline | | FontFamily | Familia de fuente | | FontSize (custom) | Tamano de fuente |

Requisitos

• React 18+
• Tiptap 2.x

Licencia

MIT