tessl/npm-tiptap--extension-text-style

Text styling extension for TipTap rich text editor providing color, background, font family, font size, and line height capabilities.

—

Pending

Overview

Eval results

Files

Color Styling

Name: tessl/npm-tiptap--extension-text-style
Author: tessl

The Color extension provides text color styling capabilities with robust HTML parsing that preserves original color formats and handles nested span elements.

Capabilities

Color Extension

Extension for applying text color with support for any CSS color format and advanced HTML style parsing.

/**
 * Extension for setting text color on specified node types
 * Extends textStyle mark with color attribute
 */
const Color: Extension<ColorOptions>;

interface ColorOptions {
  /** 
   * Node types where color can be applied
   * @default ['textStyle']
   * @example ['heading', 'paragraph', 'textStyle']
   */
  types: string[];
}

Usage Example:

import { Editor } from "@tiptap/core";
import { Color } from "@tiptap/extension-text-style/color";
import { TextStyle } from "@tiptap/extension-text-style/text-style";

const editor = new Editor({
  extensions: [
    TextStyle, // Required dependency
    Color.configure({
      types: ['textStyle', 'heading']
    })
  ]
});

Set Color Command

Apply a specific color to the current text selection.

/**
 * Set the text color
 * @param color - CSS color value (hex, rgb, hsl, named colors, etc.)
 * @returns Command result indicating success/failure
 */
setColor(color: string): Command;

Usage Examples:

// Hex colors
editor.commands.setColor("#ff0000");
editor.commands.setColor("#c0ffee");

// RGB/RGBA colors
editor.commands.setColor("rgb(255, 0, 0)");
editor.commands.setColor("rgba(255, 0, 0, 0.5)");

// HSL colors
editor.commands.setColor("hsl(120, 100%, 50%)");

// Named colors
editor.commands.setColor("red");
editor.commands.setColor("darkblue");

// Chain with other commands
editor.chain()
  .setColor("#0066cc")
  .setFontSize("18px")
  .run();

Unset Color Command

Remove color styling from the current text selection.

/**
 * Unset the text color, removing color attribute and cleaning up empty textStyle marks
 * @returns Command result indicating success/failure
 */
unsetColor(): Command;

Usage Example:

// Remove color and clean up empty styling
editor.commands.unsetColor();

// Chain removal with other operations
editor.chain()
  .unsetColor()
  .setFontFamily("Arial")
  .run();

HTML Processing

Advanced Color Parsing

The Color extension includes sophisticated HTML parsing that:

Preserves Format: Maintains original color format from HTML (#rrggbb vs rgb(...))
Handles Nested Spans: When multiple color declarations exist in nested spans, child color takes priority
Multiple Declarations: Parses style attributes with multiple color: declarations, using the last one
Quote Handling: Automatically removes quotes from color values during parsing

Parsing Priority Logic

// Example of nested span parsing
// <span style="color: blue;"><span style="color: red;">text</span></span>
// Result: color will be "red" (child takes priority)

Rendering Output

CSS Format: Renders as style="color: {value}" attribute
Clean Output: Only adds color attribute when a color value is present
Format Preservation: Maintains original color format when possible

Type System Integration

Module Augmentation

The Color extension augments TipTap's type system:

// Extends core Commands interface
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    color: {
      setColor: (color: string) => ReturnType;
      unsetColor: () => ReturnType;
    }
  }
}

// Extends TextStyleAttributes interface  
declare module '@tiptap/extension-text-style' {
  interface TextStyleAttributes {
    color?: string | null;
  }
}

Configuration Examples

Basic Configuration

import { Color } from "@tiptap/extension-text-style/color";

const colorExtension = Color.configure({
  types: ['textStyle']
});

Extended Node Type Support

const colorExtension = Color.configure({
  types: ['textStyle', 'heading', 'paragraph']
});

This allows color to be applied directly to headings and paragraphs in addition to inline text styling.

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--extension-text-style

docs