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. 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. Por ejemplo, el url de un fichero de GET /documents/{id}/outputs.
El formato se deduce de la extensión del enlace. Si el enlace no la lleva, pásalo con format="docx", "pptx" o "xlsx".
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 o .xlsx)

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 como versión nueva del documento (con su revisión, PDF e informe de cambios), envía ese archivo a POST /documents/{id}/versions:

const body = new FormData()
body.append("file", await editor.current!.save())
await fetch(`https://api.eu.doconda.com/v1/documents/${id}/versions`, {
  method: "POST",
  headers: { Authorization: `Bearer ${DOCONDA_API_KEY}` },
  body,
})

Haz esa llamada desde tu servidor: la API key no debe llegar al navegador.

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 y sus estilos, imágenes, formas, cuadros de texto, enlaces, columnas, encabezado y pie, notas al pie, comentarios, índice, buscar y reemplazar, imprimir o guardar como PDF
PowerPoint	Diapositivas (nueva, duplicar, ordenar, diseño, fondo), texto con sus estilos, formas, imágenes, tablas, 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, escritas como en Excel en español), formato de celda y de número, bordes, combinar, ajustar texto, insertar y borrar filas y columnas, cambiar anchos y altos, varias hojas

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.

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

Plugin de editor

Instalar

Tu primer editor

Abrir desde memoria o con cabeceras

Guardar

Qué se puede hacer

Propiedades

​Instalar

​Tu primer editor

​Abrir desde memoria o con cabeceras

​Guardar

​Qué se puede hacer

​Propiedades

Instalar

Tu primer editor

Abrir desde memoria o con cabeceras

Guardar

Qué se puede hacer

Propiedades