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

# Chrome and toolbars

> Use the native ribbon, or turn it all off and build your own.

Every piece of UI the SDK draws around the document is optional, and everything
those controls do is reachable from the handle. The rule: **the SDK owns the
document, not your product.**

## What is optional

| 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            | —                        | —          | `view.setCommentsOpen()` |

The comments panel has no built-in button at all: comment chips render inline
next to the page, and the host opens or closes the panel wherever its own UI
calls for it.

## A host-rendered toolbar

Set `toolbarMode="none"`, subscribe to toolbar state, and render whatever you
like:

```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` publishes everything a toolbar needs to render itself:
`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 let the returned unsubscribe function run on unmount.
  State is published on every selection change, so buttons stay in sync with
  the caret without polling.
</Tip>

### What the toolbar controller covers

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

Commands return `false` when they cannot apply — read-only documents, no
selection, nothing to undo — so you can drive disabled states from the return
value as well as from state.

## Title, mode, and review

The `view` controller carries the chrome the title bar used to own:

```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);
```

A single Editing/Suggesting button is usually all a host needs:

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

If you would rather not build a file switcher, turn on the native one:

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

Without an `onNewTab` callback no "+" button renders — document creation stays
the host's decision.

## Focus

The editor takes keyboard focus when a document becomes active. On a page where
the editor is one element among many — a preview, a marketing surface, a split
view the user did not ask for — turn that off and let a click do it:

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