2021-10-14 06:13:50 +08:00
|
|
|
|
---
|
|
|
|
|
|
description: The typography smart ass for your editor, replaces everything that’s wrong.
|
2021-10-16 04:48:57 +08:00
|
|
|
|
icon: quill-pen-line
|
2021-10-14 06:13:50 +08:00
|
|
|
|
---
|
|
|
|
|
|
|
2020-11-02 22:54:15 +08:00
|
|
|
|
# Typography
|
2021-01-25 17:35:52 +08:00
|
|
|
|
[](https://www.npmjs.com/package/@tiptap/extension-typography)
|
|
|
|
|
|
[](https://npmcharts.com/compare/@tiptap/extension-typography?minimal=true)
|
|
|
|
|
|
|
2020-11-06 05:50:07 +08:00
|
|
|
|
This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.
|
2020-11-02 22:54:15 +08:00
|
|
|
|
|
|
|
|
|
|
## Installation
|
|
|
|
|
|
```bash
|
2020-11-06 22:31:29 +08:00
|
|
|
|
npm install @tiptap/extension-typography
|
2020-11-02 22:54:15 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
2020-11-06 05:47:44 +08:00
|
|
|
|
## Rules
|
2021-08-31 00:02:41 +08:00
|
|
|
|
| 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 <code><‐</code> to an arrow `←` . |
|
|
|
|
|
|
| rightArrow | Converts <code>‐></code> to an arrow `→`. |
|
|
|
|
|
|
| copyright | Converts `(c)` to a copyright sign `©`. |
|
|
|
|
|
|
| registeredTrademark | Converts `(r)` to registered trademark sign `®`. |
|
|
|
|
|
|
| trademark | Converts `(tm)` to registered trademark sign `™`. |
|
2022-11-08 04:41:00 +08:00
|
|
|
|
| servicemark | Converts `(sm)` to registered trademark sign `℠`. |
|
2021-08-31 00:02:41 +08:00
|
|
|
|
| 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 <code style="font-variant-ligatures: none;">!=</code> 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 `³`. |
|
2020-11-06 22:31:29 +08:00
|
|
|
|
|
|
|
|
|
|
## Keyboard shortcuts
|
2021-10-02 05:13:49 +08:00
|
|
|
|
| Command | Windows/Linux | macOS |
|
|
|
|
|
|
| --------------- | ------------- | ----------- |
|
|
|
|
|
|
| undoInputRule() | `Backspace` | `Backspace` |
|
2020-11-06 05:47:44 +08:00
|
|
|
|
|
2020-11-02 22:54:15 +08:00
|
|
|
|
## Source code
|
2021-04-21 21:31:11 +08:00
|
|
|
|
[packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)
|
2020-11-02 22:54:15 +08:00
|
|
|
|
|
|
|
|
|
|
## Usage
|
2021-10-19 00:01:47 +08:00
|
|
|
|
https://embed.tiptap.dev/preview/Extensions/Typography
|
2022-02-04 17:14:00 +08:00
|
|
|
|
|
|
|
|
|
|
### Disabling rules
|
|
|
|
|
|
|
|
|
|
|
|
You can configure the included rules, or even disable a few of them, like shown below.
|
|
|
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
|
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,
|
|
|
|
|
|
}),
|
|
|
|
|
|
],
|
|
|
|
|
|
})
|
|
|
|
|
|
```
|
