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

Font Size Styling

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

The FontSize extension provides font size styling capabilities, allowing users to apply custom font sizes to text selections with support for all CSS font-size units.

Capabilities

FontSize Extension

Extension for applying font sizes to text with full CSS font-size unit support.

/**
 * Extension for setting font size on specified node types
 * Extends textStyle mark with fontSize attribute
 */
const FontSize: Extension<FontSizeOptions>;

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

Usage Example:

import { Editor } from "@tiptap/core";
import { FontSize } from "@tiptap/extension-text-style/font-size";
import { TextStyle } from "@tiptap/extension-text-style/text-style";

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

Set Font Size Command

Apply a specific font size to the current text selection.

/**
 * Set the font size
 * @param fontSize - CSS font-size value with units (px, em, rem, %, pt, etc.)
 * @returns Command result indicating success/failure
 */
setFontSize(fontSize: string): Command;

Usage Examples:

// Pixel units
editor.commands.setFontSize("16px");
editor.commands.setFontSize("24px");

// Em units (relative to parent)
editor.commands.setFontSize("1.5em");
editor.commands.setFontSize("0.8em");

// Rem units (relative to root)
editor.commands.setFontSize("1.2rem");
editor.commands.setFontSize("2rem");

// Percentage
editor.commands.setFontSize("120%");
editor.commands.setFontSize("75%");

// Point units (print)
editor.commands.setFontSize("12pt");
editor.commands.setFontSize("18pt");

// Keyword values
editor.commands.setFontSize("large");
editor.commands.setFontSize("x-small");

// Chain with other styling commands
editor.chain()
  .setFontSize("18px")
  .setFontFamily("Arial")
  .setColor("#333")
  .run();

Unset Font Size Command

Remove font size styling from the current text selection.

/**
 * Unset the font size, removing fontSize attribute and cleaning up empty textStyle marks
 * @returns Command result indicating success/failure
 */
unsetFontSize(): Command;

Usage Example:

// Remove font size and clean up empty styling
editor.commands.unsetFontSize();

// Chain removal with other operations
editor.chain()
  .unsetFontSize()
  .setColor("#000000")
  .run();

HTML Processing

Font Size Parsing

The FontSize extension includes straightforward HTML parsing:

Direct Style Reading: Reads font-size value directly from element.style.fontSize
Unit Preservation: Maintains original CSS units (px, em, rem, %, pt, etc.)
Keyword Support: Supports CSS font-size keywords (small, medium, large, etc.)
Computed Value: Uses computed font-size value from the DOM

Rendering Output

CSS Format: Renders as style="font-size: {value}" attribute
Clean Output: Only adds font-size attribute when a value is present
Format Preservation: Maintains exact font-size string including units

Type System Integration

Module Augmentation

The FontSize extension augments TipTap's type system:

// Extends core Commands interface
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    fontSize: {
      setFontSize: (fontSize: string) => ReturnType;
      unsetFontSize: () => ReturnType;
    }
  }
}

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

Configuration Examples

Basic Configuration

import { FontSize } from "@tiptap/extension-text-style/font-size";

const fontSizeExtension = FontSize.configure({
  types: ['textStyle']
});

Extended Node Type Support

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

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

Font Size Unit Examples

Absolute Units

// Pixels (most common for web)
editor.commands.setFontSize("12px");  // Small text
editor.commands.setFontSize("16px");  // Body text
editor.commands.setFontSize("24px");  // Large text
editor.commands.setFontSize("32px");  // Heading size

// Points (print-oriented)
editor.commands.setFontSize("10pt");  // Small print
editor.commands.setFontSize("12pt");  // Body text
editor.commands.setFontSize("18pt");  // Large text

Relative Units

// Em units (relative to parent element)
editor.commands.setFontSize("0.8em");   // 80% of parent
editor.commands.setFontSize("1.2em");   // 120% of parent
editor.commands.setFontSize("1.5em");   // 150% of parent

// Rem units (relative to root element)
editor.commands.setFontSize("0.875rem"); // 14px if root is 16px
editor.commands.setFontSize("1.125rem"); // 18px if root is 16px
editor.commands.setFontSize("1.5rem");   // 24px if root is 16px

// Percentages
editor.commands.setFontSize("90%");     // 90% of parent
editor.commands.setFontSize("110%");    // 110% of parent
editor.commands.setFontSize("150%");    // 150% of parent

CSS Keywords

// Absolute size keywords
editor.commands.setFontSize("xx-small");
editor.commands.setFontSize("x-small");
editor.commands.setFontSize("small");
editor.commands.setFontSize("medium");   // Default size
editor.commands.setFontSize("large");
editor.commands.setFontSize("x-large");
editor.commands.setFontSize("xx-large");

// Relative size keywords
editor.commands.setFontSize("smaller");  // Smaller than parent
editor.commands.setFontSize("larger");   // Larger than parent

Responsive Font Sizing

For responsive designs, consider using relative units:

// Use rem for consistent scaling
editor.commands.setFontSize("1rem");     // Base size
editor.commands.setFontSize("1.25rem");  // Slightly larger
editor.commands.setFontSize("1.5rem");   // Medium heading

// Use em for contextual scaling
editor.commands.setFontSize("1.1em");    // Slightly larger than context
editor.commands.setFontSize("0.9em");    // Slightly smaller than context

Install with Tessl CLI

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

docs