Interactive Highlight Extension

Build a Tiptap editor extension that provides a highlight mark with custom interactive rendering using React. The highlight mark should display a clickable badge that allows users to change the highlight color.

Requirements

Create a custom Tiptap mark extension with the following features:

1. Highlight Mark Definition: Define a mark that applies a colored background to text

   • The mark should have a color attribute that stores the highlight color
   • Support three colors: yellow (#ffeb3b), green (#4caf50), and blue (#2196f3)
   • Default to yellow when no color is specified

2. Custom Mark View Rendering: Implement custom rendering for the highlight mark using React

   • Use a custom mark view renderer to display a small circular color badge (8px diameter) immediately after highlighted text
   • The badge should show the current highlight color
   • The badge should be clickable

3. Interactive Color Update: When the badge is clicked, cycle to the next color

   • Click on yellow badge → changes to green
   • Click on green badge → changes to blue
   • Click on blue badge → changes to yellow
   • The update should apply to that specific highlight instance

4. Mark Commands: Implement two essential commands:

   • setHighlight({ color }) - Apply highlight with the specified color to current selection
   • unsetHighlight() - Remove highlight from current selection

Test Cases

• When text "hello world" is selected and setHighlight({ color: 'yellow' }) is executed, the text has a yellow background (#ffeb3b) @test
• When setHighlight({ color: 'green' }) is executed on selected text, the text has a green background (#4caf50) @test
• When unsetHighlight() is executed on highlighted text, the highlight is removed @test
• A circular badge (8px diameter) appears after highlighted text showing the highlight color @test
• When the color badge is clicked, the highlight color cycles to the next color (yellow → green → blue → yellow) @test

Implementation

@generates

API

import { Mark } from '@tiptap/core';

/**
 * Interactive Highlight mark extension that renders with a clickable color badge
 */
export const InteractiveHighlight: Mark;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core Tiptap editor functionality and mark extension base class.

@tiptap/react { .dependency }

Provides React integration and ReactMarkViewRenderer for custom mark rendering.

@tiptap/starter-kit { .dependency }

Provides basic editor extensions for a functional editor.

react { .dependency }

Provides React framework for building interactive components.

react-dom { .dependency }

Provides React DOM rendering capabilities.