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

# Personalizar

> Colores, idioma, textos, qué botones salen y en qué orden, botones propios y partes que quitar.

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

## Colores y tipografía

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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`.

```css theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
.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

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
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.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor src={url} selects="menu" />
```

## Botones propios

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

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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).

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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.

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<DocondaEditor src={url} assistant={false} />
```

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

### Dónde se muestra

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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"`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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`:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
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](/es/editor/license#asistente-de-ia).

## Solo lectura

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
<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:

```tsx theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
const [viewOnly, setViewOnly] = useState(true)

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


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