Custom Content Types for Rich Text Editor

Build a simple rich text editor content type system that supports custom callout boxes and highlight marks with configurable colors.

Requirements

Your implementation should provide:

1. A custom CalloutBox node that represents a styled callout/blockquote element with:

   • A variant attribute that can be "info", "warning", or "success"
   • Default variant should be "info"
   • The content should allow paragraphs and other block content
   • The node should be treated as a block-level element

2. A custom ColorHighlight mark that applies colored highlighting to text with:

   • A color attribute that accepts any valid CSS color value
   • Default color should be "yellow"
   • The mark should be able to be applied to any inline text

3. Both the node and mark should be properly integrated as extensions and registered with an editor instance

Tests

• Creating a CalloutBox node with variant "warning" sets the correct attribute @test
• Creating a CalloutBox node without specifying variant defaults to "info" @test
• Creating a ColorHighlight mark with color "blue" sets the correct attribute @test
• Creating a ColorHighlight mark without specifying color defaults to "yellow" @test

Implementation

@generates

API

import { Node, Mark, Editor } from '@tiptap/core';

/**
 * Custom node extension for styled callout boxes.
 * Supports three variants: info, warning, and success.
 */
export const CalloutBox: Node;

/**
 * Custom mark extension for colored text highlighting.
 * Supports any CSS color value.
 */
export const ColorHighlight: Mark;

/**
 * Creates and returns a configured editor instance with the custom extensions.
 * The editor is initialized in headless mode (no DOM element).
 */
export function createEditor(): Editor;

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the rich text editor framework and extension system.