Custom Highlight Mark Extension

Build a custom mark extension for a Tiptap-based rich text editor that applies highlighting with specific cursor and text continuation behaviors.

Requirements

Create a Tiptap mark extension named "Highlight" that applies a yellow background color to selected text. The mark must have these specific behaviors:

1. Exitable: Users can move the cursor out of the highlighted region using arrow keys
2. Non-splitting: When pressing Enter inside highlighted text, the new paragraph should start without highlighting
3. Non-inclusive: When typing at the end of highlighted text, new characters should not be highlighted

The extension should provide a toggleHighlight command and render as a <mark> HTML element with yellow background styling.

Test Cases

• The extension exports a Mark named Highlight with a toggleHighlight command @test
• When the cursor is at the end of highlighted text and arrow right is pressed, the cursor exits the highlight (exitable behavior) @test
• When pressing Enter within highlighted text, the new paragraph does not have highlighting (keepOnSplit: false) @test
• When typing new text immediately after highlighted text, the new text is not highlighted (inclusive: false) @test

Implementation

@generates

API

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

export interface HighlightOptions {
  HTMLAttributes: Record<string, any>;
}

export const Highlight: Mark<HighlightOptions>;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the core Tiptap editor framework and Mark class for creating custom mark extensions.

@tiptap/extension-link { .dependency }

Reference implementation demonstrating mark behavior controls including exitable, keepOnSplit, and inclusive properties.