Rich Text Editor Setup

Build a basic rich text editor application using a modern editor framework. The editor should support common text formatting features and list management.

Requirements

The application should provide:

1. Editor Initialization: Create an editor instance that can be mounted to a DOM element
2. Initial Content: Load the editor with predefined HTML content on startup
3. Text Formatting: Support for bold, italic, and code formatting
4. Headings: Support for headings at levels 1, 2, and 3
5. Lists: Support for both bulleted and numbered lists
6. Block Quotes: Support for blockquote formatting
7. History: Provide undo and redo functionality

Technical Constraints

• The editor must be created with extensions that provide the required features
• Use a single, cohesive approach to enable all required formatting capabilities
• The editor should accept HTML as initial content

Test Cases

Create a test file with the following test cases:

• The editor initializes successfully with default configuration @test
• The editor can be initialized with HTML content containing a paragraph @test
• Bold formatting can be toggled on selected text @test
• A heading level 2 can be set on a paragraph @test
• An ordered list can be created @test
• Undo reverts the last change @test

Implementation

@generates

API

/**
 * Creates and returns a configured editor instance
 * @param element - The DOM element to mount the editor to
 * @param content - Optional HTML content to initialize the editor with
 * @returns The editor instance
 */
export function createEditor(element: Element, content?: string): any;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core editor functionality.

Tiptap extensions { .dependency }

Provides text formatting and document structure extensions.