Typography extension

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

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`	`Delete`

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