Reset All Formatting Button

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.

Installation

Add the component via the Tiptap CLI:

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

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

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.

import { canResetFormatting } from '@/registry/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.

import { resetFormatting } from '@/registry/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.

import { canResetMarks } from '@/registry/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.

import { removeAllMarksExcept } from '@/registry/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)