improve typography extension

docs/src/demos/Extensions/Typography/index.spec.js

@@ -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')
+  })
 })

docs/src/docPages/api/extensions/typography.md

@@ -4,33 +4,37 @@ 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                                                      |
+| Name                    | Description                                                      |
-| ------------------- | ---------------------------------------------------------------- |
+| ----------------------- | ---------------------------------------------------------------- |
-| emDash              | Converts double dashes `--` to an emdash `—`.                    |
+| emDash                  | Converts double dashes `--` to an emdash `—`.                    |
-| ellipsis            | Converts three dots `...` to an ellipsis character `…`           |
+| ellipsis                | Converts three dots `...` to an ellipsis character `…`           |
-| openDoubleQuote     | `“`Smart” opening double quotes.                                 |
+| openDoubleQuote         | `“`Smart” opening double quotes.                                 |
-| closeDoubleQuote    | “Smart`”` closing double quotes.                                 |
+| closeDoubleQuote        | “Smart`”` closing double quotes.                                 |
-| openSingleQuote     | `‘`Smart’ opening single quotes.                                 |
+| openSingleQuote         | `‘`Smart’ opening single quotes.                                 |
-| closeSingleQuote    | ‘Smart`’` closing single quotes.                                 |
+| closeSingleQuote        | ‘Smart`’` closing single quotes.                                 |
-| leftArrow           | Converts <code><&dash;</code> to an arrow `←` .                  |
+| leftArrow               | Converts <code><&dash;</code> to an arrow `←` .                  |
-| rightArrow          | Converts <code>&dash;></code> to an arrow `→`.                   |
+| rightArrow              | Converts <code>&dash;></code> to an arrow `→`.                   |
-| copyright           | Converts `(c)` to a copyright sign `©`.                          |
+| copyright               | Converts `(c)` to a copyright sign `©`.                          |
-| registeredTrademark | Converts `(r)` to registered trademark sign `®`.                 |
+| registeredTrademark     | Converts `(r)` to registered trademark sign `®`.                 |
-| oneHalf             | Converts `1/2` to one half `½`.                                  |
+| oneHalf                 | Converts `1/2` to one half `½`.                                  |
-| plusMinus           | Converts `+/-` to plus/minus sign `±`.                           |
+| plusMinus               | Converts `+/-` to plus/minus sign `±`.                           |
-| notEqual            | Converts `!=` to a not equal sign `≠`.                           |
+| notEqual                | Converts `!=` to a not equal sign `≠`.                           |
-| laquo               | Converts `<<` to left-pointing double angle quotation mark `«`.  |
+| laquo                   | Converts `<<` to left-pointing double angle quotation mark `«`.  |
-| raquo               | Converts `>>` to right-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" />

docs/src/docPages/api/marks/highlight.md

@@ -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
 ```
 

packages/extension-typography/index.ts

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