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

## Colores y tipografía

```tsx theme={null}
<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={null}
.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 |

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

## Colores y tipografías de tu marca

```tsx theme={null}
<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={null}
<DocondaEditor src={url} locale="en" />
<DocondaEditor src={url} labels={{ bold: "Fett", insert: "Einfügen" }} />
```

`locale` es `"es"` o `"en"`; 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.

## 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={null}
<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={null}
<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 | `undo` `redo` `style` `font` `size` `bold` `italic` `underline` `underlineStyle` `strike` `script` `color` `highlight` `clear` `align` `bullets` `numbering` `outdent` `indent` `spacing` `borders` `link` `insert` `columns` `find` `print` |
| PowerPoint | `undo` `redo` `newSlide` `font` `size` `bold` `italic` `underline` `strike` `color` `align` `bullets` `numbering` `outdent` `indent` `insert` `present` `print` |
| Excel | `undo` `redo` `font` `size` `bold` `italic` `underline` `strike` `color` `fill` `alignLeft` `alignCenter` `alignRight` `wrap` `merge` `borders` `numberFormat` `lessDecimals` `moreDecimals` `rowsColumns` |

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

## Botones propios

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

```tsx theme={null}
<DocondaEditor
  src={url}
  items={[
    {
      id: "sign",
      label: "Enviar a firmar",
      text: "Enviar",
      run: async (api) => sendForSignature(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"` o `"xlsx"`), `save()` (los bytes del archivo tal como está), `focus()` y `raw`
(el estado interno del editor).

## Quitar partes

```tsx theme={null}
<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 | Word |
| `print` | Imprimir o guardar como PDF | Word, PowerPoint |
| `links` | Enlaces | Word |
| `columns` | Columnas | Word |
| `headerFooter` | Encabezado y pie | Word |
| `images`, `tables`, `shapes`, `textboxes` | Esas opciones de «Insertar» | Word (tablas), Word y PowerPoint (el resto) |
| `footnotes`, `comments`, `toc` | Notas al pie, comentarios, índice | Word |
| `present` | Presentar | PowerPoint |
| `notes` | Notas del orador | PowerPoint |
| `transitions`, `animations` | Transiciones y animaciones | PowerPoint |
| `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
Word 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={null}
<DocondaEditor src={url} classNames={{ root: "my-editor", toolbar: "my-toolbar", contextBar: "my-toolbar-2", statusBar: "my-footer" }} />
```

## Solo lectura

```tsx theme={null}
<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={null}
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.