> ## Documentation Index
> Fetch the complete documentation index at: https://revise.io/developer/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Chrome and toolbars

> Use the built-in ribbon or build your own toolbar.

All UI the SDK draws around the document is optional. Every control's action
is also available from the handle.

## Optional chrome

| Chrome | Prop | Default | Drive it yourself with |
| - | - | - | - |
| Tab strip | `showTabs` | off | `documents` |
| Title bar | `showTitleBar` | on | `view` |
| Ribbon | `toolbarMode` | `"native"` | `toolbar` |
| Editing/Suggesting toggle | `showDocumentModeToggle` | off | `view.setDocumentMode()` |
| Comments panel | None | None | `view.setCommentsOpen()` |

The comments panel has no built-in button. Comment chips render next to the
page, and your UI opens or closes the panel.

## Ribbon modes

| `toolbarMode` | What it renders |
| - | - |
| `"native"` | The full ribbon. |
| `"compact"` | The everyday-formatting subset, centered, for narrow fixed-width hosts (about 760px): undo and redo, font, size, styles, paragraph, links, indents, lists, Find, and Export. |
| `"floating"` | The full ribbon as a centered card over the canvas, as in the Revise app. |
| `"none"` | No toolbar. Build your own (below). |

## Custom toolbar

Set `toolbarMode="none"`, subscribe to toolbar state, and render your own
controls:

```tsx theme={null}
const [state, setState] = useState<ReviseToolbarState | null>(null);
const editor = useRef<ReviseEditorHandle | null>(null);

<ReviseEditor
  initialDocuments={docs}
  toolbarMode="none"
  showTitleBar={false}
  onReady={(handle) => {
    editor.current = handle;
    handle.toolbar.subscribe(setState);
  }}
/>;

<button
  aria-pressed={state?.formatting.bold ?? false}
  disabled={!state?.ready}
  onClick={() => editor.current?.toolbar.toggleBold()}
>
  Bold
</button>;
```

`ReviseToolbarState` includes:
`ready`, `readOnly`, `documentMode`, `hasSelection`, `canUndo`/`canRedo`, the
`formatting` marks at the caret, `heading`, `alignment`, `lineSpacing`,
`fontSizePt`, the current `blockType`, and a `review` summary.

<Tip>
  Subscribe once and call the returned unsubscribe function on unmount. State
  is published on every selection change.
</Tip>

### Toolbar commands

<AccordionGroup>
  <Accordion title="Clipboard and history">
    `undo`, `redo`, `copy`, `copyAs("plaintext" | "markdown" | "html")`, `cut`,
    `paste`, `pasteTextOnly`, `pasteFormattingOnly`
  </Accordion>

  <Accordion title="Inline formatting">
    `toggleBold`, `toggleItalic`, `toggleUnderline`, `toggleStrikethrough`,
    `toggleDoubleStrikethrough`, `toggleSmallCaps`, `toggleAllCaps`,
    `toggleCode`, `toggleLatex`, `toggleSuperscript`, `toggleSubscript`,
    `clearFormatting`, `setFontFamily`, `setFontSize`, `setLetterSpacing`,
    `setTextColor`, `setHighlightColor`
  </Accordion>

  <Accordion title="Paragraph and block">
    `setHeading`, `setAlignment`, `setLineSpacing`, `toggleList`, `createLink`,
    `increaseIndent`, `decreaseIndent`
  </Accordion>

  <Accordion title="Insertion">
    `insertTable`, `insertImage`, `insertContainer`, `insertCodeBlock`,
    `insertMathBlock`, `insertDiagram`, `insertFootnote`, `insertPageNumber`,
    `insertPageBreak`, `insertSectionBreak`
  </Accordion>

  <Accordion title="Review">
    `openReview`, `closeReview`, `reviewPrevious`, `reviewNext`,
    `acceptCurrent`, `rejectCurrent`, `acceptAll`, `rejectAll`,
    `setShowRemovals`, `setSuggestionViewMode`
  </Accordion>
</AccordionGroup>

A command returns `false` when it cannot apply, for example in a read-only
document, with no selection, or with nothing to undo.

## View controller

The `view` controller sets the title, document mode, and panels:

```ts theme={null}
const { title, documentMode, commentsOpen, reviewOpen, reviewTargetCount } =
  editor.view.getState();

editor.view.setTitle("Master Services Agreement");
editor.view.setDocumentMode("suggesting");
editor.view.setReviewOpen(true);
editor.view.setCommentsOpen(true);
```

An Editing/Suggesting toggle:

```tsx theme={null}
const suggesting = view?.documentMode === "suggesting";

<button
  data-active={suggesting}
  onClick={() =>
    editor.current?.view.setDocumentMode(suggesting ? "editing" : "suggesting")
  }
>
  {suggesting ? "Suggesting" : "Editing"}
</button>;
```

## Built-in tabs

Turn on the built-in document tabs with `showTabs`:

```tsx theme={null}
<ReviseEditor
  showTabs
  onNewTab={() => openBlankDocument()}
  initialDocuments={docs}
/>
```

The **+** button renders only when you pass `onNewTab`.

## Focus

The editor takes keyboard focus when a document becomes active. To focus it
only on click, for example in a preview or split view, set `autoFocus={false}`:

```tsx theme={null}
<ReviseEditor autoFocus={false} initialDocuments={docs} />
```


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