Text Formatting Editor

Build a simple rich text editor that supports basic text formatting: bold, italic, strikethrough, code, and underline.

Requirements

Editor Setup

Initialize a rich text editor with support for:

• Bold text formatting
• Italic text formatting
• Strikethrough text formatting
• Inline code formatting
• Underline text formatting

The editor should start with some default content and allow programmatic text selection.

Formatting Operations

Your implementation should support:

• Toggle formatting: Apply a format if not active, remove if already active
• Check active formats: Determine which formats are currently applied at the cursor/selection
• Export content: Get the formatted content as HTML

Expected Behavior

When text is selected and a format is toggled:

• If the format is not applied, it should be applied to the selection
• If the format is already applied, it should be removed from the selection
• Multiple formats can be applied to the same text simultaneously

Test Cases

• Toggling bold on selected text applies bold formatting @test
• Toggling bold on already bold text removes the bold formatting @test
• Multiple formats (bold, italic, underline) can be applied to the same text @test
• isActive check returns correct status for each format type @test

Implementation

@generates

API

/**
 * Creates and returns a rich text editor instance with all formatting extensions
 * The editor should be initialized with basic content: "<p>Hello world</p>"
 */
export function createEditor(): any;

/**
 * Programmatically selects text in the editor
 * @param editor - The editor instance
 * @param from - Start position
 * @param to - End position
 */
export function selectText(editor: any, from: number, to: number): void;

/**
 * Toggles bold formatting on the current selection
 */
export function toggleBold(editor: any): void;

/**
 * Toggles italic formatting on the current selection
 */
export function toggleItalic(editor: any): void;

/**
 * Toggles strikethrough formatting on the current selection
 */
export function toggleStrike(editor: any): void;

/**
 * Toggles inline code formatting on the current selection
 */
export function toggleCode(editor: any): void;

/**
 * Toggles underline formatting on the current selection
 */
export function toggleUnderline(editor: any): void;

/**
 * Checks if a specific format is active at the current cursor/selection
 * @param formatName - One of: 'bold', 'italic', 'strike', 'code', 'underline'
 */
export function isFormatActive(editor: any, formatName: string): boolean;

/**
 * Exports the current editor content as HTML
 */
export function getHTML(editor: any): string;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides core rich text editing functionality.

@tiptap/starter-kit { .dependency }

Provides essential editor extensions including document structure.