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

TextStyle Kit

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

The TextStyleKit is a convenience extension that bundles all text styling extensions together, providing a simple way to add comprehensive text styling capabilities to a TipTap editor.

Capabilities

TextStyleKit Extension

Bundle extension that includes all text styling extensions (TextStyle, Color, BackgroundColor, FontFamily, FontSize, LineHeight) with individual configuration options.

/**
 * Bundle extension containing all text styling capabilities
 * Automatically configures and includes all styling extensions
 */
const TextStyleKit: Extension<TextStyleKitOptions>;

interface TextStyleKitOptions {
  /** BackgroundColor extension config or false to disable */
  backgroundColor: Partial<BackgroundColorOptions> | false;
  /** Color extension config or false to disable */
  color: Partial<ColorOptions> | false;
  /** FontFamily extension config or false to disable */
  fontFamily: Partial<FontFamilyOptions> | false;
  /** FontSize extension config or false to disable */
  fontSize: Partial<FontSizeOptions> | false;
  /** LineHeight extension config or false to disable */
  lineHeight: Partial<LineHeightOptions> | false;
  /** TextStyle mark config or false to disable (not recommended) */
  textStyle: Partial<TextStyleOptions> | false;
}

Usage Example:

import { Editor } from "@tiptap/core";
import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // All extensions enabled with default options
      backgroundColor: {},
      color: {},
      fontFamily: {},
      fontSize: {},
      lineHeight: {},
      textStyle: {}
    })
  ]
});

Configuration Examples

Complete Text Styling Setup

Enable all text styling capabilities with default settings:

import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      backgroundColor: {},
      color: {},
      fontFamily: {},
      fontSize: {},
      lineHeight: {},
      textStyle: {}
    })
  ]
});

// All commands are now available
editor.commands.setColor("#ff0000");
editor.commands.setBackgroundColor("#ffff00");
editor.commands.setFontFamily("Arial");
editor.commands.setFontSize("18px");
editor.commands.setLineHeight("1.5");

Partial Configuration

Enable only specific styling capabilities:

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // Enable only color and font styling
      color: {},
      fontFamily: {},
      fontSize: {},
      textStyle: {}, // Always include for foundation
      
      // Disable background and line height
      backgroundColor: false,
      lineHeight: false
    })
  ]
});

// Only color, font family, and font size commands available
editor.commands.setColor("#0066cc");
editor.commands.setFontFamily("Georgia");
editor.commands.setFontSize("16px");

// These commands would not be available:
// editor.commands.setBackgroundColor(); // Not available
// editor.commands.setLineHeight();      // Not available

Custom Extension Configuration

Configure individual extensions with custom options:

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // Configure color for headings and paragraphs
      color: {
        types: ['textStyle', 'heading', 'paragraph']
      },
      
      // Configure background color for textStyle only
      backgroundColor: {
        types: ['textStyle']
      },
      
      // Standard font configuration
      fontFamily: {},
      fontSize: {},
      lineHeight: {},
      
      // TextStyle with custom HTML attributes
      textStyle: {
        HTMLAttributes: {
          class: 'custom-text-style'
        },
        mergeNestedSpanStyles: true
      }
    })
  ]
});

Minimal Configuration

For basic text styling needs:

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // Just color and basic styling
      color: {},
      textStyle: {},
      
      // Disable other features
      backgroundColor: false,
      fontFamily: false,
      fontSize: false,
      lineHeight: false
    })
  ]
});

Available Commands

When TextStyleKit is configured, all enabled extension commands become available:

Color Commands (if enabled)

editor.commands.setColor(color: string);
editor.commands.unsetColor();

Background Color Commands (if enabled)

editor.commands.setBackgroundColor(backgroundColor: string);
editor.commands.unsetBackgroundColor();

Font Family Commands (if enabled)

editor.commands.setFontFamily(fontFamily: string);
editor.commands.unsetFontFamily();

Font Size Commands (if enabled)

editor.commands.setFontSize(fontSize: string);
editor.commands.unsetFontSize();

Line Height Commands (if enabled)

editor.commands.setLineHeight(lineHeight: string);
editor.commands.unsetLineHeight();

TextStyle Commands (if enabled)

editor.commands.toggleTextStyle(attributes?: TextStyleAttributes);
editor.commands.removeEmptyTextStyle();

Chaining Operations

All enabled commands can be chained together:

// Apply multiple styles at once
editor.chain()
  .setColor("#333333")
  .setBackgroundColor("#f5f5f5")
  .setFontFamily("Georgia")
  .setFontSize("18px") 
  .setLineHeight("1.6")
  .run();

// Remove all styling
editor.chain()
  .unsetColor()
  .unsetBackgroundColor()
  .unsetFontFamily()
  .unsetFontSize()
  .unsetLineHeight()
  .removeEmptyTextStyle()
  .run();

Bundle Architecture

The TextStyleKit works by:

Extension Registration: Conditionally registers each styling extension based on configuration
Option Forwarding: Passes configuration options to individual extensions
Dependency Management: Automatically includes TextStyle mark when any styling extension is enabled
Command Aggregation: Makes all enabled extension commands available through the editor

vs Individual Extension Imports

Using TextStyleKit (Recommended)

import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      color: {},
      fontFamily: {},
      fontSize: {}
    })
  ]
});

Using Individual Extensions

import { TextStyle } from "@tiptap/extension-text-style/text-style";
import { Color } from "@tiptap/extension-text-style/color";
import { FontFamily } from "@tiptap/extension-text-style/font-family";
import { FontSize } from "@tiptap/extension-text-style/font-size";

const editor = new Editor({
  extensions: [
    TextStyle,
    Color,
    FontFamily,
    FontSize
  ]
});

Both approaches are equivalent, but TextStyleKit provides more convenient configuration and ensures proper dependencies are included.

Install with Tessl CLI

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

docs