CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-font-family

Font family extension for Tiptap rich text editor that allows applying custom font families to selected text

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Font Family Extension

Font Family Extension is a Tiptap editor extension that enables users to apply custom font families to selected text within Tiptap editor instances. It extends Tiptap's core functionality by integrating with the text-style extension to provide seamless font family styling capabilities.

Package Information

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

Core Imports

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

For CommonJS:

const { FontFamily } = require("@tiptap/extension-font-family");

Import types:

import { FontFamilyOptions } from "@tiptap/extension-font-family";

Basic Usage

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

// Create editor with FontFamily extension
const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [
    StarterKit,
    TextStyle, // Required dependency
    FontFamily.configure({
      types: ['textStyle'], // Default configuration
    }),
  ],
});

// Set font family for selected text
editor.commands.setFontFamily('Arial, sans-serif');
editor.commands.setFontFamily('Georgia, serif');

// Remove font family from selected text
editor.commands.unsetFontFamily();

Capabilities

FontFamily Extension

Main extension class that provides font family functionality to Tiptap editor.

/**
 * FontFamily extension for Tiptap editor
 * Provides commands to set and unset font family on selected text
 */
declare const FontFamily: Extension<FontFamilyOptions>;

export default FontFamily;
export { FontFamily };

Configuration Options

Extension configuration interface defining which node types support font family styling.

export interface FontFamilyOptions {
  /**
   * A list of node names where the font family can be applied.
   * @default ['textStyle']
   * @example ['heading', 'paragraph']
   */
  types: string[]
}

Editor Commands

The extension adds font family commands to the Tiptap editor instance.

Set Font Family Command

Sets font family on selected text or at current cursor position.

/**
 * Set the font family for selected text
 * @param fontFamily The font family value (CSS font-family format)
 * @returns Command execution result
 * @example editor.commands.setFontFamily('Arial, sans-serif')
 * @example editor.commands.setFontFamily('Georgia, "Times New Roman", serif')
 */
editor.commands.setFontFamily(fontFamily: string): boolean;

Usage Examples:

// Set single font family
editor.commands.setFontFamily('Arial');

// Set font family with fallbacks
editor.commands.setFontFamily('Helvetica, Arial, sans-serif');

// Set font family with quoted names for fonts with spaces
editor.commands.setFontFamily('"Times New Roman", Times, serif');

// Set web font
editor.commands.setFontFamily('"Open Sans", sans-serif');

Unset Font Family Command

Removes font family styling from selected text.

/**
 * Remove font family styling from selected text
 * @returns Command execution result
 * @example editor.commands.unsetFontFamily()
 */
editor.commands.unsetFontFamily(): boolean;

Usage Examples:

// Remove font family from current selection
editor.commands.unsetFontFamily();

// Chain with other commands
editor.commands.selectAll().unsetFontFamily();

Text Style Integration

This extension requires and integrates with @tiptap/extension-text-style to function properly.

Global Attributes

The extension adds font family support to configured node types:

interface TextStyleAttributes {
  fontFamily?: string | null;
}

HTML Parsing and Rendering

The extension automatically handles HTML conversion:

  • HTML → Editor: Parses style="font-family: ..." attributes from HTML elements
  • Editor → HTML: Renders font family as inline CSS style attributes

HTML Example:

<!-- Input HTML -->
<p>This text has <span style="font-family: Arial, sans-serif">custom font family</span>.</p>

<!-- Editor automatically parses the font-family style -->
<!-- Output HTML maintains the same format -->

Type Definitions

Complete TypeScript definitions for all exported types:

/**
 * Configuration options for FontFamily extension
 */
export interface FontFamilyOptions {
  types: string[];
}

/**
 * Extension class type
 */
export declare const FontFamily: Extension<FontFamilyOptions>;

/**
 * Module augmentation for editor commands
 */
declare module '@tiptap/core' {
  interface Commands<ReturnType> {
    fontFamily: {
      setFontFamily: (fontFamily: string) => ReturnType;
      unsetFontFamily: () => ReturnType;
    }
  }
}

/**
 * Module augmentation for text style attributes
 */
declare module '@tiptap/extension-text-style' {
  interface TextStyleAttributes {
    fontFamily?: string | null;
  }
}

Installation Requirements

This extension has peer dependencies that must be installed:

npm install @tiptap/extension-font-family @tiptap/extension-text-style

The @tiptap/extension-text-style package must be included in your editor extensions array for FontFamily to work properly.

docs

index.md

tile.json