排版扩展
该扩展旨在用正确的排版字符帮助处理常见的文本模式。所有规则的底层实现都是输入规则。
安装
npm install @tiptap/extension-typography规则
| 名称 | 描述 |
|---|---|
| emDash | 将双破折号 -- 转换为长破折号 —。 |
| ellipsis | 将三个点 ... 转换为省略号字符 …。 |
| openDoubleQuote | 开始双引号 “。 |
| closeDoubleQuote | 结束双引号 ”。 |
| openSingleQuote | 开始单引号 ‘。 |
| closeSingleQuote | 结束单引号 ’。 |
| leftArrow | 将 <- 转换为箭头 ←。 |
| rightArrow | 将 -> 转换为箭头 →。 |
| copyright | 将 (c) 转换为版权符号 ©。 |
| registeredTrademark | 将 (r) 转换为注册商标符号 ®。 |
| trademark | 将 (tm) 转换为商标符号 ™。 |
| servicemark | 将 (sm) 转换为服务商标符号 ℠。 |
| oneHalf | 将 1/2 转换为分数 ½。 |
| oneQuarter | 将 1/4 转换为分数 ¼。 |
| threeQuarters | 将 3/4 转换为分数 ¾。 |
| plusMinus | 将 +/- 转换为正负符号 ±。 |
| notEqual | 将 != 转换为不等号 ≠。 |
| laquo | 将 << 转换为左双角引号 «。 |
| raquo | 将 >> 转换为右双角引号 »。 |
| multiplication | 将 2*3 或 2x3 转换为乘法号 ×。 |
| superscriptTwo | 将 ^2 转换为上标二 ²。 |
| superscriptThree | 将 ^3 转换为上标三 ³。 |
快捷键
| 命令 | Windows/Linux | macOS |
|---|---|---|
| undoInputRule() | Backspace | Delete |
源码
packages/extension-typography/
禁用规则
您可以配置内置的规则，甚至禁用部分规则，如下所示。
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'
const editor = new Editor({
extensions: [
// 禁用部分内置规则
Typography.configure({
oneHalf: false,
oneQuarter: false,
threeQuarters: false,
}),
],
})重写规则
您可以通过传递字符串覆盖规则的输出内容。
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'
const editor = new Editor({
extensions: [
// 重写部分规则输出
Typography.configure({
oneHalf: '1 / 2', // 这将插入“1 / 2”而不是默认的“½”
}),
],
})RTL 智能引号
openDoubleQuote、closeDoubleQuote、openSingleQuote 和 closeSingleQuote 规则通过 doubleQuotes 和 singleQuotes 选项支持感知 RTL 的引号字符。
显式的 rtl 配置优先于 textDirection。如果未提供显式配置，则扩展会回退到 editor.options.textDirection === 'rtl'。否则，将使用默认的 LTR 引号。
注意： 为了避免混合方向文本中的歧义，刻意不使用基于内容的自动方向检测。
import { Editor } from '@tiptap/core'
import Typography from '@tiptap/extension-typography'
const editor = new Editor({
extensions: [
Typography.configure({
doubleQuotes: { rtl: { open: '”', close: '“' } },
singleQuotes: { rtl: { open: '’', close: '‘' } },
}),
],
})