Text Formatting Toolbar

Build a simple text formatting toolbar that allows users to apply and remove formatting to selected text in a rich text editor.

Requirements

Your toolbar should support the following formatting operations:

1. Bold formatting: A button that toggles bold formatting on the selected text
2. Italic formatting: A button that toggles italic formatting on the selected text
3. Clear formatting: A button that removes all formatting from the selected text
4. Active state indicators: Each format button should visually indicate when the format is active in the current selection

The toolbar should be implemented as a function that accepts an editor instance and returns an object with methods to:

• Toggle bold formatting
• Toggle italic formatting
• Clear all formatting
• Check if bold is currently active
• Check if italic is currently active

Test Cases

• Calling toggleBold() on text without bold formatting applies bold formatting @test
• Calling toggleBold() on text that is already bold removes bold formatting @test
• Calling toggleItalic() applies italic formatting to unformatted text @test
• Calling clearFormatting() removes all formatting marks from the selected text @test
• The isBoldActive() method returns true when the selection contains bold text @test
• The isItalicActive() method returns true when the selection contains italic text @test

Implementation

@generates

API

import { Editor } from '@tiptap/core';

export interface Toolbar {
  toggleBold(): void;
  toggleItalic(): void;
  clearFormatting(): void;
  isBoldActive(): boolean;
  isItalicActive(): boolean;
}

export function createToolbar(editor: Editor): Toolbar;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the rich text editor framework.

@tiptap/starter-kit { .dependency }

Provides basic editor functionality including bold and italic marks.