Plugin de editor

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. 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.

Instalar

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

npm install https://api.eu.doconda.com/v1/editor/package/edt_….tgz

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

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.

Tu primer editor

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.

<DocondaEditor file={selectedFile} licenseKey="ek_eu_…" />

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

<DocondaEditor src="/api/contracts/42.docx" requestInit={{ headers: { Authorization: `Bearer ${token}` } }} />

Guardar

Pide el archivo editado con una ref:

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:

<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.

<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:

// 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 })

// 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 })
}

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

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
`licenseUrl`	Solo si usas otra API de Doconda (por defecto, la de la región de tu clave)

Empezar

Guías

Casos de uso

Plugin de editor

Instalar

Tu primer editor

Abrir desde memoria o con cabeceras

Guardar

Qué se puede hacer

Comentarios

Propiedades

​Instalar

​Tu primer editor

​Abrir desde memoria o con cabeceras

​Guardar

​Qué se puede hacer

​Comentarios

​Propiedades

Instalar

Tu primer editor

Abrir desde memoria o con cabeceras

Guardar

Qué se puede hacer

Comentarios

Propiedades