or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-tiptap--extension-typography

Typography extension for Tiptap that automatically converts common text input patterns into proper typographic characters.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@tiptap/extension-typography@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--extension-typography@3.4.0

Tiptap Typography Extension

The Typography extension for Tiptap provides automatic typography replacements for common text input patterns. It converts conventional text sequences into proper typographic characters, including em dashes, ellipsis, smart quotes, arrows, mathematical symbols, and fractions.

Package Information

Package Name: @tiptap/extension-typography
Package Type: npm
Language: TypeScript
Installation: npm install @tiptap/extension-typography

Core Imports

import { Typography } from "@tiptap/extension-typography";

// Or import specific input rule functions
import { 
  Typography, 
  emDash, 
  ellipsis, 
  openDoubleQuote,
  type TypographyOptions 
} from "@tiptap/extension-typography";

For CommonJS:

const { Typography } = require("@tiptap/extension-typography");

Basic Usage

import { Editor } from "@tiptap/core";
import { Typography } from "@tiptap/extension-typography";

// Basic usage with default options
const editor = new Editor({
  extensions: [
    Typography,
  ],
  content: '<p>Hello World!</p>',
});

// Custom configuration
const editor = new Editor({
  extensions: [
    Typography.configure({
      emDash: '—',        // Enable em dash (-- → —)
      ellipsis: '…',      // Enable ellipsis (... → …)
      copyright: false,   // Disable copyright symbol
      trademark: '™',     // Enable trademark symbol
    }),
  ],
  content: '<p>Hello World!</p>',
});

Architecture

The Typography extension is built around several key components:

Text Input Rules: Individual functions that create text replacement rules for specific patterns
Options Configuration: Comprehensive configuration system allowing enable/disable and character customization
Extension Integration: Seamless integration with Tiptap's extension system and ProseMirror's input rule system
Pattern Matching: Regex-based pattern detection for automatic text replacement

Capabilities

Typography Extension

Main extension class that provides comprehensive typography replacements for text input patterns.

/**
 * Typography extension for Tiptap that automatically converts common text input patterns 
 * into proper typographic characters
 */
declare const Typography: Extension<TypographyOptions>;

Typography Options Configuration

Configuration interface for controlling which typography replacements are enabled and their replacement characters.

interface TypographyOptions {
  /** The em dash character (-- → —). Set to false to disable. @default '—' */
  emDash: false | string;
  /** The ellipsis character (... → …). Set to false to disable. @default '…' */
  ellipsis: false | string;
  /** The open double quote character. Set to false to disable. @default '"' */
  openDoubleQuote: false | string;
  /** The close double quote character. Set to false to disable. @default '"' */
  closeDoubleQuote: false | string;
  /** The open single quote character. Set to false to disable. @default ''' */
  openSingleQuote: false | string;
  /** The close single quote character. Set to false to disable. @default ''' */
  closeSingleQuote: false | string;
  /** The left arrow character (<- → ←). Set to false to disable. @default '←' */
  leftArrow: false | string;
  /** The right arrow character (-> → →). Set to false to disable. @default '→' */
  rightArrow: false | string;
  /** The copyright character ((c) → ©). Set to false to disable. @default '©' */
  copyright: false | string;
  /** The trademark character ((tm) → ™). Set to false to disable. @default '™' */
  trademark: false | string;
  /** The servicemark character ((sm) → ℠). Set to false to disable. @default '℠' */
  servicemark: false | string;
  /** The registered trademark character ((r) → ®). Set to false to disable. @default '®' */
  registeredTrademark: false | string;
  /** The one half character (1/2 → ½). Set to false to disable. @default '½' */
  oneHalf: false | string;
  /** The plus minus character (+/- → ±). Set to false to disable. @default '±' */
  plusMinus: false | string;
  /** The not equal character (!= → ≠). Set to false to disable. @default '≠' */
  notEqual: false | string;
  /** The laquo character (<< → «). Set to false to disable. @default '«' */
  laquo: false | string;
  /** The raquo character (>> → »). Set to false to disable. @default '»' */
  raquo: false | string;
  /** The multiplication character (x or * → ×). Set to false to disable. @default '×' */
  multiplication: false | string;
  /** The superscript two character (^2 → ²). Set to false to disable. @default '²' */
  superscriptTwo: false | string;
  /** The superscript three character (^3 → ³). Set to false to disable. @default '³' */
  superscriptThree: false | string;
  /** The one quarter character (1/4 → ¼). Set to false to disable. @default '¼' */
  oneQuarter: false | string;
  /** The three quarters character (3/4 → ¾). Set to false to disable. @default '¾' */
  threeQuarters: false | string;
}

Individual Text Input Rule Functions

Each typography replacement has a corresponding function that creates a text input rule for that specific pattern.

/** Creates text input rule for em dash replacement (-- → —) */
function emDash(override?: string): InputRule;

/** Creates text input rule for ellipsis replacement (... → …) */
function ellipsis(override?: string): InputRule;

/** Creates text input rule for opening double quote replacement */
function openDoubleQuote(override?: string): InputRule;

/** Creates text input rule for closing double quote replacement */
function closeDoubleQuote(override?: string): InputRule;

