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

Line Height Styling

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

The LineHeight extension provides line height styling capabilities, allowing users to control text line spacing for improved readability and layout control with support for all CSS line-height units.

Capabilities

LineHeight Extension

Extension for applying line heights to text with full CSS line-height unit and value support.

/**
 * Extension for setting line height on specified node types
 * Extends textStyle mark with lineHeight attribute
 */
const LineHeight: Extension<LineHeightOptions>;

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

Usage Example:

import { Editor } from "@tiptap/core";
import { LineHeight } from "@tiptap/extension-text-style/line-height";
import { TextStyle } from "@tiptap/extension-text-style/text-style";

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

Set Line Height Command

Apply a specific line height to the current text selection.

/**
 * Set the line height
 * @param lineHeight - CSS line-height value (number, px, em, rem, %, normal, etc.)
 * @returns Command result indicating success/failure
 */
setLineHeight(lineHeight: string): Command;

Usage Examples:

// Unitless numbers (most common, multiplier of font size)
editor.commands.setLineHeight("1");      // Tight spacing
editor.commands.setLineHeight("1.2");    // Compact spacing
editor.commands.setLineHeight("1.5");    // Comfortable reading
editor.commands.setLineHeight("2");      // Double spacing

// Pixel units
editor.commands.setLineHeight("20px");
editor.commands.setLineHeight("24px");

// Em units (relative to element's font size)
editor.commands.setLineHeight("1.2em");
editor.commands.setLineHeight("1.8em");

// Rem units (relative to root font size)
editor.commands.setLineHeight("1.5rem");
editor.commands.setLineHeight("2rem");

// Percentage
editor.commands.setLineHeight("120%");
editor.commands.setLineHeight("150%");

// Keywords
editor.commands.setLineHeight("normal");  // Browser default

// Chain with other styling commands
editor.chain()
  .setLineHeight("1.6")
  .setFontSize("16px")
  .setFontFamily("Georgia")
  .run();

Unset Line Height Command

Remove line height styling from the current text selection.

/**
 * Unset the line height, removing lineHeight attribute and cleaning up empty textStyle marks
 * @returns Command result indicating success/failure
 */
unsetLineHeight(): Command;

Usage Example:

// Remove line height and clean up empty styling
editor.commands.unsetLineHeight();

// Chain removal with other operations
editor.chain()
  .unsetLineHeight()
  .setFontSize("16px")
  .run();

HTML Processing

Line Height Parsing

The LineHeight extension includes straightforward HTML parsing:

Direct Style Reading: Reads line-height value directly from element.style.lineHeight
Unit Preservation: Maintains original CSS units and format
Unitless Support: Properly handles unitless number values
Computed Value: Uses computed line-height value from the DOM

Rendering Output

CSS Format: Renders as style="line-height: {value}" attribute
Clean Output: Only adds line-height attribute when a value is present
Format Preservation: Maintains exact line-height string including units or unitless format

Type System Integration

Module Augmentation

The LineHeight extension augments TipTap's type system:

// Extends core Commands interface
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    lineHeight: {
      setLineHeight: (lineHeight: string) => ReturnType;
      unsetLineHeight: () => ReturnType;
    }
  }
}

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

Configuration Examples

Basic Configuration

import { LineHeight } from "@tiptap/extension-text-style/line-height";

const lineHeightExtension = LineHeight.configure({
  types: ['textStyle']
});

Extended Node Type Support

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

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

Line Height Value Examples

Unitless Values (Recommended)

Unitless values are multipliers of the element's font size and are the most flexible:

// Tight line spacing (for headings)
editor.commands.setLineHeight("1");      // 100% of font size
editor.commands.setLineHeight("1.1");    // 110% of font size

// Normal reading (for body text)
editor.commands.setLineHeight("1.4");    // Good for small text
editor.commands.setLineHeight("1.5");    // Standard reading comfort
editor.commands.setLineHeight("1.6");    // Generous spacing

// Loose spacing (for accessibility)
editor.commands.setLineHeight("1.8");    // Extra spacing
editor.commands.setLineHeight("2");      // Double spacing

Absolute Units

// Pixel values (fixed spacing)
editor.commands.setLineHeight("18px");   // Tight
editor.commands.setLineHeight("24px");   // Normal
editor.commands.setLineHeight("30px");   // Loose

// Point values (print-oriented)
editor.commands.setLineHeight("14pt");
editor.commands.setLineHeight("18pt");

Relative Units

// Em units (relative to element font size)
editor.commands.setLineHeight("1.2em");  // 120% of font size
editor.commands.setLineHeight("1.5em");  // 150% of font size

// Rem units (relative to root font size)
editor.commands.setLineHeight("1.5rem"); // Fixed based on root
editor.commands.setLineHeight("2rem");   // Double root size

// Percentages
editor.commands.setLineHeight("120%");   // 120% of font size
editor.commands.setLineHeight("150%");   // 150% of font size

Typography Best Practices

Recommended Line Heights

// For different content types
editor.commands.setLineHeight("1.2");    // Headlines/headings
editor.commands.setLineHeight("1.4");    // Small body text (12-14px)
editor.commands.setLineHeight("1.5");    // Normal body text (16px)
editor.commands.setLineHeight("1.6");    // Large body text (18px+)
editor.commands.setLineHeight("1.8");    // Accessibility/readability focus

Responsive Line Heights

// Use unitless values for responsive design
editor.commands.setLineHeight("1.4");    // Scales with font size changes

// Avoid fixed pixel values for responsive text
// editor.commands.setLineHeight("20px"); // Not recommended for responsive

Accessibility Considerations

For improved accessibility and readability:

// WCAG recommends at least 1.5x line height for body text
editor.commands.setLineHeight("1.5");

// For users with dyslexia, higher line heights can help
editor.commands.setLineHeight("1.6");
editor.commands.setLineHeight("1.8");

Install with Tessl CLI

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

docs