From 7ce6687184576f4d3ca0953d27e729f00c758e07 Mon Sep 17 00:00:00 2001 From: Ricardo Amaral Date: Fri, 4 Feb 2022 09:14:00 +0000 Subject: [PATCH] feat: Allow individual Typography rules to be disabled (#2449) --- docs/api/extensions/typography.md | 20 +++ .../extension-typography/src/typography.ts | 137 +++++++++++++++--- 2 files changed, 133 insertions(+), 24 deletions(-) diff --git a/docs/api/extensions/typography.md b/docs/api/extensions/typography.md index 91a1962bc0..fbc8044338 100644 --- a/docs/api/extensions/typography.md +++ b/docs/api/extensions/typography.md @@ -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, + }), + ], +}) +``` diff --git a/packages/extension-typography/src/typography.ts b/packages/extension-typography/src/typography.ts index bae235cfa7..d021759ce9 100644 --- a/packages/extension-typography/src/typography.ts +++ b/packages/extension-typography/src/typography.ts @@ -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({ 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 }, })