CtrlK
BlogDocsLog inGet started
Tessl Logo

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

TipTap Extension Text Style

TipTap Extension Text Style is a comprehensive text styling system for the TipTap rich text editor framework. It provides modular styling capabilities including text color, background color, font family, font size, and line height through a mark-based system built on ProseMirror. The extension offers both individual styling extensions and a convenient bundle for complete text styling functionality.

Package Information

  • Package Name: @tiptap/extension-text-style
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-text-style

Core Imports

import { 
  TextStyle, 
  Color, 
  BackgroundColor, 
  FontFamily, 
  FontSize, 
  LineHeight,
  TextStyleKit 
} from "@tiptap/extension-text-style";

Individual styling extensions can be imported separately:

import { Color } from "@tiptap/extension-text-style/color";
import { BackgroundColor } from "@tiptap/extension-text-style/background-color";
import { FontFamily } from "@tiptap/extension-text-style/font-family";
import { FontSize } from "@tiptap/extension-text-style/font-size";
import { LineHeight } from "@tiptap/extension-text-style/line-height";
import { TextStyle } from "@tiptap/extension-text-style/text-style";
import { TextStyleKit } from "@tiptap/extension-text-style/text-style-kit";

Basic Usage

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

// Use the complete text styling kit
const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      color: {},
      backgroundColor: {},
      fontFamily: {},
      fontSize: {},
      lineHeight: {}
    })
  ]
});

// Apply text styles using commands
editor.commands.setColor("#ff0000");
editor.commands.setBackgroundColor("#ffff00");
editor.commands.setFontFamily("Arial");
editor.commands.setFontSize("18px");
editor.commands.setLineHeight("1.5");

// Chain multiple styling operations
editor.chain()
  .setColor("#0066cc")
  .setFontSize("16px")
  .setFontFamily("Georgia")
  .run();

Architecture

The extension is built around several key components:

  • TextStyle Mark: Core ProseMirror mark that serves as the foundation for all text styling, handles HTML span parsing and rendering
  • Styling Extensions: Individual extensions (Color, BackgroundColor, FontFamily, FontSize, LineHeight) that extend TextStyle with specific attributes
  • Command System: TipTap command interface augmentation providing chainable styling operations
  • HTML Processing: Robust parsing of existing HTML content with special handling for nested span elements
  • TextStyleKit: Convenience bundle that configures all styling extensions together

Global Types

/**
 * Available text style attributes that can be applied to text
 */
interface TextStyleAttributes extends Record<string, any> {
  color?: string | null;
  backgroundColor?: string | null;
  fontFamily?: string | null;
  fontSize?: string | null;
  lineHeight?: string | null;
}

Capabilities

Core Text Style Mark

Foundation mark for all text styling operations, providing HTML span element handling and command integration.

const TextStyle: Mark<TextStyleOptions>;

interface TextStyleOptions {
  HTMLAttributes: Record<string, any>;
  mergeNestedSpanStyles: boolean;
}

Text Style Mark

Text Color Styling

Apply and manage text color with robust HTML parsing and CSS style generation.

const Color: Extension<ColorOptions>;

interface ColorOptions {
  types: string[];
}

Color Styling

Background Color Styling

Apply background colors to text with support for nested span style merging.

const BackgroundColor: Extension<BackgroundColorOptions>;

interface BackgroundColorOptions {
  types: string[];
}

Background Color

Font Family Styling

Set custom font families on text selections with CSS font-family support.

const FontFamily: Extension<FontFamilyOptions>;

interface FontFamilyOptions {
  types: string[];
}

Font Family

Font Size Styling

Control text font sizes with flexible CSS units support.

const FontSize: Extension<FontSizeOptions>;

interface FontSizeOptions {
  types: string[];
}

Font Size

Line Height Styling

Adjust line spacing for improved text readability and layout control.

const LineHeight: Extension<LineHeightOptions>;

interface LineHeightOptions {
  types: string[];
}

Line Height

Complete Styling Bundle

Convenient bundle extension that includes all text styling capabilities with individual configuration.

const TextStyleKit: Extension<TextStyleKitOptions>;

interface TextStyleKitOptions {
  backgroundColor: Partial<BackgroundColorOptions> | false;
  color: Partial<ColorOptions> | false;
  fontFamily: Partial<FontFamilyOptions> | false;
  fontSize: Partial<FontSizeOptions> | false;
  lineHeight: Partial<LineHeightOptions> | false;
  textStyle: Partial<TextStyleOptions> | false;
}

TextStyle Kit

Install with Tessl CLI

npx tessl i tessl/npm-tiptap--extension-text-style
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-text-style@3.4.x
Badge
tessl/npm-tiptap--extension-text-style badge