feat: Allow individual Typography rules to be disabled (#2449)
This commit is contained in:
@@ -49,3 +49,23 @@ npm install @tiptap/extension-typography
|
|||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
https://embed.tiptap.dev/preview/Extensions/Typography
|
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,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|||||||
@@ -1,5 +1,29 @@
|
|||||||
import { Extension, textInputRule } from '@tiptap/core'
|
import { Extension, textInputRule } from '@tiptap/core'
|
||||||
|
|
||||||
|
export interface TypographyOptions {
|
||||||
|
emDash: false,
|
||||||
|
ellipsis: false,
|
||||||
|
openDoubleQuote: false,
|
||||||
|
closeDoubleQuote: false,
|
||||||
|
openSingleQuote: false,
|
||||||
|
closeSingleQuote: false,
|
||||||
|
leftArrow: false,
|
||||||
|
rightArrow: false,
|
||||||
|
copyright: false,
|
||||||
|
trademark: false,
|
||||||
|
registeredTrademark: false,
|
||||||
|
oneHalf: false,
|
||||||
|
plusMinus: false,
|
||||||
|
notEqual: false,
|
||||||
|
laquo: false,
|
||||||
|
raquo: false,
|
||||||
|
multiplication: false,
|
||||||
|
superscriptTwo: false,
|
||||||
|
superscriptThree: false,
|
||||||
|
oneQuarter: false,
|
||||||
|
threeQuarters: false,
|
||||||
|
}
|
||||||
|
|
||||||
export const emDash = textInputRule({
|
export const emDash = textInputRule({
|
||||||
find: /--$/,
|
find: /--$/,
|
||||||
replace: '—',
|
replace: '—',
|
||||||
@@ -105,32 +129,97 @@ export const threeQuarters = textInputRule({
|
|||||||
replace: '¾',
|
replace: '¾',
|
||||||
})
|
})
|
||||||
|
|
||||||
export const Typography = Extension.create({
|
export const Typography = Extension.create<TypographyOptions>({
|
||||||
name: 'typography',
|
name: 'typography',
|
||||||
|
|
||||||
addInputRules() {
|
addInputRules() {
|
||||||
return [
|
const rules = []
|
||||||
emDash,
|
|
||||||
ellipsis,
|
if (this.options.emDash !== false) {
|
||||||
openDoubleQuote,
|
rules.push(emDash)
|
||||||
closeDoubleQuote,
|
}
|
||||||
openSingleQuote,
|
|
||||||
closeSingleQuote,
|
if (this.options.ellipsis !== false) {
|
||||||
leftArrow,
|
rules.push(ellipsis)
|
||||||
rightArrow,
|
}
|
||||||
copyright,
|
|
||||||
trademark,
|
if (this.options.openDoubleQuote !== false) {
|
||||||
registeredTrademark,
|
rules.push(openDoubleQuote)
|
||||||
oneHalf,
|
}
|
||||||
plusMinus,
|
|
||||||
notEqual,
|
if (this.options.closeDoubleQuote !== false) {
|
||||||
laquo,
|
rules.push(closeDoubleQuote)
|
||||||
raquo,
|
}
|
||||||
multiplication,
|
|
||||||
superscriptTwo,
|
if (this.options.openSingleQuote !== false) {
|
||||||
superscriptThree,
|
rules.push(openSingleQuote)
|
||||||
oneQuarter,
|
}
|
||||||
threeQuarters,
|
|
||||||
]
|
if (this.options.closeSingleQuote !== false) {
|
||||||
|
rules.push(closeSingleQuote)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.leftArrow !== false) {
|
||||||
|
rules.push(leftArrow)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.rightArrow !== false) {
|
||||||
|
rules.push(rightArrow)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.copyright !== false) {
|
||||||
|
rules.push(copyright)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.trademark !== false) {
|
||||||
|
rules.push(trademark)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.registeredTrademark !== false) {
|
||||||
|
rules.push(registeredTrademark)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.oneHalf !== false) {
|
||||||
|
rules.push(oneHalf)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.plusMinus !== false) {
|
||||||
|
rules.push(plusMinus)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.notEqual !== false) {
|
||||||
|
rules.push(notEqual)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.laquo !== false) {
|
||||||
|
rules.push(laquo)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.raquo !== false) {
|
||||||
|
rules.push(raquo)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.multiplication !== false) {
|
||||||
|
rules.push(multiplication)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.superscriptTwo !== false) {
|
||||||
|
rules.push(superscriptTwo)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.superscriptThree !== false) {
|
||||||
|
rules.push(superscriptThree)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.oneQuarter !== false) {
|
||||||
|
rules.push(oneQuarter)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.options.threeQuarters !== false) {
|
||||||
|
rules.push(threeQuarters)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return rules
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user