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 Family Styling

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

The FontFamily extension provides font family styling capabilities, allowing users to apply custom fonts to text selections with standard CSS font-family support.

Capabilities

FontFamily Extension

Extension for applying font families to text with CSS font-family property support.

/**
 * Extension for setting font family on specified node types
 * Extends textStyle mark with fontFamily attribute
 */
const FontFamily: Extension<FontFamilyOptions>;

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

Usage Example:

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

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

Set Font Family Command

Apply a specific font family to the current text selection.

/**
 * Set the font family
 * @param fontFamily - CSS font-family value (font name, font stack, or generic family)
 * @returns Command result indicating success/failure
 */
setFontFamily(fontFamily: string): Command;

Usage Examples:

// Single font names
editor.commands.setFontFamily("Arial");
editor.commands.setFontFamily("Times New Roman");
editor.commands.setFontFamily("Helvetica");

// Font stacks (fallback fonts)
editor.commands.setFontFamily("Arial, sans-serif");
editor.commands.setFontFamily("'Times New Roman', Times, serif");
editor.commands.setFontFamily("Georgia, 'Times New Roman', serif");

// Generic families
editor.commands.setFontFamily("serif");
editor.commands.setFontFamily("sans-serif");
editor.commands.setFontFamily("monospace");

// Web fonts
editor.commands.setFontFamily("'Open Sans', sans-serif");
editor.commands.setFontFamily("'Roboto Mono', monospace");

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

Unset Font Family Command

Remove font family styling from the current text selection.

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

Usage Example:

// Remove font family and clean up empty styling
editor.commands.unsetFontFamily();

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

HTML Processing

Font Family Parsing

The FontFamily extension includes straightforward HTML parsing:

Direct Style Reading: Reads font-family value directly from element.style.fontFamily
CSS Format Support: Supports all standard CSS font-family formats
Quote Preservation: Maintains quotes around font names with spaces
Fallback Support: Handles font stacks with multiple fallback fonts

Rendering Output

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

Type System Integration

Module Augmentation

The FontFamily extension augments TipTap's type system:

// Extends core Commands interface
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    fontFamily: {
      setFontFamily: (fontFamily: string) => ReturnType;
      unsetFontFamily: () => ReturnType;
    }
  }
}

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

Configuration Examples

Basic Configuration

import { FontFamily } from "@tiptap/extension-text-style/font-family";

const fontFamilyExtension = FontFamily.configure({
  types: ['textStyle']
});

Extended Node Type Support

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

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

Font Family Examples

Common Font Combinations

// System fonts
editor.commands.setFontFamily("-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif");

// Professional fonts
editor.commands.setFontFamily("'Times New Roman', Times, serif");
editor.commands.setFontFamily("Arial, Helvetica, sans-serif");
editor.commands.setFontFamily("Georgia, serif");

// Monospace fonts for code
editor.commands.setFontFamily("'Courier New', Courier, monospace");
editor.commands.setFontFamily("'Fira Code', 'Consolas', monospace");

// Google Fonts (assuming loaded)
editor.commands.setFontFamily("'Open Sans', sans-serif");
editor.commands.setFontFamily("'Roboto', sans-serif");
editor.commands.setFontFamily("'Playfair Display', serif");

Integration with Font Loading

When using web fonts, ensure they are loaded before applying:

// Check if font is loaded (if using Font Loading API)
document.fonts.ready.then(() => {
  editor.commands.setFontFamily("'Custom Web Font', sans-serif");
});

Install with Tessl CLI

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

docs