Text Editor Keyboard Shortcuts

Build a text editor with custom keyboard shortcuts that enhance productivity for common editing operations.

Requirements

Create a rich text editor that implements the following keyboard shortcuts:

1. Format Shortcuts: Implement shortcuts to apply text formatting without using toolbar buttons

   • Bold text toggle
   • Italic text toggle
   • Strikethrough text toggle
   • Code formatting toggle

2. Navigation Shortcuts: Add shortcuts for quick navigation

   • Select all content
   • Focus the editor programmatically

3. History Shortcuts: Provide standard history navigation

   • Undo the last change
   • Redo the previously undone change

4. Custom Action Shortcuts: Create a custom shortcut that clears all content from the editor

The editor should handle platform differences (macOS vs other platforms) appropriately for modifier keys.

Implementation

@generates

API

/**
 * Creates and returns a configured editor instance with keyboard shortcuts
 */
export function createEditor(element: HTMLElement): any;

/**
 * Destroys the editor and cleans up resources
 */
export function destroyEditor(editor: any): void;

Test Cases

• When Ctrl+B (or Cmd+B on Mac) is pressed, the selected text becomes bold @test
• When Ctrl+I (or Cmd+I on Mac) is pressed, the selected text becomes italic @test
• When Ctrl+Shift+X (or Cmd+Shift+X on Mac) is pressed, the selected text becomes strikethrough @test
• When Ctrl+E (or Cmd+E on Mac) is pressed, the selected text becomes code formatted @test
• When Ctrl+A (or Cmd+A on Mac) is pressed, all content is selected @test
• When Ctrl+Z (or Cmd+Z on Mac) is pressed, the last change is undone @test
• When Ctrl+Shift+Z (or Cmd+Shift+Z on Mac) is pressed, the previously undone change is redone @test
• When Ctrl+Shift+D (or Cmd+Shift+D on Mac) is pressed, all content is cleared from the editor @test

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the rich text editor framework with keyboard shortcut support.

@tiptap/starter-kit { .dependency }

Provides basic editor extensions including text formatting marks.