Typography

Version Downloads

This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.

Installation

npm install @tiptap/extension-typography

Rules

Name Description
emDash Converts double dashes -- to an emdash —.
ellipsis Converts three dots ... to an ellipsis character …
openDoubleQuote “Smart” opening double quotes.
closeDoubleQuote “Smart” closing double quotes.
openSingleQuote ‘Smart’ opening single quotes.
closeSingleQuote ‘Smart’ closing single quotes.
leftArrow Converts <‐ to an arrow ← .
rightArrow Converts ‐> to an arrow →.
copyright Converts (c) to a copyright sign ©.
registeredTrademark Converts (r) to registered trademark sign ®.
trademark Converts (tm) to registered trademark sign ™.
servicemark Converts (sm) to registered trademark sign ℠.
oneHalf Converts 1/2 to one half ½.
oneQuarter Converts 1/4 to one quarter ¼.
threeQuarters Converts 3/4 to three quarters ¾.
plusMinus Converts +/- to plus/minus sign ±.
notEqual Converts != to a not equal sign ≠.
laquo Converts << to left-pointing double angle quotation mark «.
raquo Converts >> to right-pointing double angle quotation mark ».
multiplication Converts 2 * 3 or 2x3 to a multiplcation sign 2×3.
superscriptTwo Converts ^2 a superscript two ².
superscriptThree Converts ^3 a superscript three ³.

Keyboard shortcuts

Command Windows/Linux macOS
undoInputRule() Backspace Backspace

Source code

packages/extension-typography/

Usage

Disabling rules

You can configure the included rules, or even disable a few of them, like shown below.

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

const editor = new Editor({
  extensions: [
    // Disable some included rules
    Typography.configure({
      oneHalf: false,
      oneQuarter: false,
      threeQuarters: false,
    }),
  ],
})

Overriding rules

You can override the output of a rule by passing a string to the option you want to override.

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

const editor = new Editor({
  extensions: [
    // Disable some included rules
    Typography.configure({
      oneHalf: "1 / 2", // this will insert "1 / 2" instead of the default "½"
    }),
  ],
})