Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow individual Typography rules to be disabled #2449

Merged
merged 1 commit into from
Feb 4, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions docs/api/extensions/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
],
})
```
137 changes: 113 additions & 24 deletions packages/extension-typography/src/typography.ts
Original file line number Diff line number Diff line change
@@ -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,
}

Comment on lines +3 to +26
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These should be boolean, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I followed the same approach used in StarterKit, where all rules are included by default and you can only disable the ones you don't want.

I can change this to boolean if you think that makes more sense. Let me know, and I'll make the change.

export const emDash = textInputRule({
find: /--$/,
replace: '—',
Expand Down Expand Up @@ -105,32 +129,97 @@ export const threeQuarters = textInputRule({
replace: '¾',
})

export const Typography = Extension.create({
export const Typography = Extension.create<TypographyOptions>({
name: 'typography',

addInputRules() {
Comment on lines 133 to 135
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You should also define addOptions() with its default values here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we keep the current approach where the options can only be set to false, I believe we don't need addOptions. Again, followed the exact same approach as StarterKit to keep things simple. But I can change to boolean and add addOptions with default set to true.

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