add overrides to typography extension

demos/src/Extensions/Typography/React/index.jsx

@@ -7,7 +7,12 @@ import React from 'react'
 
 export default () => {
   const editor = useEditor({
-    extensions: [Document, Paragraph, Text, Typography],
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      Typography,
+    ],
     content: `
         <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
         <p>— Erik Spiekermann, December 2008</p>

demos/src/Extensions/TypographyWithOverrides/React/index.jsx

@@ -0,0 +1,25 @@
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Typography from '@tiptap/extension-typography'
+import { EditorContent, useEditor } from '@tiptap/react'
+import React from 'react'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      Document,
+      Paragraph,
+      Text,
+      Typography.configure({
+        rightArrow: '=====>',
+      }),
+    ],
+    content: `
+        <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
+        <p>— Erik Spiekermann, December 2008</p>
+      `,
+  })
+
+  return <EditorContent editor={editor} />
+}

demos/src/Extensions/TypographyWithOverrides/React/index.spec.js

@@ -0,0 +1,15 @@
+context('/src/Extensions/TypographyWithOverrides/React/', () => {
+  before(() => {
+    cy.visit('/src/Extensions/TypographyWithOverrides/React/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should use correct override for rightArrow', () => {
+    cy.get('.tiptap').type('-> Hello!').should('contain', '=====> Hello!')
+  })
+})

demos/src/Extensions/TypographyWithOverrides/Vue/index.spec.js

@@ -0,0 +1,15 @@
+context('/src/Extensions/TypographyWithOverrides/Vue/', () => {
+  before(() => {
+    cy.visit('/src/Extensions/TypographyWithOverrides/Vue/')
+  })
+
+  beforeEach(() => {
+    cy.get('.tiptap').then(([{ editor }]) => {
+      editor.commands.clearContent()
+    })
+  })
+
+  it('should use correct override for rightArrow', () => {
+    cy.get('.tiptap').type('-> Hello!').should('contain', '=====> Hello!')
+  })
+})

demos/src/Extensions/TypographyWithOverrides/Vue/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Typography from '@tiptap/extension-typography'
+import { Editor, EditorContent } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document,
+        Paragraph,
+        Text,
+        Typography.configure({
+          rightArrow: '=====>',
+        }),
+      ],
+      content: `
+        <p>“I have been suffering from Typomania all my life, a sickness that is incurable but not lethal.”</p>
+        <p>— Erik Spiekermann, December 2008</p>
+      `,
+    })
+  },
+
+  beforeUnmount() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/api/extensions/typography.md

@@ -70,3 +70,21 @@ const editor = new Editor({
   ],
 })
 ```
+
+### Overriding rules
+
+You can override the output of a rule by passing a string to the option you want to override.
+
+```js
+import { Editor } from '@tiptap/core'
+import Typography from '@tiptap/extension-typography'
+
+const editor = new Editor({
+  extensions: [
+    // Disable some included rules
+    Typography.configure({
+      oneHalf: "1 / 2", // this will insert "1 / 2" instead of the default "½"
+    }),
+  ],
+})
+```