feat: Allow individual Typography rules to be disabled (#2449)

This commit is contained in:
Ricardo Amaral 2022-02-04 09:14:00 +00:00 committed by GitHub
parent 88ef8eabb0
commit 7ce6687184
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 133 additions and 24 deletions

View File

@ -49,3 +49,23 @@ npm install @tiptap/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,
}),
],
})
```

View File

@ -1,5 +1,29 @@
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({
find: /--$/,
replace: '—',
@ -105,32 +129,97 @@ export const threeQuarters = textInputRule({
replace: '¾',
})
export const Typography = Extension.create({
export const Typography = Extension.create<TypographyOptions>({
name: 'typography',
addInputRules() {
return [
emDash,
ellipsis,
openDoubleQuote,
closeDoubleQuote,
openSingleQuote,
closeSingleQuote,
leftArrow,
rightArrow,
copyright,
trademark,
registeredTrademark,
oneHalf,
plusMinus,
notEqual,
laquo,
raquo,
multiplication,
superscriptTwo,
superscriptThree,
oneQuarter,
threeQuarters,
]
const rules = []
if (this.options.emDash !== false) {
rules.push(emDash)
}
if (this.options.ellipsis !== false) {
rules.push(ellipsis)
}
if (this.options.openDoubleQuote !== false) {
rules.push(openDoubleQuote)
}
if (this.options.closeDoubleQuote !== false) {
rules.push(closeDoubleQuote)
}
if (this.options.openSingleQuote !== false) {
rules.push(openSingleQuote)
}
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
},
})