Chrome and toolbars

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

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

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.

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

Clipboard and history

undo, redo, copy, copyAs("plaintext" | "markdown" | "html"), cut, paste, pasteTextOnly, pasteFormattingOnly

Inline formatting

toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleDoubleStrikethrough, toggleSmallCaps, toggleAllCaps, toggleCode, toggleLatex, toggleSuperscript, toggleSubscript, clearFormatting, setFontFamily, setFontSize, setLetterSpacing, setTextColor, setHighlightColor

Paragraph and block

setHeading, setAlignment, setLineSpacing, toggleList, createLink, increaseIndent, decreaseIndent

Insertion

insertTable, insertImage, insertContainer, insertCodeBlock, insertMathBlock, insertDiagram, insertFootnote, insertPageNumber, insertPageBreak, insertSectionBreak

Review

openReview, closeReview, reviewPrevious, reviewNext, acceptCurrent, rejectCurrent, acceptAll, rejectAll, setShowRemovals, setSuggestionViewMode

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:

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:

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:

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

<ReviseEditor autoFocus={false} initialDocuments={docs} />

Getting started

Guides

API reference

Optional chrome

Ribbon modes

View controller

Built-in tabs

Focus

​Optional chrome

​Ribbon modes

​Custom toolbar

​Toolbar commands

​View controller

​Built-in tabs

​Focus

Optional chrome

Ribbon modes

Custom toolbar

Toolbar commands

View controller

Built-in tabs

Focus