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