improve typography extension

This commit is contained in:
Hans Pagel
2020-11-06 15:31:29 +01:00
parent 8c1d7cd160
commit be44c6c6c7
4 changed files with 52 additions and 22 deletions

View File

@@ -98,4 +98,28 @@ context('/api/extensions/typography', () => {
.type('>> raquorow')
.should('contain', '» raquo')
})
it('should make a multiplication sign from an asterisk', () => {
cy.get('.ProseMirror')
.type('1*1 multiplication')
.should('contain', '1×1 multiplication')
})
it('should make a multiplication sign from an x', () => {
cy.get('.ProseMirror')
.type('1x1 multiplication')
.should('contain', '1×1 multiplication')
})
it('should make a multiplication sign from an asterisk with spaces', () => {
cy.get('.ProseMirror')
.type('1 * 1 multiplication')
.should('contain', '1 × 1 multiplication')
})
it('should make a multiplication sign from an x with spaces', () => {
cy.get('.ProseMirror')
.type('1 x 1 multiplication')
.should('contain', '1 × 1 multiplication')
})
})

View File

@@ -4,15 +4,15 @@ This extension tries to help with common text patterns with the correct typograp
## Installation
```bash
# with npm
npm install @tiptap/typography
npm install @tiptap/extension-typography
# with Yarn
yarn add @tiptap/typography
yarn add @tiptap/extension-typography
```
## Rules
| Name | Description |
| ------------------- | ---------------------------------------------------------------- |
| ----------------------- | ---------------------------------------------------------------- |
| emDash | Converts double dashes `--` to an emdash `—`. |
| ellipsis | Converts three dots `...` to an ellipsis character `…` |
| openDoubleQuote | `“`Smart” opening double quotes. |
@@ -28,9 +28,13 @@ yarn add @tiptap/typography
| notEqual | Converts `!=` to a not equal sign `≠`. |
| laquo | Converts `<<` to left-pointing double angle quotation mark `«`. |
| raquo | Converts `>>` to right-pointing double angle quotation mark `»`. |
| multiplication | Converts `2 * 3` or `2x3` to a multiplcation sign `2×3™`. |
## Keyboard shortcuts
* `Backspace` reverts the applied input rule
## Source code
[packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/)
[packages/extension-typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/)
## Usage
<demo name="Extensions/Typography" highlight="12,31" />

View File

@@ -5,10 +5,10 @@ Type `==two equal signs==` and it will magically transform to <mark>highlighted<
## Installation
```bash
# With npm
# with npm
npm install @tiptap/extension-highlight
# Or: With Yarn
# with Yarn
yarn add @tiptap/extension-highlight
```

View File

@@ -18,6 +18,7 @@ export const plusMinus = new InputRule(/\+\/-$/, '±')
export const notEqual = new InputRule(/!=$/, '≠')
export const laquo = new InputRule(/<<$/, '«')
export const raquo = new InputRule(/>>$/, '»')
export const multiplication = new InputRule(/\d+\s?([*x])\s?\d+$/, '×')
const Typography = createExtension({
addInputRules() {
@@ -37,6 +38,7 @@ const Typography = createExtension({
notEqual,
laquo,
raquo,
multiplication,
]
},
})