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
2 changed files with 133 additions and 24 deletions

View File

@@ -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,
}),
],
})
```

View File

@@ -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
}, },
}) })