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

# Customize

> Colours, language, labels, which buttons show and in what order, your own buttons and parts to remove.

Everything is configured with `<DocondaEditor>` props and works the same in Word, PowerPoint and Excel.

## Colours and typography

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

`theme` accepts `"light"` (default), `"dark"` or your own values, which are merged with the light theme. You can also use CSS:
the colours are variables on `.fm-root`.

```css theme={null}
.my-editor { --fm-accent: #e11d48; --fm-surface: #fffdf8; --fm-radius: 4px; }
```

| Key | CSS variable | What it paints |
| - | - | - |
| `font` | `--fm-font` | Toolbar typeface |
| `text` / `muted` | `--fm-text` / `--fm-muted` | Text and secondary text |
| `surface` / `subtle` / `canvas` | `--fm-surface` / `--fm-subtle` / `--fm-canvas` | Toolbars, second toolbar, background around the document |
| `border` | `--fm-border` | Borders |
| `hover` / `active` | `--fm-hover` / `--fm-active` | Button on hover and when pressed |
| `accent` / `accentText` | `--fm-accent` / `--fm-accent-text` | Brand colour and the text on it |
| `danger` | `--fm-danger` | Warnings and delete |
| `radius` | `--fm-radius` | Corners |

The page, the slides and the cells keep the file's own colours.

## Your brand's colours and fonts

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

* `colors`: the colours shown in the colour pickers (text, fill, borders…). With or without `#`.
* `fonts`: the typefaces in the font list. By default it shows the file's own; the one the text already uses always
  appears.

## Spell checker

The browser's spell checker is on. `spellCheck={false}` turns it off (for example, for documents with a lot of code or
proper names).

## Language and labels

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

`locale` is `"es"` (default) or `"en"`. With `labels` you change any toolbar text, on top of the chosen language.

## Toolbar

By default the full toolbar is shown. With `toolbar` you choose which buttons show and in what order: a list of ids, and `|`
separates the groups.

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

Also as lists, different per format, or starting from the default one:

```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")),
  }}
/>
```

The default toolbars are exported as `WORD_TOOLBAR`, `SLIDES_TOOLBAR` and `SHEET_TOOLBAR`. An id that does not exist is
ignored.

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

When you select something (a table, an image, a shape, the header…) a **second toolbar** appears with its
options. The main toolbar does not change.

## Your own buttons

Give your button an id and put it in the toolbar:

```tsx theme={null}
<DocondaEditor
  src={url}
  items={[
    {
      id: "sign",
      label: "Send for signature",
      text: "Send",
      run: async (api) => sendForSignature(api.save()),
    },
  ]}
  toolbar={(groups) => [...groups, ["sign"]]}
/>
```

| Field | What it is |
| - | - |
| `id` | The one you put in `toolbar` |
| `label` | Text on hover and for screen readers |
| `icon` | A 24×24 SVG stroke (the `d` of a `<path>`) or any React element |
| `text` | Button text, if it has no icon |
| `run(api)` | What it does when clicked |
| `active(api)` / `disabled(api)` | Button highlighted or disabled |

`api` has `format` (`"docx"`, `"pptx"` or `"xlsx"`), `save()` (the file's bytes as they are now), `focus()` and `raw`
(the editor's internal state).

## Remove parts

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

Everything is on except what you set to `false`.

| Key | Removes | In |
| - | - | - |
| `find` | Find and replace | Word |
| `print` | Print or save as PDF | Word, PowerPoint |
| `links` | Links | Word |
| `columns` | Columns | Word |
| `headerFooter` | Header and footer | Word |
| `images`, `tables`, `shapes`, `textboxes` | Those "Insert" options | Word (tables), Word and PowerPoint (the rest) |
| `footnotes`, `comments`, `toc` | Footnotes, comments, table of contents | Word |
| `present` | Present | PowerPoint |
| `notes` | Speaker notes | PowerPoint |
| `transitions`, `animations` | Transitions and animations | PowerPoint |
| `contextBar` | The second toolbar | All |
| `statusBar` | The bottom bar (pages, words, zoom) | Word, PowerPoint |

If you only remove a button from `toolbar`, its keyboard shortcut still works. `features` removes the option from the toolbars,
the menus and its shortcut (for example, Ctrl+F with `find: false`). Whatever the file already has is still shown: if the
Word file has comments, they are displayed even when `comments` is off.

## Your classes

`classNames` puts your class on each part, so you can adjust whatever you want with your CSS:

```tsx theme={null}
<DocondaEditor src={url} classNames={{ root: "my-editor", toolbar: "my-toolbar", contextBar: "my-toolbar-2", statusBar: "my-footer" }} />
```

## Read-only

```tsx theme={null}
<DocondaEditor src={url} readOnly />
```

The document is shown, but nothing can be changed: not by typing, pasting, dragging, keyboard
shortcuts, or resizing images or shapes. The toolbars and action buttons (duplicate or
delete slides, delete comments) disappear; users can still read, select and copy text, move between
slides and sheets, and present.

It can be switched at any time, without reopening the file:

```tsx theme={null}
const [viewOnly, setViewOnly] = useState(true)

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


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