Merge branch 'main' into feature/new-highlight-extension

docs/src/demos/Examples/TodoApp/index.spec.js

@@ -0,0 +1,5 @@
+context('/examples/todo-app', () => {
+  before(() => {
+    cy.visit('/examples/todo-app')
+  })
+})

docs/src/demos/Examples/TodoApp/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+const CustomDocument = Document.extend({
+  content: 'taskList',
+})
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        CustomDocument(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,101 @@
+context('/api/extensions/typography', () => {
+  before(() => {
+    cy.visit('/api/extensions/typography')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+  })
+
+  it('should make an em dash from two dashes', () => {
+    cy.get('.ProseMirror')
+      .type('-- emDash')
+      .should('contain', '— emDash')
+  })
+
+  it('should make an ellipsis from three dots', () => {
+    cy.get('.ProseMirror')
+      .type('... ellipsis')
+      .should('contain', '… ellipsis')
+  })
+
+  it('should make a correct open double quote', () => {
+    cy.get('.ProseMirror')
+      .type('"openDoubleQuote"')
+      .should('contain', '“openDoubleQuote')
+  })
+
+  it('should make a correct close double quote', () => {
+    cy.get('.ProseMirror')
+      .type('"closeDoubleQuote"')
+      .should('contain', 'closeDoubleQuote”')
+  })
+
+  it('should make a correct open single quote', () => {
+    cy.get('.ProseMirror')
+      .type("'openSingleQuote'")
+      .should('contain', '‘openSingleQuote’')
+  })
+
+  it('should make a correct close single quote', () => {
+    cy.get('.ProseMirror')
+      .type("'closeSingleQuote'")
+      .should('contain', 'closeSingleQuote’')
+  })
+
+  it('should make a left arrow', () => {
+    cy.get('.ProseMirror')
+      .type('<- leftArrow')
+      .should('contain', '← leftArrow')
+  })
+
+  it('should make a right arrow', () => {
+    cy.get('.ProseMirror')
+      .type('-> rightArrow')
+      .should('contain', '→ rightArrow')
+  })
+
+  it('should make a copyright sign', () => {
+    cy.get('.ProseMirror')
+      .type('(c) copyright')
+      .should('contain', '© copyright')
+  })
+
+  it('should make a registered trademark sign', () => {
+    cy.get('.ProseMirror')
+      .type('(r) registeredTrademark')
+      .should('contain', '® registeredTrademark')
+  })
+
+  it('should make a one half', () => {
+    cy.get('.ProseMirror')
+      .type('1/2 oneHalfw')
+      .should('contain', '½ oneHalf')
+  })
+
+  it('should make a plus/minus sign', () => {
+    cy.get('.ProseMirror')
+      .type('+/- plusMinus')
+      .should('contain', '± plusMinus')
+  })
+
+  it('should make a not equal sign', () => {
+    cy.get('.ProseMirror')
+      .type('!= notEqual')
+      .should('contain', '≠ notEqual')
+  })
+
+  it('should make a laquo', () => {
+    cy.get('.ProseMirror')
+      .type('<< laquorow')
+      .should('contain', '« laquo')
+  })
+
+  it('should make a raquo', () => {
+    cy.get('.ProseMirror')
+      .type('>> raquorow')
+      .should('contain', '» raquo')
+  })
+})

docs/src/demos/Extensions/Typography/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Typography from '@tiptap/extension-typography'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      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>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

docs/src/demos/Nodes/TaskItem/index.spec.js

@@ -0,0 +1,5 @@
+context('/api/nodes/task-item', () => {
+  before(() => {
+    cy.visit('/api/nodes/task-item')
+  })
+})

docs/src/demos/Nodes/TaskItem/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

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

@@ -1,5 +1,5 @@
 # Typography
-
+This extension tries to help with common text patterns with the correct typographic character. Under the hood all rules are input rules.
 
 ## Installation
 ```bash
@@ -10,8 +10,27 @@ npm install @tiptap/typography
 yarn add @tiptap/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 <code><&dash;</code> to an arrow `←` .                  |
+| rightArrow          | Converts <code>&dash;></code> 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 `»`. |
+
 ## Source code
 [packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/)
 
 ## Usage
-<demo name="Extensions/Typography" highlight="" />
+<demo name="Extensions/Typography" highlight="12,31" />

docs/src/docPages/api/keyboard-shortcuts.md

@@ -5,11 +5,16 @@
 ## Introduction
 tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
 
-Funfact: A while ago, we built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
+Funfact: We built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
 
 ## Predefined keyboard shortcuts
 Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.
 
+### Ideas
+* Task List ⌥⌘L (iaWriter)
+* Mark Task Complete ⌘. (iaWriter)
+* Text Highlight ⌘E (Paper)
+
 ### Essentials
 ❌ = untested
 

docs/src/docPages/api/nodes/task-item.md

@@ -1,4 +1,7 @@
 # TaskItem
+This extension renders a task item list element, which is a `<li>` tag with a `data-type` attribute set to `taskItem`. It also renders a checkbox inside the list element, which updates a `checked` attribute.
+
+This extension doesn’t require any JavaScript framework, it’s based on plain JavaScript.
 
 ## Installation
 ::: warning Use with TaskList
@@ -18,8 +21,8 @@ yarn add @tiptap/extension-task-list @tiptap/extension-task-item
 | ------ | ------ | ------- | -------------------------------------------- |
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
-## Commands
+## Keyboard shortcuts
-*None*
+* New list item: `Enter`
 
 ## Source code
 [packages/extension-task-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)

docs/src/docPages/examples/todo-app.md

@@ -0,0 +1,3 @@
+# Todo App
+
+<demo name="Examples/TodoApp" highlight="" />

docs/src/links.yaml

@@ -18,59 +18,20 @@
           link: /examples/collaborative-editing
         - title: Markdown shortcuts
           link: /examples/markdown-shortcuts
-        # - title: Menu Bubble
-        #   link: /examples/menu-bubble
-        #   draft: true
-        # - title: Floating Menu
-        #   link: /examples/floating-menu
-        #   draft: true
         - title: Formatting
           link: /examples/formatting
         - title: Links
           link: /examples/links
           draft: true
-        # - title: Images
+        - title: Todo App
-        #   link: /examples/images
+          link: /examples/todo-app
-        #   draft: true
+          draft: true
-        # - title: Hiding Menu Bar
-        #   link: /examples/hiding-menu-bar
-        #   draft: true
-        # - title: Todo List
-        #   link: /examples/todo-list
-        #   draft: true
-        # - title: Tables
-        #   link: /examples/tables
-        #   draft: true
-        # - title: Search and Replace
-        #   link: /examples/search-and-replace
-        #   draft: true
-        # - title: Suggestions
-        #   link: /examples/suggestions
-        #   draft: true
-        # - title: Code Highlighting
-        #   link: /examples/code-highlighting
-        #   draft: true
         - title: History
           link: /examples/history
         - title: Read-only
           link: /examples/read-only
-        # - title: Embeds
-        #   link: /examples/embeds
-        #   draft: true
-        # - title: Placeholder
-        #   link: /examples/placeholder
-        #   draft: true
         - title: Focus
           link: /examples/focus
-        # - title: Title
-        #   link: /examples/title
-        #   draft: true
-        # - title: Trailing Paragraph
-        #   link: /examples/trailing-paragraph
-        #   draft: true
-        # - title: Drag Handle
-        #   link: /examples/drag-handle
-        #   draft: true
         - title: Minimalist
           link: /examples/minimalist
         - title: Export HTML or JSON
@@ -136,7 +97,6 @@
           link: /api/nodes/task-list
         - title: TaskItem
           link: /api/nodes/task-item
-          draft: true
         - title: Text
           link: /api/nodes/text
     - title: Marks
@@ -178,7 +138,6 @@
           draft: true
         - title: Typography
           link: /api/extensions/typography
-          draft: true
     - title: Commands
       link: /api/commands
     - title: Events

packages/extension-typography/index.ts

@@ -6,8 +6,19 @@ import {
   closeDoubleQuote,
   openSingleQuote,
   closeSingleQuote,
+  InputRule,
 } from 'prosemirror-inputrules'
 
+export const leftArrow = new InputRule(/<-$/, '←')
+export const rightArrow = new InputRule(/->$/, '→')
+export const copyright = new InputRule(/\(c\)$/, '©')
+export const registeredTrademark = new InputRule(/\(r\)$/, '®')
+export const oneHalf = new InputRule(/1\/2$/, '½')
+export const plusMinus = new InputRule(/\+\/-$/, '±')
+export const notEqual = new InputRule(/!=$/, '≠')
+export const laquo = new InputRule(/<<$/, '«')
+export const raquo = new InputRule(/>>$/, '»')
+
 const Typography = createExtension({
   addInputRules() {
     return [
@@ -17,6 +28,15 @@ const Typography = createExtension({
       closeDoubleQuote,
       openSingleQuote,
       closeSingleQuote,
+      leftArrow,
+      rightArrow,
+      copyright,
+      registeredTrademark,
+      oneHalf,
+      plusMinus,
+      notEqual,
+      laquo,
+      raquo,
     ]
   },
 })