diff --git a/demos/src/Nodes/OrderedList/React/index.html b/demos/src/Nodes/OrderedList/React/index.html
new file mode 100644
index 00000000..52fe24f5
--- /dev/null
+++ b/demos/src/Nodes/OrderedList/React/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/demos/src/Nodes/OrderedList/React/index.jsx b/demos/src/Nodes/OrderedList/React/index.jsx
new file mode 100644
index 00000000..47778f16
--- /dev/null
+++ b/demos/src/Nodes/OrderedList/React/index.jsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+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'
+import './styles.scss'
+
+export default () => {
+ const editor = useEditor({
+ extensions: [Document, Paragraph, Text, OrderedList, ListItem],
+ content: `
+
+ - A list item
+ - And another one
+
+
+
+ - This item starts at 5
+ - And another one
+
+ `,
+ })
+
+ if (!editor) {
+ return null
+ }
+
+ return (
+ <>
+
+
+
+
+
+
+
+ )
+}
diff --git a/demos/src/Nodes/OrderedList/React/index.spec.js b/demos/src/Nodes/OrderedList/React/index.spec.js
new file mode 100644
index 00000000..f773d780
--- /dev/null
+++ b/demos/src/Nodes/OrderedList/React/index.spec.js
@@ -0,0 +1,101 @@
+context('/src/Nodes/OrderedList/React/', () => {
+ before(() => {
+ cy.visit('/src/Nodes/OrderedList/React/')
+ })
+
+ beforeEach(() => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.setContent('Example Text
')
+ cy.get('.ProseMirror').type('{selectall}')
+ })
+ })
+
+ it('should parse ordered lists correctly', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.setContent('Example Text
')
+ expect(editor.getHTML()).to.eq('Example Text
')
+ })
+ })
+
+ it('should parse ordered lists without paragraphs correctly', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.setContent('- Example Text
')
+ expect(editor.getHTML()).to.eq('Example Text
')
+ })
+ })
+
+ 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('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('button:nth-child(1)').click()
+
+ cy.get('.ProseMirror').find('ol').should('contain', 'Example Text')
+
+ cy.get('button:nth-child(1)').click()
+
+ cy.get('.ProseMirror ol').should('not.exist')
+ })
+
+ it('should make the paragraph an ordered list keyboard shortcut is pressed', () => {
+ cy.get('.ProseMirror')
+ .trigger('keydown', { modKey: true, shiftKey: true, key: '7' })
+ .find('ol li')
+ .should('contain', 'Example Text')
+ })
+
+ it('should leave the list with double enter', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.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.commands.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 make a ordered list from a number other than number one', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.clearContent()
+ })
+
+ cy.get('.ProseMirror').type('2. List Item 1{enter}List Item 2')
+
+ cy.get('.ProseMirror').find('ol').should('have.attr', 'start', '2')
+ })
+
+ it('should remove the ordered list after pressing backspace', () => {
+ cy.get('.ProseMirror').then(([{ editor }]) => {
+ editor.commands.clearContent()
+ })
+
+ cy.get('.ProseMirror').type('1. {backspace}Example')
+
+ cy.get('.ProseMirror').find('p').should('contain', '1. Example')
+ })
+})
diff --git a/demos/src/Nodes/OrderedList/React/styles.scss b/demos/src/Nodes/OrderedList/React/styles.scss
new file mode 100644
index 00000000..d7d0f5ad
--- /dev/null
+++ b/demos/src/Nodes/OrderedList/React/styles.scss
@@ -0,0 +1,11 @@
+/* Basic editor styles */
+.ProseMirror {
+ > * + * {
+ margin-top: 0.75em;
+ }
+
+ ul,
+ ol {
+ padding: 0 1rem;
+ }
+}