add ordered list and list item

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

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

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

@@ -0,0 +1,73 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+      bullet list
+    </button>
+    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+      ordered list
+    </button>
+
+    <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 BulletList from '@tiptap/extension-bullet-list'
+import OrderedList from '@tiptap/extension-ordered-list'
+import ListItem from '@tiptap/extension-list-item'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        BulletList(),
+        OrderedList(),
+        ListItem(),
+      ],
+      content: `
+        <p>
+          I like lists. Let’s add one:
+        </p>
+        <ul>
+          <li>This is a bullet list.</li>
+          <li>And it has three list items.</li>
+          <li>Here is the third one.</li>
+        </ul>
+        <p>
+          Do you want to see one more? I bet! Here is another one:
+        </p>
+        <ol>
+          <li>That’s a different list, actually it’s an ordered list.</li>
+          <li>It also has three list items.</li>
+          <li>And all of them are numbered.</li>
+        </ol>
+        <p>
+          Lists would be nothing without list items.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>

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

@@ -0,0 +1,97 @@
+context('/api/extensions/ordered-list', () => {
+  before(() => {
+    cy.visit('/api/extensions/ordered-list')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p>')
+      editor.selectAll()
+    })
+  })
+
+  it('the button should make the selected line a ordered list item', () => {
+    cy.get('.ProseMirror ol')
+      .should('not.exist')
+
+    cy.get('.ProseMirror ol li')
+      .should('not.exist')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('ol')
+      .should('contain', 'Example Text')
+
+    cy.get('.ProseMirror')
+      .find('ol li')
+      .should('contain', 'Example Text')
+  })
+
+  it('the button should toggle the ordered list', () => {
+    cy.get('.ProseMirror ol')
+      .should('not.exist')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('ol')
+      .should('contain', 'Example Text')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror ol')
+      .should('not.exist')
+  })
+
+  it('should leave the list with double enter', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('1. List Item 1{enter}{enter}Paragraph')
+
+    cy.get('.ProseMirror')
+      .find('li')
+      .its('length')
+      .should('eq', 1)
+
+    cy.get('.ProseMirror')
+      .find('p')
+      .should('contain', 'Paragraph')
+  })
+
+  it('should make a ordered list from a number', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('1. List Item 1{enter}List Item 2')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'List Item 1')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', 'List Item 2')
+  })
+
+  it('should remove the ordered list after pressing backspace', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('1. {backspace}Example')
+
+    cy.get('.ProseMirror')
+      .find('p')
+      .should('contain', '1. Example')
+  })
+})

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

@@ -0,0 +1,53 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+      ordered list
+    </button>
+
+    <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 OrderedList from '@tiptap/extension-ordered-list'
+import ListItem from '@tiptap/extension-list-item'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        OrderedList(),
+        ListItem(),
+      ],
+      content: `
+        <ul>
+          <li>A list item</li>
+          <li>And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>

docs/src/docPages/api/extensions/list-item.md

@@ -1,11 +1,11 @@
 # ListItem
-Enables you to use the `<li>` HTML tag in the editor.
+The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
-
-::: warning Restrictions
-This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
-:::
 
 ## Installation
+::: warning Restrictions
+This extensions is intended to be used with the [`BulletList`](/api/extensions/bullet-list) or [`OrderedList`](/api/extensions/ordered-list) extension. It doesn’t work without at least using one of them.
+:::
+
 ```bash
 # With npm
 npm install @tiptap/extension-list-item
@@ -18,3 +18,17 @@ yarn add @tiptap/extension-list-item
 | Option | Type   | Default | Description                                  |
 | ------ | ------ | ------- | -------------------------------------------- |
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
+
+## Commands
+*None*
+
+## Keyboard shortcuts
+* New list item: `Enter`
+* Sink a list item: `Tab`
+* Lift a list item: `Shift` + `Tab`
+
+## Source code
+[packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
+
+## Usage
+<demo name="Extensions/ListItem" highlight="3-8,20-22,41-43" />

docs/src/docPages/api/extensions/ordered-list.md

@@ -1,5 +1,7 @@
 # OrderedList
-Enables you to use the `<ol>` HTML tag in the editor.
+This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags,
+
+Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
 
 ## Installation
 ::: warning Use with ListItem
@@ -21,56 +23,14 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 
 ## Commands
 | Command     | Options | Description           |
-| ------------ | ------- | ----------------------- |
+| ----------- | ------- | --------------------- |
-| ordered_list | —       | Toggle an ordered list. |
+| ordered_list | —       | Toggle a ordered list. |
 
 ## Keyboard shortcuts
 * `Control` + `Shift` + `9`
 
+## Source code
+[packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
+
 ## Usage
-```markup
+<demo name="Extensions/OrderedList" highlight="3-5,17-18,37-38" />
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list">
-        Ordered List
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { OrderedList } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          OrderedList(),
-        ],
-        content: `
-          <ol>
-            <li>A list item</li>
-            <li>And another one</li>
-          </ol>
-          <ol start="3">
-            <li>This list begins with 3.</li>
-          </ol>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```

docs/src/links.yaml

@@ -107,7 +107,6 @@
           link: /api/extensions/bold
         - title: BulletList
           link: /api/extensions/bullet-list
-          draft: true
         - title: Code
           link: /api/extensions/code
         - title: CodeBlock
@@ -135,13 +134,11 @@
           draft: true
         - title: ListItem
           link: /api/extensions/list-item
-          draft: true
         # - title: Mention
         #   link: /api/extensions/mention
         #   draft: true
         - title: OrderedList
           link: /api/extensions/ordered-list
-          draft: true
         - title: Paragraph
           link: /api/extensions/paragraph
         # - title: Placeholder