Tiptap Editor 3.0 Beta is out. Start here

Typography extension

VersionDownloads

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

Install

npm install @tiptap/extension-typography

Rules

NameDescription
emDashConverts double dashes -- to an emdash .
ellipsisConverts three dots ... to an ellipsis character
openDoubleQuoteSmart” opening double quotes.
closeDoubleQuote“Smart closing double quotes.
openSingleQuoteSmart’ opening single quotes.
closeSingleQuote‘Smart closing single quotes.
leftArrowConverts <- to an arrow .
rightArrowConverts -> to an arrow .
copyrightConverts (c) to a copyright sign ©.
registeredTrademarkConverts (r) to registered trademark sign ®.
trademarkConverts (tm) to registered trademark sign .
servicemarkConverts (sm) to registered trademark sign .
oneHalfConverts 1/2 to one half ½.
oneQuarterConverts 1/4 to one quarter ¼.
threeQuartersConverts 3/4 to three quarters ¾.
plusMinusConverts +/- to plus/minus sign ±.
notEqualConverts != to a not equal sign .
laquoConverts << to left-pointing double angle quotation mark «.
raquoConverts >> to right-pointing double angle quotation mark ».
multiplicationConverts 2*3 or 2x3 to a multiplcation sign 2×3.
superscriptTwoConverts ^2 a superscript two ².
superscriptThreeConverts ^3 a superscript three ³.

Keyboard shortcuts

CommandWindows/LinuxmacOS
undoInputRule()BackspaceDelete

Source code

packages/extension-typography/

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 "½"
    }),
  ],
})