Custom Link Extension for Tiptap Editor in React

I'll create a custom Tiptap extension that allows you to add links with custom text and background color. This will include a button in the toolbar that opens a dialog for entering the link URL, display text, and selecting a background color.

How It Works

This implementation creates a custom Tiptap extension that enhances the standard link functionality with background color support:

1. Custom Link Extension: The ColoredLinkExtension extends Tiptap's built-in Link extension to add background color support.

2. Link Dialog: When you click the link button in the toolbar, a dialog opens where you can:

   • Enter the URL
   • Specify the link text (if no text is selected in the editor)
   • Choose a background color from presets or use a color picker
3. Visual Preview: The dialog includes a preview of how your link will appear with the selected background color.
4. Styling: The links are styled with rounded corners and padding to make them stand out in the content.

Key Features

• Custom Text: You can specify different text for the link than what's selected
• Background Color: Choose from preset colors or pick a custom color
• Visual Preview: See how your link will look before adding it
• Seamless Integration: Works with Tiptap's existing editor functionality

The extension properly handles the background color attribute and renders it in the editor, making your links visually distinctive.

Adding Custom Image and YouTube Extensions to Tiptap Editor

I'll extend our Tiptap editor to include both a custom image node extension and a YouTube video preview extension. This will allow users to insert and customize images as well as embed YouTube videos directly in the editor.

How the Custom Extensions Work

I've added two powerful extensions to our Tiptap editor:

1. Custom Image Extension

The CustomImageExtension enhances the standard Tiptap image extension with:

• Alt text and title attributes: For better accessibility and SEO
• Width and height controls: To resize images
• Alignment options: Left, center, or right alignment
• Caption support: Add descriptive text below images
• Figure/figcaption rendering: Properly structured HTML for images with captions

When you click the image button in the toolbar, a dialog opens where you can:

• Enter the image URL
• Add alt text, title, and caption
• Set dimensions
• Choose alignment

2. YouTube Video Extension

The YouTubeExtension creates a new node type that:

• Embeds YouTube videos: Renders videos in responsive iframes
• Parses YouTube URLs: Extracts video IDs from various YouTube URL formats
• Supports start times: Begin playback at a specific timestamp
• Customizable dimensions: Set width and height
• Responsive design: Videos scale properly on different screen sizes

When you click the YouTube button, a dialog opens where you can:

• Enter a YouTube URL (with validation)
• Set dimensions
• Specify a start time in seconds

Implementation Details

1. Custom Node Rendering:

   • The YouTube extension uses a React component for rendering
   • The image extension uses HTML rendering with proper figure/figcaption structure

2. URL Parsing:

   • YouTube URLs are parsed to extract video IDs
   • Various YouTube URL formats are supported (youtube.com, youtu.be, etc.)

3. Dialog Components:

   • Each extension has its own dialog component for configuration
   • Dialogs provide validation and preview functionality

4. Responsive Design:

   • YouTube videos use a responsive container with proper aspect ratio
   • Images can be sized and aligned as needed

Usage

The editor now has three main content insertion options:

1. Colored Links: Insert links with custom text and background color
2. Custom Images: Insert images with captions, alignment, and sizing options
3. YouTube Videos: Embed YouTube videos with custom dimensions and start times

Each option has its own button in the toolbar and opens a dedicated dialog for configuration.