diff --git a/docs/src/demos/Extensions/Typography/index.spec.js b/docs/src/demos/Extensions/Typography/index.spec.js index 0ac01fcf..af4fc82d 100644 --- a/docs/src/demos/Extensions/Typography/index.spec.js +++ b/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') + }) }) diff --git a/docs/src/docPages/api/extensions/typography.md b/docs/src/docPages/api/extensions/typography.md index 9092ed65..63d0eec9 100644 --- a/docs/src/docPages/api/extensions/typography.md +++ b/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 | -| ------------------- | ---------------------------------------------------------------- | -| emDash | Converts double dashes `--` to an emdash `—`. | -| ellipsis | Converts three dots `...` to an ellipsis character `…` | -| openDoubleQuote | `“`Smart” opening double quotes. | -| closeDoubleQuote | “Smart`”` closing double quotes. | -| openSingleQuote | `‘`Smart’ opening single quotes. | -| closeSingleQuote | ‘Smart`’` closing single quotes. | -| leftArrow | Converts <‐ to an arrow `←` . | -| rightArrow | Converts ‐> to an arrow `→`. | -| copyright | Converts `(c)` to a copyright sign `©`. | -| registeredTrademark | Converts `(r)` to registered trademark sign `®`. | -| oneHalf | Converts `1/2` to one half `½`. | -| plusMinus | Converts `+/-` to plus/minus sign `±`. | -| 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 `»`. | +| Name | Description | +| ----------------------- | ---------------------------------------------------------------- | +| emDash | Converts double dashes `--` to an emdash `—`. | +| ellipsis | Converts three dots `...` to an ellipsis character `…` | +| openDoubleQuote | `“`Smart” opening double quotes. | +| closeDoubleQuote | “Smart`”` closing double quotes. | +| openSingleQuote | `‘`Smart’ opening single quotes. | +| closeSingleQuote | ‘Smart`’` closing single quotes. | +| leftArrow | Converts <‐ to an arrow `←` . | +| rightArrow | Converts ‐> to an arrow `→`. | +| copyright | Converts `(c)` to a copyright sign `©`. | +| registeredTrademark | Converts `(r)` to registered trademark sign `®`. | +| oneHalf | Converts `1/2` to one half `½`. | +| plusMinus | Converts `+/-` to plus/minus sign `±`. | +| 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 diff --git a/docs/src/docPages/api/marks/highlight.md b/docs/src/docPages/api/marks/highlight.md index c0efc3f5..5da69388 100644 --- a/docs/src/docPages/api/marks/highlight.md +++ b/docs/src/docPages/api/marks/highlight.md @@ -5,10 +5,10 @@ Type `==two equal signs==` and it will magically transform to highlighted< ## Installation ```bash -# With npm +# with npm npm install @tiptap/extension-highlight -# Or: With Yarn +# with Yarn yarn add @tiptap/extension-highlight ``` diff --git a/packages/extension-typography/index.ts b/packages/extension-typography/index.ts index db1a5c10..f62b1cc4 100644 --- a/packages/extension-typography/index.ts +++ b/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, ] }, })