mirror of
https://github.com/ueberdosis/tiptap.git
synced 2024-12-19 22:07:54 +08:00
91 lines
4.5 KiB
Markdown
91 lines
4.5 KiB
Markdown
---
|
||
description: The typography smart ass for your editor, replaces everything that’s wrong.
|
||
icon: quill-pen-line
|
||
---
|
||
|
||
# Typography
|
||
[](https://www.npmjs.com/package/@tiptap/extension-typography)
|
||
[](https://npmcharts.com/compare/@tiptap/extension-typography?minimal=true)
|
||
|
||
This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.
|
||
|
||
## Installation
|
||
```bash
|
||
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 <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 `™`. |
|
||
| 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 <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 `³`. |
|
||
|
||
## Keyboard shortcuts
|
||
| Command | Windows/Linux | macOS |
|
||
| --------------- | ------------- | ----------- |
|
||
| undoInputRule() | `Backspace` | `Backspace` |
|
||
|
||
## Source code
|
||
[packages/extension-typography/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-typography/)
|
||
|
||
## Usage
|
||
https://embed.tiptap.dev/preview/Extensions/Typography
|
||
|
||
### 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,
|
||
}),
|
||
],
|
||
})
|
||
```
|
||
|
||
### Overriding rules
|
||
|
||
You can override the output of a rule by passing a string to the option you want to override.
|
||
|
||
```js
|
||
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 "½"
|
||
}),
|
||
],
|
||
})
|
||
```
|