Personalizar

Todo se configura con propiedades de <DocondaEditor> y funciona igual en Word, PowerPoint, Excel y PDF.

Colores y tipografía

<DocondaEditor src={url} theme="dark" />
<DocondaEditor src={url} theme={{ accent: "#e11d48", font: "Inter, sans-serif", radius: "6px" }} />

theme acepta "light" (por defecto), "dark" o tus valores, que se mezclan con el claro. También puedes usar CSS: los colores son variables en .fm-root.

.my-editor { --fm-accent: #e11d48; --fm-surface: #fffdf8; --fm-radius: 4px; }

Clave	Variable CSS	Qué pinta
`font`	`--fm-font`	Tipografía de las barras
`text` / `muted`	`--fm-text` / `--fm-muted`	Texto y texto secundario
`surface` / `subtle` / `canvas`	`--fm-surface` / `--fm-subtle` / `--fm-canvas`	Barras, segunda barra, fondo alrededor del documento
`border`	`--fm-border`	Bordes
`hover` / `active`	`--fm-hover` / `--fm-active`	Botón al pasar por encima y pulsado
`accent` / `accentText`	`--fm-accent` / `--fm-accent-text`	Color de marca y el texto sobre él
`danger`	`--fm-danger`	Avisos y borrar
`radius`	`--fm-radius`	Esquinas
`pageShadow`	`--fm-page-shadow`	Sombra de las páginas y diapositivas (`"none"` la quita)

La página, las diapositivas y las celdas mantienen los colores del archivo.

Colores y tipografías de tu marca

<DocondaEditor src={url} colors={["#1a73e8", "#e11d48", "#111827"]} fonts={["Inter", "Georgia"]} />

colors: los colores que salen en los selectores de color (texto, relleno, bordes…). Con o sin #.
fonts: las tipografías de la lista de fuentes. Por defecto salen las del archivo; la que ya lleva el texto siempre aparece.

Corrector ortográfico

El del navegador está encendido. spellCheck={false} lo apaga (por ejemplo, para documentos con mucho código o nombres propios).

Idioma y textos

<DocondaEditor src={url} locale="en" />
<DocondaEditor src={url} labels={{ bold: "Fett", insert: "Einfügen" }} />

locale es "es", "en" u otro idioma (abajo); sin él, el editor usa el idioma del navegador (español si no es ninguno de los dos). Con labels cambias cualquier texto, sobre el idioma elegido: bold o insert para los botones comunes, o la clave completa ("word.find.next") para el resto.

Tu propio idioma

Para cualquier otro idioma, pasa su código en locale y sus textos en labels, con la misma estructura que los textos del editor (MESSAGES.en los trae todos para que los traduzcas). Lo que no traduzcas sale en inglés, y las fechas, números y porcentajes siguen el formato de ese idioma.

import { DocondaEditor, MESSAGES } from "@doconda/editor"
import fr from "./doconda-fr.json" // tu traducción de MESSAGES.en

<DocondaEditor src={url} locale="fr" labels={fr} />

En Excel, las fórmulas se escriben con los nombres de función en inglés (SUM, IF) en cualquier idioma que no sea el español.

Barra de botones

Por defecto sale la barra completa. Con toolbar eliges qué botones salen y en qué orden: una lista de ids, y | separa los grupos.

<DocondaEditor src={url} toolbar="undo redo | bold italic underline | bullets numbering | link" />

También como listas, distinta por formato, o partiendo de la de fábrica:

<DocondaEditor src={url} toolbar={[["undo", "redo"], ["bold", "italic"]]} />

<DocondaEditor
  src={url}
  toolbar={{
    docx: "undo redo | style | bold italic | bullets numbering",
    pptx: (groups) => groups.filter((g) => !g.includes("present")),
  }}
/>

Las barras de fábrica se exportan como WORD_TOOLBAR, SLIDES_TOOLBAR y SHEET_TOOLBAR. Un id que no existe se ignora.

Formato	Ids
Word	`file` `undo` `redo` `style` `font` `size` `bold` `italic` `underline` `underlineStyle` `strike` `script` `color` `highlight` `clear` `align` `bullets` `numbering` `outdent` `indent` `spacing` `borders` `link` `insert` `page` `columns` `find` `print` `comment` `track`
PowerPoint	`file` `undo` `redo` `newSlide` `font` `size` `bold` `italic` `underline` `strike` `color` `align` `bullets` `numbering` `outdent` `indent` `insert` `present` `print` `comment`
Excel	`file` `undo` `redo` `font` `size` `bold` `italic` `underline` `strike` `color` `fill` `alignLeft` `alignCenter` `alignRight` `wrap` `merge` `borders` `numberFormat` `lessDecimals` `moreDecimals` `rowsColumns` `comment`

Cuando seleccionas algo (una tabla, una imagen, una forma, el encabezado…) aparece una segunda barra con sus opciones. La barra principal no cambia.

Desplegables

Los desplegables de la barra (estilo, fuente, tamaño…) son los del navegador. Con selects="menu" se abren como menús del propio editor, que siguen el theme y tu CSS igual que el resto:

<DocondaEditor src={url} selects="menu" />

Botones propios

Dale un id a tu botón y ponlo en la barra:

<DocondaEditor
  src={url}
  items={[
    {
      id: "sign",
      label: "Enviar a firmar",
      text: "Enviar",
      run: async (api) => sendForSignature(await api.save()),
    },
  ]}
  toolbar={(groups) => [...groups, ["sign"]]}
/>

Campo	Qué es
`id`	El que pones en `toolbar`
`label`	Texto al pasar el ratón y para lectores de pantalla
`icon`	Un trazo SVG de 24×24 (el `d` de un `<path>`) o cualquier elemento de React
`text`	Texto del botón, si no lleva icono
`run(api)`	Qué hace al pulsarlo
`active(api)` / `disabled(api)`	Botón marcado o apagado

api trae format ("docx", "pptx", "xlsx" o "pdf"), save() (los bytes del archivo tal como está; usa await, porque a veces llegan en una promesa), focus() y raw (el estado interno del editor).

Un formato distinto

Todo lo de esta página vale para los cuatro formatos a la vez. Con formats cambias lo que quieras solo para uno: lo que pongas ahí se suma a lo general (el theme, features, classNames y labels se mezclan; el resto se sustituye).

<DocondaEditor
  src={url}
  theme={{ accent: "#1a73e8", radius: "8px" }}
  features={{ comments: false }}
  formats={{
    xlsx: { theme: { accent: "#107c41" }, features: { comments: true } },
    pdf: { toolbar: "select text highlight | note", readOnly: true },
  }}
/>

Quitar partes

<DocondaEditor src={url} features={{ comments: false, print: false, contextBar: false }} />

Todo está encendido salvo lo que pongas a false.

Clave	Quita	En
`find`	Buscar (y reemplazar en Word)	Word, PDF
`print`	Imprimir y guardar como PDF (en el menú Archivo; el botón `print` ya no está en la barra por defecto, pero puedes añadirlo con `toolbar`)	Todos
`links`	Enlaces (en PDF, poder seguirlos)	Word, PDF
`columns`	Columnas	Word
`headerFooter`	Encabezado y pie	Word
`images`, `tables`, `shapes`, `textboxes`	Esas opciones de «Insertar»	Word (tablas), Word y PowerPoint (el resto)
`footnotes`, `toc`	Notas al pie, índice	Word
`comments`	Añadir comentarios	Todos
`present`	Presentar	PowerPoint
`notes`	Notas del orador	PowerPoint
`transitions`, `animations`	Transiciones y animaciones	PowerPoint
`file`	El menú Archivo: abrir otro archivo del ordenador, descargar, guardar como PDF e imprimir (y Guardar si pasas `onSave`)	Todos
`open`	Solo «Abrir…» del menú Archivo (por ejemplo, si guardas en tu servidor y no quieres que se sustituya el documento por otro)	Todos
`contextBar`	La segunda barra	Todos
`statusBar`	La barra de abajo (páginas, palabras, zoom)	Word, PowerPoint

Si solo quitas un botón de toolbar, su atajo de teclado sigue funcionando. features quita la opción de las barras, de los menús y de su atajo (por ejemplo, Ctrl+F con find: false). Lo que ya trae el archivo se sigue viendo: si el archivo tiene comentarios, se muestran aunque comments esté apagado.

Tus clases

classNames pone tu clase en cada parte, para ajustar lo que quieras con tu CSS:

<DocondaEditor src={url} classNames={{ root: "my-editor", toolbar: "my-toolbar", contextBar: "my-toolbar-2", statusBar: "my-footer", sidebar: "my-thumbs", comments: "my-comments" }} />

Parte	Dónde
`root`	Todo el editor
`toolbar`, `contextBar`, `statusBar`	La barra de botones, la segunda barra y la de abajo
`sidebar`	Las miniaturas de la izquierda (PowerPoint y PDF)
`comments`	El panel de comentarios de la derecha
`tabs`	Las pestañas de las hojas (Excel)
`formulaBar`	La barra de fórmulas (Excel)
`notes`	Las notas del orador (PowerPoint)

Todo lo que rodea al documento sigue el theme (colores, tipografía y esquinas) y admite tu clase; la página, las diapositivas y las celdas mantienen el aspecto del archivo.

Asistente de IA

El botón ✨ de la barra abre un panel donde el usuario pide cambios en lenguaje normal («hazlo más formal», «añade una fila con el total de marzo», «una diapositiva de conclusiones»). El asistente lee el documento entero, hace los cambios en el propio editor mientras responde y el usuario los acepta o los descarta de una vez (también con deshacer). Funciona en Word, Excel y PowerPoint; usa los modelos de Doconda, sin claves ni configuración por tu parte.

<DocondaEditor src={url} assistant={false} />

Lo quita del todo (también features={{ assistant: false }}). Con readOnly no aparece.

Dónde se muestra

<DocondaEditor src={url} assistant={{ layout: "floating", placeholder: "¿Qué cambio?" }} />

Opción	Qué hace
`layout`	`"panel"` (por defecto): un panel lateral que abre el botón ✨. `"floating"`: una caja flotante abajo, siempre visible. `"none"`: no pinta nada; lo pintas tú.
`side`	`"right"` (por defecto) o `"left"`, para el panel.
`defaultOpen`	El panel empieza abierto.
`placeholder`	El texto del campo vacío.
`suggestions`	Botones con peticiones de ejemplo, p. ej. `["Resume el documento", "Corrige las erratas"]`.
`review`	`false`: los cambios se quedan directamente, sin aceptar o descartar.
`onChange`	Te avisa cada vez que cambia el estado (mensajes, si está trabajando, cambios pendientes).

El panel admite tu clase con classNames={{ assistant: "mi-asistente" }}, y el botón se mueve o se quita como cualquier otro con toolbar (su id es assistant).

Tu propio componente

render recibe el asistente y devuelve lo que quieras pintar; va dentro del panel o de la caja flotante, o tal cual con layout: "none":

<DocondaEditor
  src={url}
  assistant={{
    layout: "floating",
    render: (ai) => (
      <form onSubmit={(e) => { e.preventDefault(); ai.ask(e.currentTarget.prompt.value) }}>
        <input name="prompt" disabled={ai.status === "working"} />
        {ai.status === "review" && (
          <>
            <button type="button" onClick={ai.accept}>Aceptar {ai.changes} cambios</button>
            <button type="button" onClick={ai.reject}>Descartar</button>
          </>
        )}
      </form>
    ),
  }}
/>

También desde fuera del editor, con la ref:

const editor = useRef<EditorHandle>(null)

<button onClick={() => editor.current?.assistant?.ask("Traduce el documento al inglés")}>Traducir</button>
<DocondaEditor ref={editor} src={url} assistant={{ layout: "none" }} />

En `ai` / `editor.current.assistant`
`ask(texto)`	Pide un cambio.
`stop()`	Para la petición en curso (lo ya hecho se queda para aceptar o descartar).
`accept()`, `reject()`	Aceptan o descartan los cambios pendientes.
`clear()`	Borra la conversación.
`setOpen(abierto)`	Abre o cierra el panel.
`status`	`"idle"`, `"working"`, `"review"` o `"error"`.
`messages`	La conversación: `{ role, text, changes? }`.
`changes`	Cuántos cambios hay pendientes.
`error`, `open`	El último error y si el panel está abierto.

Las ediciones que incluye cada plan están en Licencia y dominios.

Solo lectura

<DocondaEditor src={url} readOnly />

Se ve el documento, pero no se puede cambiar nada: ni escribiendo, ni pegando, ni arrastrando, ni con atajos de teclado, ni redimensionando imágenes o formas. Desaparecen las barras de botones y los botones de acción (duplicar o borrar diapositivas, borrar comentarios); se puede seguir leyendo, seleccionando y copiando texto, moviéndose entre diapositivas y hojas, y presentar. Se puede cambiar en cualquier momento, sin volver a abrir el archivo:

const [viewOnly, setViewOnly] = useState(true)

<button onClick={() => setViewOnly(!viewOnly)}>{viewOnly ? "Editar" : "Terminar"}</button>
<DocondaEditor src={url} readOnly={viewOnly} />

Empezar

Guías

Casos de uso

Colores y tipografía

Colores y tipografías de tu marca

Corrector ortográfico

Idioma y textos

Tu propio idioma

Barra de botones

Desplegables

Botones propios

Un formato distinto

Quitar partes

Tus clases

Asistente de IA

Dónde se muestra

Tu propio componente

Solo lectura

​Colores y tipografía

​Colores y tipografías de tu marca

​Corrector ortográfico

​Idioma y textos

​Tu propio idioma

​Barra de botones

​Desplegables

​Botones propios

​Un formato distinto

​Quitar partes

​Tus clases

​Asistente de IA

​Dónde se muestra

​Tu propio componente

​Solo lectura

Colores y tipografía

Colores y tipografías de tu marca

Corrector ortográfico

Idioma y textos

Tu propio idioma

Barra de botones

Desplegables

Botones propios

Un formato distinto

Quitar partes

Tus clases

Asistente de IA

Dónde se muestra

Tu propio componente

Solo lectura