Document Formatter

Build a document formatting system that automatically converts common text input patterns into proper typographic characters as users type.

Requirements

Your system should:

1. Initialize a rich text editor that supports automatic typography replacements
2. Configure the editor to handle the following text transformations:
   • Convert double hyphens into em dashes
   • Convert triple periods into ellipsis characters
   • Convert straight quotes into smart quotes (both double and single)
   • Convert arrow patterns into arrow symbols
   • Convert common fractions into fraction symbols (1/2, 1/4, 3/4)
   • Convert mathematical symbols (plus-minus, not-equal)
3. Allow selective enabling/disabling of specific typography replacements
4. Support custom replacement characters for each typography rule

Implementation

Create a file formatter.ts that exports:

• createEditor(config): A function that creates and returns an editor instance configured with typography replacements
• The editor should accept initial content as HTML
• The configuration should allow enabling/disabling individual typography features

Test Cases

Create a test file formatter.test.ts with the following tests:

Test 1: Basic Em Dash Conversion { .test }

Input: Initialize editor with empty content, insert the text "Hello--World"

Expected Output: The editor's HTML content should contain "Hello—World" (with em dash character)

Test 2: Ellipsis Conversion { .test }

Input: Initialize editor with empty content, insert the text "Wait..."

Expected Output: The editor's HTML content should contain "Wait…" (with ellipsis character)

Test 3: Smart Quotes { .test }

Input: Initialize editor with empty content, insert the text '"Hello World"'

Expected Output: The editor's HTML content should contain ""Hello World"" (with smart quotes)

Test 4: Selective Typography Rules { .test }

Input: Initialize editor with em dash enabled but ellipsis disabled, insert "Test--one...two"

Expected Output: The editor should convert the double hyphens to em dash (—) but leave the three periods unchanged

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core editor functionality and extension system.

@tiptap/extension-typography { .dependency }

Provides automatic typography replacements for common text input patterns.

@tiptap/extension-document { .dependency }

Provides the document node for the editor schema.

@tiptap/extension-text { .dependency }

Provides the text node for the editor schema.

@tiptap/extension-paragraph { .dependency }

Provides the paragraph node for the editor schema.