Rich Text Link Formatter

Build a rich text editor component that can import HTML content with links, preserve link attributes, and export clean HTML with properly formatted anchor tags.

Requirements

Create a simple rich text editor using a text editing framework that can handle HTML input/output with anchor tags. The editor should parse HTML containing links with various attributes (href, target, rel, class) and render them back to properly formatted HTML.

Core Functionality

HTML Import

• Accept HTML strings containing anchor (<a>) tags as input
• Parse and preserve href, target, rel, and class attributes from links
• Convert HTML links into the editor's internal format

Link Representation

• Store link data with all relevant attributes (href, target, rel, class)
• Maintain link formatting within the editor's content
• Support links with different attribute combinations

HTML Export

• Generate clean HTML output from the editor's content
• Render links as properly formatted <a> tags
• Include all preserved attributes in the output HTML
• Ensure exported HTML is valid and well-formed

Test Cases

• Importing HTML with a simple link <a href="https://example.com">Link</a> preserves the href attribute @test
• Importing HTML with complex link attributes <a href="/docs" target="_blank" rel="noopener" class="external">Docs</a> preserves all attributes @test
• Exporting editor content produces valid HTML with all link attributes intact @test
• Setting custom HTML attributes (target, rel, class) on links appears in the exported HTML @test

Implementation

@generates

API

interface EditorOptions {
  content?: string;
}

/**
 * Creates a rich text editor instance with link support
 * @param options - Configuration options including initial content
 * @returns Editor instance
 */
export function createEditor(options?: EditorOptions): Editor;

interface Editor {
  /**
   * Sets HTML content in the editor, parsing any link elements
   * @param html - HTML string to import
   */
  setContent(html: string): void;

  /**
   * Exports editor content as HTML with properly formatted links
   * @returns HTML string representation
   */
  getHTML(): string;
}

Dependencies { .dependencies }

@tiptap/extension-link { .dependency }

Provides link functionality for rich text editors including HTML parsing and rendering capabilities.