---
title: "Reset All Formatting Button"
description: "Remove all text formatting and marks from selected content in Tiptap editors with selective mark preservation, keyboard shortcuts, and accessibility support."
canonical_url: "https://tiptap.dev/docs/ui-components/components/reset-all-formatting-button"
---

# Reset All Formatting Button

Remove all text formatting and marks from selected content in Tiptap editors with selective mark preservation, keyboard shortcuts, and accessibility support.

A fully accessible reset all formatting button for Tiptap editors. Easily remove all text formatting marks while preserving specified marks with keyboard shortcut support and flexible customization options.

> **Interactive demo:** [reset all formatting button](https://template.tiptap.dev/preview/tiptap-ui/reset-all-formatting-button)

## Installation

Add the component via the Tiptap CLI:

```bash
npx @tiptap/cli@latest add reset-all-formatting-button
```

## Components

### `<ResetAllFormattingButton />`

A prebuilt React component that removes all formatting marks from the current selection.

#### Usage

```tsx
function MyMentionTriggerButton() {
  return (
    <ResetAllFormattingButton
      editor={editor}
      text="Reset"
      preserveMarks={['inlineThread', 'link']}
      hideWhenUnavailable={true}
      showShortcut={true}
      onResetAllFormatting={() => console.log('Formatting reset!')}
    />
  )
}
```

#### Props

| Name                   | Type             | Default            | Description                                           |
| ---------------------- | ---------------- | ------------------ | ----------------------------------------------------- |
| `editor`               | `Editor \| null` | `undefined`        | The Tiptap editor instance                            |
| `text`                 | `string`         | `undefined`        | Optional text label for the button                    |
| `preserveMarks`        | `string[]`       | `["inlineThread"]` | Mark types to preserve when resetting formatting      |
| `hideWhenUnavailable`  | `boolean`        | `false`            | Hides the button when reset is not available          |
| `onResetAllFormatting` | `() => void`     | `undefined`        | Callback fired after formatting is successfully reset |
| `showShortcut`         | `boolean`        | `false`            | Shows a keyboard shortcut badge (if available)        |

## Hooks

### `useResetAllFormatting()`

A custom hook to build your own reset formatting button with full control over rendering and behavior.

#### Usage

```tsx
function MyResetFormattingButton() {
  const { isVisible, canReset, handleResetFormatting, label, shortcutKeys, Icon } =
    useResetAllFormatting({
      editor: myEditor,
      preserveMarks: ['link', 'mention'],
      hideWhenUnavailable: true,
      onResetAllFormatting: () => console.log('Formatting reset!'),
    })

  if (!isVisible) return null

  return (
    <button onClick={handleResetFormatting} disabled={!canReset} aria-label={label}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}
```

#### Props

| Name                   | Type             | Default     | Description                                           |
| ---------------------- | ---------------- | ----------- | ----------------------------------------------------- |
| `editor`               | `Editor \| null` | `undefined` | The Tiptap editor instance                            |
| `preserveMarks`        | `string[]`       | `undefined` | Mark types to preserve when resetting formatting      |
| `hideWhenUnavailable`  | `boolean`        | `false`     | Hides the button if reset is not available            |
| `onResetAllFormatting` | `() => void`     | `undefined` | Callback fired after formatting is successfully reset |

#### Return Values

| Name                    | Type            | Description                                    |
| ----------------------- | --------------- | ---------------------------------------------- |
| `isVisible`             | `boolean`       | Whether the button should be rendered          |
| `canReset`              | `boolean`       | If formatting reset is currently allowed       |
| `handleResetFormatting` | `() => boolean` | Function to reset all formatting               |
| `label`                 | `string`        | Accessible label text for the button           |
| `shortcutKeys`          | `string`        | Keyboard shortcut (Cmd/Ctrl + R)               |
| `Icon`                  | `React.FC`      | Icon component for the reset formatting button |

## Utilities

### `canResetFormatting(editor, preserveMarks?)`

Checks if formatting can be reset in the current editor state.

```tsx
import { canResetFormatting } from '@/components/tiptap-ui/reset-all-formatting-button'

const canReset = canResetFormatting(editor) // Check if any formatting can be reset
const canResetWithPreserve = canResetFormatting(editor, ['link']) // Check with preserved marks
```

### `resetFormatting(editor, preserveMarks?)`

Programmatically resets all formatting in the current selection.

```tsx
import { resetFormatting } from '@/components/tiptap-ui/reset-all-formatting-button'

// Reset all formatting
const success = resetFormatting(editor)

// Reset formatting but preserve specific marks
const success2 = resetFormatting(editor, ['link', 'mention'])

if (success) {
  console.log('Formatting reset successfully!')
}
```

### `canResetMarks(transaction, skip?)`

Checks if marks can be reset in a given transaction.

```tsx
import { canResetMarks } from '@/components/tiptap-ui/reset-all-formatting-button'

const tr = editor.state.tr
const canReset = canResetMarks(tr) // Check if any marks can be reset
const canResetWithSkip = canResetMarks(tr, ['link']) // Check while skipping specific marks
```

### `removeAllMarksExcept(transaction, skip?)`

Removes all marks from a transaction except those specified in the skip array.

```tsx
import { removeAllMarksExcept } from '@/components/tiptap-ui/reset-all-formatting-button'

const tr = editor.state.tr
const modifiedTr = removeAllMarksExcept(tr, ['link', 'mention'])
editor.view.dispatch(modifiedTr)
```

## Keyboard Shortcuts

The reset all formatting button supports the following keyboard shortcut:

- **Cmd/Ctrl + R**: Reset all formatting in current selection

The shortcut is automatically registered when using either the `<ResetAllFormattingButton />` component or the `useResetAllFormatting()` hook.

**Note**: This shortcut overrides the browser's default refresh behavior when the editor is focused.

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

- `use-tiptap-editor` (hook)
- `button` (primitive)
- `badge` (primitive)
- `tiptap-utils` (lib)
- `rotate-ccw-icon` (icon)