/** Creates text input rule for opening single quote replacement */
function openSingleQuote(override?: string): InputRule;

/** Creates text input rule for closing single quote replacement */
function closeSingleQuote(override?: string): InputRule;

/** Creates text input rule for left arrow replacement (<- → ←) */
function leftArrow(override?: string): InputRule;

/** Creates text input rule for right arrow replacement (-> → →) */
function rightArrow(override?: string): InputRule;

/** Creates text input rule for copyright symbol replacement ((c) → ©) */
function copyright(override?: string): InputRule;

/** Creates text input rule for trademark symbol replacement ((tm) → ™) */
function trademark(override?: string): InputRule;

/** Creates text input rule for service mark symbol replacement ((sm) → ℠) */
function servicemark(override?: string): InputRule;

/** Creates text input rule for registered trademark replacement ((r) → ®) */
function registeredTrademark(override?: string): InputRule;

/** Creates text input rule for one half fraction replacement (1/2 → ½) */
function oneHalf(override?: string): InputRule;

/** Creates text input rule for plus minus symbol replacement (+/- → ±) */
function plusMinus(override?: string): InputRule;

/** Creates text input rule for not equal symbol replacement (!= → ≠) */
function notEqual(override?: string): InputRule;

/** Creates text input rule for left guillemet replacement (<< → «) */
function laquo(override?: string): InputRule;

/** Creates text input rule for right guillemet replacement (>> → ») */
function raquo(override?: string): InputRule;

/** Creates text input rule for multiplication symbol replacement (x or * → ×) */
function multiplication(override?: string): InputRule;

/** Creates text input rule for superscript two replacement (^2 → ²) */
function superscriptTwo(override?: string): InputRule;

/** Creates text input rule for superscript three replacement (^3 → ³) */
function superscriptThree(override?: string): InputRule;

/** Creates text input rule for one quarter fraction replacement (1/4 → ¼) */
function oneQuarter(override?: string): InputRule;

/** Creates text input rule for three quarters fraction replacement (3/4 → ¾) */
function threeQuarters(override?: string): InputRule;

Usage Examples:

import { Editor } from "@tiptap/core";
import { Extension } from "@tiptap/core";
import { emDash, ellipsis, copyright } from "@tiptap/extension-typography";

// Creating a custom extension with specific rules
const CustomTypography = Extension.create({
  name: 'customTypography',
  
  addInputRules() {
    return [
      emDash('—'),        // Enable em dash with default character
      ellipsis('…'),      // Enable ellipsis with default character
      copyright('©'),     // Enable copyright with default character
    ];
  },
});

// Using in editor
const editor = new Editor({
  extensions: [CustomTypography],
  content: '<p>Type -- for em dash, ... for ellipsis, (c) for copyright</p>',
});

Text Pattern Examples:

When typing in the editor, these patterns are automatically replaced:

-- → — (em dash)
... → … (ellipsis)
"text" → "text" (smart quotes)
'text' → 'text' (smart single quotes)
<- → ← (left arrow)
-> → → (right arrow)
1/2 → ½ (one half fraction, requires trailing space)
1/4 → ¼ (one quarter fraction, requires trailing space)
3/4 → ¾ (three quarters fraction, requires trailing space)
^2 → ² (superscript two)
+/- → ± (plus minus)
!= → ≠ (not equal)
<< → « (left guillemet)
>> → » (right guillemet)
2*3 or 2x3 → 2×3 (multiplication symbol with digits)
(tm) → ™ (trademark)
(r) → ® (registered trademark)

Types

/**
 * Input rule class from @tiptap/core that handles text pattern matching and replacement
 */
declare class InputRule {
  find: InputRuleFinder;
  handler: (props: {
    state: EditorState;
    range: Range;
    match: ExtendedRegExpMatchArray;
    commands: SingleCommands;
    chain: () => ChainedCommands;
    can: () => CanCommands;
  }) => void | null;

  constructor(config: {
    find: InputRuleFinder;
    handler: (props: {
      state: EditorState;
      range: Range;
      match: ExtendedRegExpMatchArray;
      commands: SingleCommands;
      chain: () => ChainedCommands;
      can: () => CanCommands;
    }) => void | null;
  });
}

/**
 * Extension base class from @tiptap/core
 */
declare class Extension<Options = any, Storage = any> {
  static create<O = any, S = any>(config?: Partial<ExtensionConfig<O, S>>): Extension<O, S>;
  configure(options?: Partial<Options>): Extension<Options, Storage>;
}

/**
 * Input rule finder type - can be a RegExp or function
 */
type InputRuleFinder = RegExp | ((text: string) => InputRuleMatch | null);

type InputRuleMatch = {
  index: number;
  text: string;
  replaceWith?: string;
  match?: RegExpMatchArray;
  data?: Record<string, any>;
};

type ExtendedRegExpMatchArray = RegExpMatchArray & {
  data?: Record<string, any>;
};

type Range = {
  from: number;
  to: number;
};

type SingleCommands = any;
type ChainedCommands = any;
type CanCommands = any;
type EditorState = any;
type ExtensionConfig<O, S> = any;