> ## Documentation Index
> Fetch the complete documentation index at: https://docs.doconda.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Plugin de editor

> Word, PowerPoint, Excel y PDF dentro de tu web: un componente de React que abre, edita y guarda el archivo en el navegador, con un asistente de IA que hace los cambios que pide el usuario.

El plugin de editor es un **componente de React** que añades a tu producto. Tus usuarios abren un Word, un
PowerPoint o un Excel (por ejemplo, el que acaba de crear tu agente con Doconda), lo retocan y lo guardan, sin salir de
tu web. Todo pasa en su navegador: el archivo no se sube a ningún sitio para editarlo.

Trae además un **asistente de IA** (botón ✨) en Word, Excel y PowerPoint: el usuario pide cambios con sus palabras y
los ve hechos en el documento, listos para aceptar o descartar. Ver [asistente de IA](/es/editor/customize#asistente-de-ia).

Se contrata aparte de la API, por organización, con plan **mensual, anual o de pago único** y **7 días de prueba gratis**. Ver [licencia y dominios](/es/editor/license).

## Instalar

Con la licencia activa, en el panel (**Facturación → Plugin de editor**) tienes tu comando de instalación, con un
enlace personal:

```bash theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz
```

Se importa como `@doconda/editor`. Necesita React 19 o superior.

<Warning>
  El enlace es secreto: no lo publiques. Si deja de estar activa la licencia, el enlace deja de funcionar. Cada
  descarga lleva una marca de tu organización.
</Warning>

## Tu primer editor

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
import { DocondaEditor } from "@doconda/editor"

export function Edit({ url }: { url: string }) {
  return (
    <div style={{ height: 700, display: "flex" }}>
      <DocondaEditor src={url} licenseKey="ek_eu_…" className="flex-1" />
    </div>
  )
}
```

* `src` es el enlace del archivo: un `.docx`, `.pptx` o `.xlsx` que el navegador pueda descargar (de tu propio sitio,
  o de un servidor que lo permita con CORS).
* Para abrir un documento de Doconda, descarga el archivo en tu servidor (`doconda.documents.download(id, "docx")`) y
  sírvelo desde una ruta tuya, o pásalo con `file`. Los enlaces de `GET /documents/{id}/outputs` no valen como `src`:
  el navegador no puede leerlos desde tu sitio (solo lo permiten desde la web de Doconda) y caducan a los 5 minutos.
* El formato se deduce de la extensión del enlace. Si el enlace no la lleva, pásalo con `format="docx"`, `"pptx"` o
  `"xlsx"`.
* También abre, convirtiéndolos en el navegador: `.odt`, `.html` y `.md` en el editor de Word; `.odp` en el de
  PowerPoint; `.ods`, `.csv` y `.tsv` en el de Excel. Un aviso dice desde qué formato se ha convertido y lo que no se
  ha podido convertir; al guardar se guarda como `.docx`, `.pptx` o `.xlsx`. Desde **Archivo → Abrir**, los editores
  de Word, Excel y PowerPoint también abren un `.pdf` (lo convierten, con sus tablas y columnas), y el de PDF tiene
  **Archivo → Convertir a Word / Excel / PowerPoint**. Un archivo de otro formato abierto desde **Archivo → Abrir** no
  se envía a `onSave`: se descarga.
* Convertir un PDF usa WebAssembly (PDFium, unos 2 MB comprimidos que solo se descargan al convertir). Si tu sitio
  tiene `Content-Security-Policy`, añade `'wasm-unsafe-eval'` a `script-src`.
* El editor ocupa el alto que le des: ponlo en un contenedor con altura.
* `licenseKey` es tu clave de licencia (del panel, en **Facturación → Plugin de editor**). En `localhost` no hace falta.

## Abrir desde memoria o con cabeceras

Si el archivo ya lo tienes (un `<input type="file">`, una respuesta de tu API) pásalo con `file`: un `File`, `Blob`,
`ArrayBuffer` o `Uint8Array`.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor file={selectedFile} licenseKey="ek_eu_…" />
```

Si el enlace necesita autenticación, `requestInit` se pasa tal cual a `fetch`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor src="/api/contracts/42.docx" requestInit={{ headers: { Authorization: `Bearer ${token}` } }} />
```

## Guardar

Pide el archivo editado con una `ref`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
import { useRef } from "react"
import { DocondaEditor, type EditorHandle } from "@doconda/editor"

const editor = useRef<EditorHandle>(null)

<DocondaEditor ref={editor} src={url} licenseKey="ek_eu_…" />

const file = await editor.current!.save()   // un File (.docx, .pptx, .xlsx o .pdf)
```

El archivo se llama como el original (o como diga `fileName`). La `ref` también trae `bytes()` (los bytes, sin
envolver en `File`), `focus()` e `isDirty()` (si hay cambios sin guardar).

O escucha **Ctrl/Cmd+S** con `onSave`, que recibe los bytes del archivo:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor src={url} licenseKey="ek_eu_…" onSave={(bytes) => upload(bytes)} />
```

O guarda solo: con `autosave`, `onSave` se llama cuando el usuario lleva ese tiempo (en milisegundos) sin tocar nada.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor
  src={url}
  autosave={2000}
  onSave={(bytes) => upload(bytes)}
  onDirtyChange={(pending) => setNotice(pending ? "Sin guardar" : "Guardado")}
  confirmOnLeave
/>
```

`onDirtyChange` avisa cuando pasa a haber cambios sin guardar y cuando se guardan. `confirmOnLeave` pide confirmación
si se cierra o recarga la página con cambios pendientes.

Para guardarlo en Doconda encima del mismo documento (con su revisión, PDF e informe de cambios), envía ese
archivo y la `revision` del documento que abriste a tu servidor y, desde allí, a [`PUT /documents/{id}/file`](/es/guides/edit#guardar-un-archivo-editado-a-mano):

```ts theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
// En el navegador: el archivo va a tu servidor
const body = new FormData()
body.append("revision", String(revision))
body.append("file", await editor.current!.save())
await fetch(`/api/documents/${id}/file`, { method: "PUT", body })
```

```ts theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
// En tu servidor (por ejemplo, la ruta de Next.js app/api/documents/[id]/file/route.ts)
export async function PUT(req: Request, { params }: { params: Promise<{ id: string }> }) {
  const { id } = await params
  const res = await fetch(`https://api.eu.doconda.com/v1/documents/${id}/file`, {
    method: "PUT",
    headers: { Authorization: `Bearer ${process.env.DOCONDA_API_KEY}` },
    body: await req.formData(),
  })
  return Response.json(await res.json(), { status: res.status })
}
```

<Warning>
  La API key va solo en tu servidor, nunca en el navegador. Comprueba allí también que el usuario puede editar ese
  documento.
</Warning>

## Qué se puede hacer

| Formato | Lo que edita |
| - | - |
| **Word** | Texto y estilos de párrafo, fuentes, tamaños, colores, resaltado, subrayados, listas, sangrías, interlineado, bordes y sombreado, tablas (combinar y dividir celdas, sombreado, ancho de columnas arrastrando), imágenes, formas, cuadros de texto, enlaces, columnas, tamaño, orientación, márgenes y color o imagen de página, encabezado y pie (también distintos en la primera página o en pares e impares), notas al pie, comentarios, índice, buscar y reemplazar, pegar con formato desde la web o Google Docs, listas automáticas al escribir «- » o «1. », atajos de teclado, zoom, imprimir o guardar como PDF |
| **PowerPoint** | Diapositivas (nueva, duplicar, ordenar, diseño, fondo), texto con sus estilos, formas con guías de alineación, imágenes, tablas, fondo de color o imagen, agrupar, alinear y distribuir, orden de capas, transiciones, animaciones de entrada, notas del orador, zoom, presentar a pantalla completa, imprimir. Los gráficos se ven y se conservan |
| **Excel** | Celdas y fórmulas (se calculan en el editor, en el idioma del editor, con sugerencias de funciones, referencias al hacer clic en celdas y recuadros de colores), controlador de relleno para copiar y continuar series, copiar y pegar con fórmulas y formato, suma, promedio y recuento de la selección, formato de celda y de número, bordes, combinar, ajustar texto, insertar y borrar filas y columnas, cambiar anchos y altos, añadir, renombrar y eliminar hojas |
| **PDF** | Abrir PDF con contraseña, rellenar formularios (con su formato, cálculos y validación), texto en cualquier alfabeto latino, griego o cirílico, resaltar, subrayar y tachar el texto seleccionado, dibujo, formas, flechas, sellos, imágenes, firma (dibujada, escrita o subida, también en los campos de firma), comentarios, tachado que borra de verdad el contenido, buscar, enlaces y marcadores, seleccionar y copiar texto, girar, ordenar (arrastrando), duplicar, extraer y borrar páginas, páginas en blanco, añadir páginas de otro PDF, zoom, imprimir. Lo que añades se guarda como anotaciones estándar: se puede mover o borrar en Acrobat y en el propio editor |

Lo que el editor no toca se guarda tal cual: estilos, gráficos, notas o partes del archivo que no sabe editar no se
pierden.

## Comentarios

Los cuatro editores tienen comentarios con hilo, como en Office: seleccionas algo y dejas un comentario, otras personas
responden y se marca como resuelto. Los comentarios se guardan **dentro del archivo**, en el formato de Office, así que
se ven igual al abrirlo en Word, Excel, PowerPoint o un lector de PDF, y vuelven al abrirlo otra vez en el editor.

| Formato | Dónde se ancla | Cómo se guarda |
| - | - | - |
| Word | Un fragmento de texto | Comentarios de Word, con respuestas y resueltos |
| Excel | Una celda (con una marca roja en la esquina) | Comentarios con hilo de Excel, más la nota clásica para versiones antiguas |
| PowerPoint | Una diapositiva | Comentarios modernos de PowerPoint |
| PDF | Un punto de la página | Anotaciones de comentario, con sus respuestas y estado |

El botón de comentario de la barra añade uno; el de al lado muestra u oculta el panel de comentarios. Los comentarios nuevos van firmados con `author`. Si el archivo ya traía comentarios, se ven siempre; `features: {
comments: false }` solo quita el botón de añadir.

## Propiedades

| Propiedad | Qué hace |
| - | - |
| `src` | Enlace del archivo |
| `file` | El archivo en memoria (`File`, `Blob`, `ArrayBuffer` o `Uint8Array`), en lugar de `src` |
| `requestInit` | Opciones de `fetch` para descargar `src` (cabeceras, credenciales) |
| `format` | `"docx"`, `"pptx"` o `"xlsx"`, si el enlace no lleva extensión |
| `fileName` | Nombre del archivo que devuelve `save()` (por defecto, el del original) |
| `licenseKey` | Tu clave de licencia (`ek_…`) |
| `readOnly` | Solo ver: sin barras ni edición |
| `author` | Nombre que firma los comentarios nuevos (sin él, «Anónimo»). Pasa el de tu usuario |
| `onReady` | El archivo se ha abierto |
| `onError` | No se pudo abrir (o `editor_unlicensed`, sin licencia) |
| `onChange` | Cada vez que cambia algo |
| `onSave` | Ctrl/Cmd+S (y `autosave`), con los bytes del archivo |
| `autosave` | Milisegundos sin cambios tras los que se llama a `onSave` |
| `onDirtyChange` | Hay cambios sin guardar (`true`) o ya se guardaron (`false`) |
| `confirmOnLeave` | Pide confirmación al salir de la página con cambios sin guardar |
| `fallback` | Lo que se ve mientras abre (por ejemplo, tu spinner) |
| `className`, `style` | Clase y estilos del contenedor |
| `theme`, `locale`, `labels`, `toolbar`, `items`, `features`, `classNames`, `colors`, `fonts`, `spellCheck` | Ver [personalizar](/es/editor/customize) |
| `licenseUrl` | Solo si usas otra API de Doconda (por defecto, la de la región de tu clave) |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.